favicon需在<head>中用<link>声明，路径须正确且可直接访问，推荐根路径；应同时提供.ico和多尺寸.png格式，并加版本参数防缓存；真机实测各环境显示效果。
直接在 <head> 里加 <link rel="icon"> 就能生效，但实际部署中常见图标不显示、缓存导致旧图标残留、多尺寸适配失败等问题。
favicon 必须放在 <head> 中且路径正确
浏览器只在 <head> 内解析 <link rel="icon">，放在 <body> 或 HTML 外部无效。路径必须可被浏览器直接请求到（即能通过 URL 访问），相对路径以 HTML 当前位置为基准，推荐用根路径避免嵌套页面出错。
- ✅ 正确写法（推荐）：
<link rel="icon" href="/favicon.ico" type="image/x-icon">
- ❌ 常见错误：路径写成
./images/favicon.ico却把 HTML 放在子目录下，导致 404 - ⚠️ 注意：
type属性不是必需的，但显式声明image/x-icon可避免某些旧浏览器误判 MIME 类型
支持现代浏览器需同时提供 .ico 和 .png 格式
.ico 是传统格式，兼容 IE 和老版本浏览器；.png 支持透明度和高 DPI（如 Retina 屏），但 Safari 15.4+ 才原生支持 rel="icon" 加载 PNG。单靠 PNG 在部分安卓 WebView 或微信内置浏览器中会失效。
- ✅ 推荐组合：
<link rel="icon" type="image/x-icon" href="/favicon.ico"><br><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><br><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
- ⚠️
sizes属性对.ico无效，仅对 PNG/SVG 有意义；未加sizes的 PNG 可能被忽略 - ? 实测发现：Chrome 会优先使用最后一个有效的
<link>，所以把.ico放最前更稳妥
图标不更新？清缓存比改代码更关键
浏览器对 favicon 缓存极强，即使你替换了文件、刷新页面甚至硬刷新（Ctrl+F5），旧图标仍可能持续数小时。这不是代码问题，而是 HTTP 缓存或浏览器内部缓存策略所致。
立即学习“前端免费学习笔记（深入）”；
- ✅ 强制刷新方案：
– 在href后加版本参数：/favicon.ico?v=2
– 用开发者工具 Network 面板禁用缓存后重载页面
– 在 Chrome 地址栏输入chrome://settings/clearBrowserData清除“图像和文件”缓存 - ⚠️ 不要依赖修改 HTML 文件时间戳或服务器配置来绕过缓存——用户端缓存不受控
- ? 微信内置浏览器尤其顽固，有时需完全退出微信再进页面才加载新图标
真正麻烦的不是加那几行 <link>，而是验证它是否在所有设备、所有入口（书签、PWA、微信、安卓桌面快捷方式）里都显示正确——每个环境有自己的缓存逻辑和格式偏好，上线前务必真机实测。
