现代浏览器严格校验 favicon 的 type、sizes 和 content-type：type 与文件格式必须匹配（如 type="image/x-icon" 仅用于 .ico），sizes 格式须为小写 "x"（如 "32x32"），服务器返回的 content-type 优先于 html 中 type，且路径必须绝对、文件真实可访问；多个 rel="icon" 仅加载第一个合法项；ios 和 pwa 需单独配置 apple-touch-icon 和 manifest。
直接写 <link rel="icon" href="favicon.ico"> 大概率不显示——现代浏览器要求显式声明 type 和（对 PNG/SVG）sizes，且服务器返回的 Content-Type 必须匹配，否则静默丢弃。
rel="icon" 的 type 和 sizes 必须配对且精确
浏览器不是“尽力加载”，而是严格校验：type 错、sizes 格式错、或与文件真实尺寸不符，整条 <link> 就被跳过。
-
type="image/x-icon"→ 只能配.ico文件；sizes对它无效（.ico 自带多尺寸），可省略 -
type="image/png"→ 必须带sizes="32x32"（注意是英文小写x，不是中文 × 或px） -
type="image/svg+xml"→ Chrome 110+ 要求必须声明，Safari 当前完全不支持 SVG 作rel="icon" - 服务器响应头中的
Content-Type优先级高于 HTML 中的type；若冲突（如 HTML 写type="image/png"，但服务器返回text/plain），图标一定不加载
路径必须绝对且文件真实可访问
相对路径在子页面下极易 404，浏览器也不会 fallback 到根目录自动找 /favicon.ico —— 除非你根本没写任何 <link rel="icon">。
- 用绝对路径：
href="/favicon-32x32.png"，要求文件真在网站根目录（Nginx 的root目录下、Vite 的public/下） - 不要用
href="assets/icon.png"：当页面 URL 是/blog/post.html时，会请求/blog/assets/icon.png，而非你预期的位置 - 验证方式：直接在浏览器地址栏打开
https://yoursite.com/favicon-32x32.png，必须返回 200 状态码 + 正确Content-Type
多个 rel="icon" 并存时，浏览器只取第一个合法项
不是“选最优”，而是按 HTML 中出现顺序，加载第一个能成功获取且通过 type/sizes 校验的。后面的即使尺寸更优也完全忽略。
- 把最兼容的放前面：比如
<link rel="icon" type="image/x-icon" href="/favicon.ico"> - 高清 PNG 放后面：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> - 不要混写
rel="shortcut icon"：现代浏览器已废弃该值，写了也无效，还可能触发重复请求
iOS 和 PWA 图标不走 rel="icon"
rel="icon" 对标签页生效，但 iOS 主屏幕、Android PWA 安装横幅、Windows 钉选等场景完全不认它——它们走的是独立机制。
- iOS 必须加：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">，要求 PNG、180×180、纯色背景、无透明边距 - PWA 必须加：
<link rel="manifest" href="/manifest.json">；否则 Android Chrome 不会读取manifest.json里的icons数组 - SVG 不能替代 PNG 做
apple-touch-icon：苹果设备只认 PNG
真正卡住的往往不是写错一行代码，而是缓存没清、服务器 MIME 类型没配、或以为加了 rel="icon" 就万事大吉——结果 iOS 用户添加主屏快捷方式时看到的是截屏生成的模糊图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
