现代浏览器仅识别rel="icon"，必须配type且ios/android需额外声明apple-touch-icon和manifest图标；rel="shortcut icon"已失效，混写可能引发加载bug。
直接写 <link rel="icon" href="/favicon.ico"> 不够用，现代浏览器能显示，但 iOS、Android 主屏幕、PWA 安装横幅、Safari 固定标签页全会失效。
rel="icon" 是唯一有效值，别再写 shortcut icon
Chrome 90+、Firefox 84+、Edge 90+ 已彻底忽略 rel="shortcut icon"。它不是“兼容写法”，而是无效冗余代码。混写两个 <link> 还可能触发旧版 Safari 的加载顺序 bug，导致图标被跳过。
- ✅ 正确写法：
<link rel="icon" href="/favicon.ico" type="image/x-icon"> - ❌ 错误写法：
<link rel="shortcut icon" href="/favicon.ico">（现代浏览器不解析） - ⚠️ 风险写法：
<link rel="icon" ...> <link rel="shortcut icon" ...>（部分 Android WebView 会取第二个，但不可控）
type 和 sizes 必须配对，且仅对 PNG/SVG 生效
sizes 属性对 .ico 文件完全无效——因为 ICO 格式本身支持多尺寸嵌入；但如果你用的是 PNG，sizes 就是强制项：不写或格式错（比如写成 sizes="32" 或 sizes="32px"），浏览器就当这行 <link> 不存在。
-
type="image/x-icon"→ 只能配.ico，不写sizes -
type="image/png"→ 必须配sizes="16x16"或sizes="32x32"等，且像素值要和文件实际分辨率一致 -
type="image/svg+xml"→ 可不写sizes（矢量自适应），但 Safari 不支持作为rel="icon"加载
iOS 和 Android 主屏幕图标不走 rel="icon"
无论你写多少个 rel="icon"，iOS Safari 都会忽略它们，转而查找 rel="apple-touch-icon"；Android Chrome 主屏幕则依赖 manifest.json 中的 icons 数组，或者 HTML 中显式声明的 sizes="192x192" PNG —— 而不是 favicon.ico 里的 32×32 图。
- iOS 必须加：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> - Android PWA 最低要求：
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png"> - 所有
href建议用绝对路径（以/开头），避免子页面如/blog/post拼出错误请求
缓存比普通资源顽固，验证必须绕过它
浏览器对 favicon 的缓存策略独立于页面缓存，硬刷新（Ctrl+Shift+R）通常无效。Network 面板里看不到 favicon.ico 请求，大概率就是被强缓存住了。
- 最快验证方式：开无痕窗口，直接访问
https://yoursite.com/favicon.ico，看是否返回 200 +Content-Type: image/x-icon - 开发阶段可临时加参数：
href="/favicon.ico?v=2"，上线后应改回无参路径 - Nginx/Apache 需确保
/favicon.ico不被重写规则拦截，例如 Nginx 要有明确location = /favicon.ico { ... }
最易被忽略的是服务器 MIME 类型配置：哪怕路径和代码全对，如果 .png 文件被服务器当成 text/plain 返回，Chrome 就静默放弃加载，控制台连 warning 都不报。
