直接写基本不生效——现代浏览器严格校验type、sizes、路径及content-type，任一不符即静默丢弃；必须显式声明type（如image/x-icon或image/png）和sizes（png需32x32小写x格式），路径须绝对，服务器content-type必须匹配，且ios/pwa需单独配置apple-touch-icon和manifest.json。
直接写 <link rel="icon" href="favicon.ico"> 基本不生效——现代浏览器对 rel="icon" 的校验极严格，缺 type、sizes、路径错、MIME 类型不匹配，都会静默丢弃，且不报错、不 fallback。
rel="icon" 必须显式声明 type 和 sizes
浏览器不是“尽力加载”，而是按规则逐项校验。只要一项不满足，整条 <link> 就被跳过。
-
type="image/x-icon"只能配.ico文件；sizes对它可省略（或写sizes="any"），但不能写成"32x32" -
type="image/png"必须带sizes，且格式必须是小写x，如sizes="32x32"，写成"32×32"或"32px x 32px"都会失效 -
type="image/svg+xml"仅 Chrome 110+ 支持，且必须声明type；Safari 当前完全不支持 SVG 作rel="icon" - 多个
rel="icon"并存时，浏览器只取 HTML 中第一个合法项，后面的尺寸再优也忽略
href 路径必须绝对且文件真实可访问
相对路径在 /blog/post.html 下会请求 /blog/favicon.png，而非你预期的根目录资源。
- 正确写法：
href="/favicon-32x32.png"（以/开头的绝对路径） - 错误写法：
href="assets/icon.png"或href="./favicon.ico" - 验证方式：在浏览器地址栏直接打开
https://yoursite.com/favicon-32x32.png，必须返回 HTTP 200 + 正确Content-Type（如image/png） - 服务器配置不能漏：Nginx/Apache 需确保
.ico文件返回Content-Type: image/x-icon，否则即使 HTML 写对了也白搭
iOS 和 PWA 图标必须单独声明，不复用 rel="icon"
iOS Safari 完全不读取 rel="icon"，哪怕路径、尺寸、格式都对；Android Chrome 加 PWA 场景下也优先走 manifest.json。
- iOS 主屏图标必须用：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">，推荐 180×180 PNG，无透明边距 - PWA 必须配
manifest.json：<link rel="manifest" href="/manifest.json">，其中icons字段定义多尺寸 PNG（如 192×192、512×512） -
rel="apple-touch-icon"的href不能为空字符串，也不能省略；即使写href=""，iOS 也会 fallback 到/apple-touch-icon.png，但不会从rel="icon"中提取
最容易被忽略的是服务器返回的 Content-Type —— 它优先级高于 HTML 中的 type 属性，一旦冲突（比如 HTML 写 type="image/png"，但服务器返回 text/plain），图标一定不显示，且毫无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
