现代浏览器严格校验rel="icon"的type、sizes、路径和服务器content-type，任一不匹配即静默丢弃；必须用绝对路径、显式声明合法type与sizes（如png配type="image/png"和sizes="32x32"），且ios/pwa需单独配置apple-touch-icon和manifest.json。
只写 <link rel="icon"> 且不配 type 和 sizes，现代浏览器大概率不显示图标——不是代码没生效，而是被静默跳过了。
为什么写了 rel="icon" 却不显示？
浏览器不是“尽力加载”，而是逐项校验：type 错、sizes 格式错、路径 404、服务器返回的 Content-Type 不匹配，整条 <link> 就直接丢弃。常见现象包括：
- 开发者工具 Network 里搜不到 favicon 请求 → 路径 404 或相对路径解析失败（比如页面在
/blog/下却写了href="favicon.png"） - 图标模糊或没出现 → 只提供了 16×16 PNG，但高 DPI 屏幕需要 32×32 或 192×192
- Chrome 显示了，Safari 还是地球图标 → 没加
<link rel="apple-touch-icon">，iOS 完全不看rel="icon"
type 和 sizes 怎么配才合法？
必须严格匹配文件格式和真实尺寸，不能靠猜：
-
.ico文件：用type="image/x-icon"，sizes可省略（.ico自带多尺寸），或写sizes="any" -
.png文件：必须同时写type="image/png"和sizes="32x32"（注意是英文小写x，不是×或px） -
.svg文件：Chrome 110+ 支持type="image/svg+xml"，但 Safari 当前仍不支持作rel="icon"，别依赖 - 服务器返回的 Content-Type 优先级高于 HTML 中的
type；若冲突（如 HTML 写image/png，但 Nginx 返回text/plain），图标一定不加载
多个 rel="icon" 标签怎么写才有效？
浏览器只取第一个能成功获取且通过校验的，后面的完全忽略。顺序和合法性比数量重要：
- 把最兼容的放最前：
<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"——已废弃，写了无效，还可能触发重复请求 - 绝对路径是底线：
href="/favicon-32x32.png"，不是href="assets/icon.png"
iOS 和 PWA 图标为什么单独处理？
rel="icon" 只管标签页，主屏幕、PWA 安装面板、Windows 钉选等场景走的是独立机制：
- iOS Safari 完全不读
rel="icon"，必须显式声明：<link rel="apple-touch-icon" href="/apple-touch-icon.png">（推荐 180×180，纯色背景、无透明边距） - PWA 图标由
manifest.json的icons字段控制，网页内 JS 修改<link rel="icon">对它完全无效 - Android Chrome 在 PWA 安装后，桌面图标固定来自 manifest，运行时无法更改
真正容易被忽略的点是：缓存强到离谱——改了图标、换了 URL，浏览器仍可能沿用旧缓存。验证前务必清空“网站数据”或用隐身窗口，否则所有配置都白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
