现代浏览器要求rel="icon"必须严格匹配：.ico配type="image/x-icon"且sizes可省略；.png必须配type="image/png"和精确sizes="32x32"（小写x）；.svg仅chrome 110+支持且safari不兼容；路径须绝对，服务器content-type须与type一致，否则静默忽略。
直接写 <link rel="icon" href="favicon.ico"> 大概率不显示——现代浏览器要求显式声明 type、校验 sizes、路径必须绝对，且服务器返回的 Content-Type 必须匹配，否则静默忽略。
rel="icon" 的 type 和 sizes 怎么配才合法
浏览器不是“尽力加载”，而是逐项校验：type 错、sizes 格式错、或与文件真实尺寸不符，整条 <link> 就被跳过。
-
type="image/x-icon"→ 只能配.ico文件；sizes对它无效（.ico 自带多尺寸），可省略，但写了也无害 -
type="image/png"→ 必须带sizes="32x32"（注意是英文小写x，不是×或px）；若实际图片是 64×64，却写sizes="32x32"，Chrome 会拒绝加载 -
type="image/svg+xml"→ Chrome 110+ 支持，但 Safari 当前完全不支持作 favicon，不能依赖 - 服务器响应头中的
Content-Type优先级高于 HTML 中的type；若 HTML 写type="image/png"，但服务器返回text/plain，图标一定不加载
为什么加了 link 还是看不到图标
常见失效链路不是代码写错，而是资源层未就位。
- 路径用相对地址如
href="assets/icon.png"：当页面 URL 是/blog/post.html时，浏览器会请求/blog/assets/icon.png，而非你放图的位置 - 验证方式很简单：把
href值完整粘贴到浏览器地址栏（如https://yoursite.com/favicon-32x32.png），必须返回200 OK+ 正确 MIME 类型（image/png或image/x-icon） - 图标文件本身有坑：PNG 带透明通道（哪怕 1%）、导出时留白、尺寸标称 32×32 但实际是 33×33，iOS 和 Chrome 都会拒载
- 缓存极其顽固：改了文件内容但 URL 没变，浏览器可能沿用旧缓存数小时；硬刷新无效，必须清空「Cached images and files」或加版本参数如
href="/icon.png?v=2"
苹果设备（iOS/macOS）图标为什么单独处理
iOS Safari 完全不解析 rel="icon" 标签，只认 rel="apple-touch-icon"，且要求严格：
- 必须单独声明：
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">；路径必须是根相对（/xxx.png）或绝对（https://...），协议相对（//cdn...）在 iOS 15–16 某些版本会静默失败 - 尺寸必须是 180×180 像素（现代 iOS 主屏唯一认的尺寸），PNG 不能有透明通道，否则边缘发灰或填黑底
- 不要加
sizes、type或media属性——iOS 完全不认，某些旧 WebKit 还会因此跳过整条标签 - 真机测试不可替代：模拟器和桌面 Safari 无法准确复现；必须在 iPhone 上点「分享 → 添加到主屏幕」，观察是否出现图标；空白或地球图标 = 加载失败
多个 link 标签怎么排列才不踩坑
浏览器按 HTML 中出现顺序加载，只取第一个能成功获取且通过校验的 rel="icon"，后面的完全忽略。
- 最兼容的放最前：
<link rel="icon" type="image/x-icon" href="/favicon.ico">（保底，.ico 兼容性最强） - 高清 PNG 放后面：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">（现代浏览器优先选它） - 绝对不要混写
rel="shortcut icon"：Chrome 117+ 已弱化其优先级，写了无效还可能触发重复请求 - 禁止
rel="icon shortcut"这类非法空格分隔写法：W3C 不认可，部分解析器直接忽略整条
最易被忽略的点：图标不是“部署即生效”，而是“路径对 + 尺寸对 + MIME 对 + 真机验证”四者缺一不可；尤其 iOS，哪怕其他所有平台都正常，只要它没显示，就说明那条 apple-touch-icon 请求根本没成功返回一张合格的 180×180 PNG。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
