现代浏览器严格校验favicon的type、sizes、Content-Type和路径，任一不符即静默跳过；必须仅用<link rel="icon" href="/favicon.ico" type="image/x-icon">，且iOS/PWA需单独配置。
直接写 <link rel="icon"> 很可能不显示——现代浏览器会严格校验 type、sizes、服务器返回的 Content-Type 和路径有效性，任一条件不满足就静默跳过，控制台也不报错。
rel 属性只能是 "icon"，别写 shortcut icon
Chrome 90+、Firefox 84+、Edge 90+、Safari 15+ 全部忽略 rel="shortcut icon"。它不是兼容写法，而是已被标准废弃的历史残留。混用两行（比如同时声明 rel="shortcut icon" 和 rel="icon"）反而可能导致浏览器取第一个链接（加载了错误尺寸或格式的文件），甚至干扰 PWA 的 manifest.json 解析。
必须只用这一种写法：<link rel="icon" href="/favicon.ico" type="image/x-icon">
-
rel值只能是"icon"，不能是"favicon"、"apple-touch-icon"（后者是独立用途） - 多个
<link rel="icon">并存时，浏览器只取第一个合法且可加载的，后面的完全忽略 - 不要用
rel="icon shortcut icon"这类非法组合值，会被当作rel="icon"处理但语义混乱
type 和 sizes 必须配对且格式精确
浏览器不是“尽力加载”，而是校验通过才用。错一个字段，整条 <link> 就被跳过。
立即学习“前端免费学习笔记（深入）”；
-
type="image/x-icon"→ 只能配 .ico 文件；sizes对它无效（.ico 自带多尺寸），可省略 -
type="image/png"→ 必须带sizes="32x32"，注意是英文小写x，不是中文 ×、不是px、不是32单数字 -
type="image/svg+xml"→ Chrome 110+ 要求必须声明，否则拒载；Safari 当前（v17）仍不稳定，不建议用于rel="icon" - 服务器响应头中的
Content-Type优先级高于 HTML 中的type；若冲突（如 HTML 写type="image/png"，但服务器返回text/plain），图标一定不加载
路径必须绝对，文件必须真实可访问且缓存可控
写了正确的 <link> 却没图标，八成卡在路径或缓存上。
- 必须用根相对路径：
href="/favicon-32x32.png"，不能用./favicon.png或assets/icon.png—— 否则子页面（如/blog/）会请求/blog/assets/icon.png导致 404 - 本地开发用
file://协议时，Chrome 直接禁用 favicon 加载；必须起服务，例如npx serve - 验证方式：直接在浏览器地址栏打开
https://yoursite.com/favicon-32x32.png，必须返回 200 状态码 + 正确Content-Type - favicon 缓存极顽固，
Ctrl+Shift+R通常无效；最可靠方式是改href路径（如加?v=2）或清空浏览器缓存并重启标签页
iOS 和 PWA 图标不走 rel="icon"
rel="icon" 只影响浏览器标签页和书签栏，对 iOS 主屏幕、Android PWA 安装横幅、Windows 钉住任务栏等场景完全不起作用——它们走的是另一套机制。
- iOS 必须单独加
<link rel="apple-touch-icon" href="/icon-180.png">，且图标必须是 180×180 像素、PNG 格式、无透明通道；sizes、type等属性 iOS 完全不认，加了反而可能干扰 - PWA 安装图标依赖
manifest.json中的icons数组，定义至少192x192和512x512尺寸的 PNG；HTML 中的rel="icon"对它无影响 - 别指望靠一个
<link>打天下；跨平台适配的关键是分场景提供对应资源，而不是堆砌所有 rel 值
最容易被忽略的是服务器返回的 Content-Type 和真机缓存行为：即使 HTML 写对、路径写对、尺寸也对，只要 Nginx/Apache 没配好 .png 的 MIME 类型，或者 iOS 已缓存旧图标，就永远看不到效果。
