rel="icon"是唯一有效值，现代浏览器忽略"shortcut icon"；图标不显示主因是强缓存或路径/MIME错误，需验证/favicon.ico直连200响应、清除缓存、正确声明type与sizes，并为iOS和PWA额外配置apple-touch-icon及manifest。
rel="icon" 必须写，且只能写这个值；写 rel="shortcut icon" 现代浏览器直接忽略，不是兼容，是无效。
为什么写了 link 但标签页还是默认图标
最常见原因不是代码漏了，而是浏览器压根没发请求——通常因为缓存顽固或路径失效。
- 打开开发者工具 → Network → 刷新页面 → 筛选
favicon，如果根本没出现请求，说明被强缓存锁死了（Ctrl+Shift+R通常无效） - 直接访问
https://yoursite.com/favicon.ico，看是否返回200且Content-Type: image/x-icon - 用相对路径如
./favicon.ico？子页面（如/blog/）会拼成/blog/favicon.ico，404 - Nginx/Apache 若未显式配置
.ico的 MIME 类型，可能返回text/plain，Chrome 静默丢弃
type 和 sizes 怎么配才不白写
type 不是可选项，是校验开关；sizes 不是装饰，是匹配依据——错一个，整条 link 就被跳过。
-
type="image/x-icon"→ 只能配.ico文件；sizes对它无效（.ico 自带多尺寸） -
type="image/png"→ 必须带sizes="16x16"或"32x32"，格式必须是"NxN"（不能是"32"、"32px"、"32×32"） -
type="image/svg+xml"→ Chrome 110+ 要求必须声明，否则拒载；Safari 不支持 SVG 作为rel="icon" - 服务器返回的
Content-Type与type属性冲突时，Chrome 以响应头为准，HTML 里的type形同虚设
移动端和 PWA 图标为什么单独加了也不显示
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 - 漏掉
，PWA 图标大概率空白 - 多个
link[rel="icon"]并存时，浏览器只取第一个合法项，后面的尺寸再优也无效
真正难的不是写对一行 link，而是让每种设备都按你预期加载对应资源——rel="icon" 是起点，不是终点；缓存、MIME、路径、尺寸、平台规则，缺一环就断在那一环。
