favicon.ico放根目录虽可被部分浏览器自动加载，但iOS/Android需显式link声明，HTTPS下HTTP图标会被拦截，缓存顽固须硬刷新或改名，PWA必须配manifest.json。
favicon.ico 放根目录就能自动加载，但别全靠它
绝大多数浏览器（Chrome、Edge、Firefox）会默认请求 https://yoursite.com/favicon.ico，只要这个路径能返回 16×16 或 32×32 的 .ico 文件，标签页就会显示图标——不用写任何 HTML。但这只是“能用”，不是“可靠”。
- iOS Safari 和 Android Chrome 完全不认根目录的
favicon.ico，必须显式声明<link rel="icon">或<link rel="apple-touch-icon"> - 如果网站启用了 HTTPS 但根目录图标走 HTTP（比如本地开发时），会被拦截，图标变空白
- 换图标后浏览器缓存极顽固，即使清了页面缓存，
favicon.ico可能仍被强制缓存数小时
必须写的 标签：现代兼容性底线
只放一个 <link rel="icon" href="/favicon.ico"> 已经不够用了。至少要覆盖三类场景：桌面标签页、iOS 添加到主屏幕、PWA 安装提示。推荐在 中一次性写齐：
<link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.json">
-
sizes属性不是可选的——iOS 和 Android 会严格按尺寸匹配，写错或漏写会导致图标不显示 -
type必须准确：image/x-icon对应 .ico，image/png对应 .png，类型不匹配时 Chrome 会静默忽略 - 所有
href路径必须是**绝对路径**（以/开头），相对路径在子页面中容易 404
manifest.json 不是可选，而是 PWA 图标事实标准
如果你希望用户“添加到主屏幕”或触发 PWA 安装横幅，manifest.json 是绕不开的一环。它不只是定义图标，还控制名称、主题色、启动画面等。最简可用配置如下：
{
"name": "我的网站",
"short_name": "站点",
"icons": [
{ "src": "/icon-72x72.png", "sizes": "72x72", "type": "image/png" },
{ "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"start_url": "/",
"display": "standalone"
}
- 图标尺寸必须是**完全匹配的数字字符串**，写成
"192x192"，不能是"192 × 192"或192x192px - Android Chrome 要求至少提供一个 ≥192×192 的 PNG，否则不触发安装提示
-
manifest.json必须放在网站根目录，并通过<link rel="manifest">显式引入，否则无效
调试 favicon 失效：先看 Network，再清 hard reload
换完图标看不到？别急着改代码。90% 的问题出在缓存和路径上。打开 Chrome DevTools 的 Network 标签页，过滤 favicon，观察几个关键点：
- 是否返回 404？检查文件名拼写、大小写（Linux 服务器区分
Favicon.ico和favicon.ico） - 是否返回 200 但内容是 HTML（比如 404 页面）？说明服务器把图标请求重定向到了首页
- 是否返回 200 但 Content-Type 错了？比如 .png 文件被服务器当成
text/plain发送，浏览器直接拒收 - 确认后，用
Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）硬刷新，普通 F5 不行
真正麻烦的是 iOS Safari —— 它甚至会缓存旧图标长达一周，且不响应硬刷新。唯一稳妥办法：改文件名（如从 favicon.png 改为 favicon-v2.png）并同步更新所有 href。
