rel="icon"是唯一有效值，必须配type和sizes且格式严格；绝对路径+正确Content-Type+清除顽固缓存是生效前提；移动端/PWA需额外配置apple-touch-icon或manifest.json。
rel="icon" 是唯一有效的值，写成 rel="shortcut icon" 或漏掉 type 属性，图标大概率静默失效。
rel 属性只能是 "icon"，不是 "shortcut icon"
Chrome 90+、Firefox 84+、Edge 90+ 和 Safari 15+ 全部忽略 rel="shortcut icon"。它不是兼容写法，而是已被标准废弃的历史残留。混用两行（比如同时写 rel="shortcut icon" 和 rel="icon"）反而可能触发重复请求或干扰 PWA 解析。
正确写法只有一条：<link rel="icon" href="/favicon.ico" type="image/x-icon">
- 不要写
rel="favicon"、rel="apple-touch-icon"（后者是独立用途） - 多个
<link rel="icon">并存时，浏览器只取第一个合法且可加载的，后面即使尺寸更优也跳过 - 如果用了
rel="apple-touch-icon"，那是给 iOS 书签用的，和标签页图标无关
type 和 sizes 必须配对，且格式不能错
type 不是可选项，是浏览器校验资源合法性的开关；sizes 不是装饰，是匹配依据——错一个，整条 <link> 就被跳过。
立即学习“前端免费学习笔记（深入）”；
-
type="image/x-icon"→ 只能配.ico文件；sizes对它无效（.ico 自带多尺寸） -
type="image/png"→ 必须带sizes="32x32"，格式必须是英文小写x，不能是32×32（中文乘号）、32px或32 -
type="image/svg+xml"→ Chrome 110+ 要求必须声明，否则拒载；Safari 当前不支持 SVG 作为rel="icon" - 服务器返回的
Content-Type响应头优先级高于 HTML 中的type，若冲突，HTML 的type形同虚设
路径和缓存是最常卡死的两个环节
写了正确的 <link> 却没图标，八成卡在路径或缓存上。浏览器会做两件事：一是按你写的 href 加载，二是无条件发起一次 GET /favicon.ico 请求——这个行为硬编码在 Chrome/Firefox/Edge 里。
- 用相对路径如
href="assets/icon.png"，在子页面（如/blog/）下会解析成/blog/assets/icon.png，结果 404 - 必须用绝对路径：
href="/favicon.ico"，且文件物理位置真在网站根目录（Nginx 的root目录下、Vite 的public/下） - 本地双击打开
file://协议时，Chrome 直接禁用 favicon 加载，必须起服务（如npx serve） - favicon 缓存极顽固，Ctrl+Shift+R 通常无效；最可靠方式是改
href路径（如加?v=2）或直接访问https://yoursite.com/favicon.ico看是否返回 200 + 正确Content-Type
移动端和 PWA 图标不走 rel="icon"
rel="icon" 对 iOS 主屏幕、Android PWA 安装横幅完全不起作用——它们走的是另一套机制。
- iOS Safari 忽略所有
rel="icon"，只认rel="apple-touch-icon"，且要求 PNG、180×180、无透明边距、纯色背景 - Android Chrome PWA 安装界面依赖
manifest.json中的icons数组，或 HTML 中显式声明的sizes="192x192"PNG - 漏掉
<link rel="manifest" href="/manifest.json">，PWA 图标大概率空白 - 不要只放
sizes="192x192"PNG 而不配.ico——IE 和老 Edge 会 fallback 到默认文档图标
真正难的不是写对一行 <link>，而是让每种设备都按你预期加载对应资源：缓存、MIME、路径、尺寸、平台规则，缺一环就断在那一环。尤其要注意，/favicon.ico 这个隐式请求永远存在，它不看你 HTML 里写了什么，只看服务器有没有在根目录返回 200。
