仅写<link rel="icon">不够，必须配全href、type（如image/x-icon或image/png）和必要时sizes（仅对PNG/SVG有效），否则浏览器静默跳过且不报错；rel="shortcut icon"已被现代浏览器废弃。
只写 <link rel="icon"> 不够，必须配对 href、type 和（必要时）sizes，否则多数浏览器直接跳过加载，且不报错。
rel="icon" 是唯一有效值，别再写 shortcut icon
Chrome 90+、Firefox 84+、Safari 15+ 和 Edge 90+ 全部忽略 rel="shortcut icon"。它不是“兼容写法”，而是历史包袱，留着反而可能干扰 PWA 的 manifest 解析或导致重复请求。
- ✅ 正确：
<link rel="icon" href="/favicon.ico" type="image/x-icon"> - ❌ 无效：
<link rel="shortcut icon" href="/favicon.ico">（现代浏览器不解析） - ⚠️ 危险：
<link rel="shortcut icon">和<link rel="icon">同时存在——部分浏览器取第一个，可能加载错文件
type 属性不能省，且必须和实际 MIME 严格一致
浏览器靠 type 做初步校验，不匹配就静默丢弃。服务器返回的 Content-Type 与 type 冲突时，Chrome 以响应头为准，HTML 里的 type 形同虚设。
- ICO 文件必须用
type="image/x-icon"；image/vnd.microsoft.icon在 Safari 上可能失败 - PNG 文件必须用
type="image/png"；写成image/jpg或漏掉，高 DPI 设备上图标会糊或消失 - SVG 文件必须用
type="image/svg+xml"；Chrome 110+ 会拒绝加载未声明该 type 的 SVG - 不写
type时，浏览器依赖文件后缀推断——但若 Nginx 未配置.png的 MIME 类型，返回text/plain，图标就彻底失效
sizes 只对 PNG/SVG 生效，且格式必须是 "NxN"
sizes 不是装饰属性，它是浏览器选图的关键依据。但它对 type="image/x-icon" 完全无效——因为 .ico 文件本身可内嵌多尺寸，浏览器自动提取。
- ✅ 有效：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> - ❌ 无效：
sizes="32"、sizes="32px"、sizes="32×32"（× 是中文乘号）、sizes="16x16 32x32"（不支持空格分隔） - 多个
<link>可共存，浏览器按设备 DPR 和使用场景（标签页/书签/PWA 弹窗）自动选最匹配的 - 只提供
sizes="16x16"PNG，在 Retina 屏或 Android Chrome PWA 安装界面中会被跳过，导致显示空白
缓存比普通资源顽固，换图标后不生效大概率是它在作祟
favicon 缓存策略独立于常规 HTTP 缓存，硬刷新（Ctrl+Shift+R）通常无效，Network 面板里甚至看不到请求——说明浏览器压根没发。
- 最可靠破缓存方式：改
href路径，比如从/favicon.ico改为/favicon-v2.ico，或加查询参数/favicon.ico?v=2 - 本地开发用
file://协议？Chrome 直接禁用 favicon 加载——必须起服务，如npx serve或python3 -m http.server - 如果用了 Service Worker，检查它是否缓存了
/favicon.ico；需手动 unregister 或更新其缓存逻辑 - 验证是否真生效：用隐身窗口打开，或清空 Chrome 的 “网站数据”（不只是“缓存”）
真正麻烦的不是写不对，而是写对了却没反应——因为浏览器不报错、不重试、不提示，只默默 fallback 到默认图标。排查顺序永远是：路径 404 → MIME 错误 → type 不匹配 → sizes 格式错 → 缓存锁死。
