浏览器静默跳过是因为type、sizes与文件真实格式/尺寸及服务器返回的content-type三者未严格匹配：.ico需type="image/x-icon"且content-type为image/x-icon；.png需type="image/png"、sizes="32x32"且content-type为image/png；svg需type="image/svg+xml"、sizes="any"，但safari不支持。
直接写 <link rel="icon" href="favicon.ico"> 大概率不显示——现代浏览器要求 type、sizes、服务器返回的 Content-Type 三者严格匹配，缺一不可。
为什么写了 rel="icon" 却没加载
浏览器对 favicon 加载不报错，但会静默跳过整条 <link>。常见卡点：
- 直接访问你写的
href路径（比如https://yoursite.com/favicon-32x32.png）返回 404 或重定向 —— 检查 Nginx/Apache 是否拦截了.png或.ico请求 - Network 面板看到请求返回 200，但响应头里
Content-Type是text/plain或空 ——.ico必须是image/x-icon，.png必须是image/png - 改了 HTML 里的
href，图标还是旧的 —— favicon 缓存极强（max-age=31536000），Ctrl+Shift+R 无效，得清「网站数据」或用隐身窗口验证
type 和 sizes 怎么配才有效
sizes 不是 CSS 宽高，而是告诉浏览器“这个文件实际像素尺寸是多少”。写错、不写、或和文件真实尺寸不符，Chrome 90+、Firefox 84+ 会直接忽略该条目。
-
type="image/x-icon"→ 只能配.ico文件；sizes对它无效（.ico自带多尺寸），可省略 -
type="image/png"→ 必须带sizes="32x32"（注意是英文小写x，不是中文 × 或px） -
type="image/svg+xml"→ Chrome 110+ 要求必须声明sizes="any"；Safari 当前完全不支持 SVG 作rel="icon" - 服务器返回的
Content-Type优先级高于 HTML 中的type；若冲突（如 HTML 写type="image/png"，但服务器返回text/plain），图标一定不加载
多个 rel="icon" 并存时谁生效
浏览器不是“选最优”，而是按 HTML 中出现顺序，只取第一个能成功获取且通过 type/sizes 校验的。后面的即使尺寸更优也完全忽略。
- 把最兼容的放前面：
<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"：现代浏览器已废弃，写了也无效，还可能干扰manifest.json解析 - 路径必须绝对：
href="/favicon-32x32.png"，不能用href="assets/icon.png"（子页面下会 404）
iOS 和 PWA 图标为什么单独要加
rel="icon" 对标签页生效，但 iOS 主屏幕、Android PWA 安装横幅、Windows 钉住等场景完全不走这条路。
- Safari（iOS/macOS）完全不读
rel="icon"，必须加<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180">，且图片需纯色背景、无透明边距 - Android Chrome PWA 启动图标依赖
manifest.json，HTML 里必须有<link rel="manifest" href="/site.webmanifest">，否则不会加载 manifest - 不要指望一个 SVG 同时搞定所有平台：Safari 不支持 SVG favicon；Firefox 当前仍不支持；Android WebView 对 SVG 支持不稳定
最容易被忽略的是服务器返回的 Content-Type —— 它比 HTML 里的 type 更权威，且无法在前端修复；其次是缓存，改完代码后图标不更新，八成是因为浏览器死死咬住旧缓存不放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
