现代浏览器要求 favicon 的 rel、type、sizes、content-type 和路径四者严格匹配，否则静默跳过；正确写法为 ，且需绝对路径、校验真实属性、避免缓存干扰。
只写 <link rel="icon" href="favicon.ico"> 基本不会生效——现代浏览器（Chrome 90+、Firefox 84+、Safari 15+）要求 type、sizes、Content-Type、路径四者全部匹配，漏一就静默跳过。
rel 属性必须是 "icon"，不是 "shortcut icon"
Chrome 117+ 已弱化 rel="shortcut icon" 的解析优先级，Safari 15+ 和 Edge 90+ 完全忽略它。混用还会干扰 PWA manifest 加载。
- ✅ 正确写法：
<link rel="icon" href="/favicon.ico" type="image/x-icon"> - ❌ 错误写法：
<link rel="shortcut icon" href="/favicon.ico">或<link rel="icon shortcut">（非法空格分隔，W3C 不认） - ⚠️ 兼容 IE11？只能额外加一条
<link rel="shortcut icon" ...>，且必须放在rel="icon"之后
type 和 sizes 必须与文件真实属性严格一致
浏览器不是“尽力加载”，而是校验型加载：type 错、sizes 格式错、或与文件实际尺寸不符，整条 <link> 就被丢弃，控制台还不报错。
-
.ico文件 → 必须用type="image/x-icon"；sizes对它无效，可省略，或写sizes="any"（仅此值合法） -
.png文件 → 必须带sizes="32x32"（注意：英文小写x，不能是×、px或空格）且文件真实尺寸必须是 32×32 像素 -
.svg文件 → Chrome 110+ 要求显式声明sizes="any"，但 Safari 当前完全不支持 SVG 作rel="icon" - 服务器返回的
Content-Type优先级高于 HTML 中的type；若冲突（如 HTML 写type="image/png"，但 Nginx 返回text/plain），图标一定不显示
路径必须绝对，且文件必须真实可访问
相对路径在 /blog/post.html 这类子页面下会请求 /blog/favicon.ico，而非你预期的根目录，结果 404。
- ✅ 推荐写法：
href="/favicon.ico"（根相对路径）或完整 URLhref="https://yoursite.com/favicon.ico" - ❌ 避免写法：
href="./favicon.ico"、href="assets/icon.png"、href="favicon.ico" - 验证方式：直接在浏览器地址栏打开
https://yoursite.com/favicon-32x32.png，必须返回 HTTP 200 + 正确Content-Type - 本地开发用
file://协议时，Chrome 直接禁用 favicon 加载——必须起本地服务，例如npx serve
多个 rel="icon" 并存时，浏览器只取第一个合法项
不是“选最优”，而是按 HTML 出现顺序，加载第一个能成功获取且通过全部校验的。后面的即使尺寸更优也完全忽略。
- ✅ 推荐顺序：兼容性最强的放最前，比如
<link rel="icon" type="image/x-icon" href="/favicon.ico"> - ✅ 高清 PNG 放后面：
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png"> - ⚠️ 别指望靠多条 PNG 覆盖所有场景：iOS 不读
rel="icon"，PWA 启动图标只认manifest.json，Windows 任务栏只提取 .ico 内的 48×48 和 256×256 图层
最容易被忽略的是缓存和 Content-Type：改了 HTML 但图标没变，大概率是浏览器强缓存（max-age=31536000）或服务器返回了错误 MIME 类型。清网站数据比 Ctrl+Shift+R 有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
