根本原因几乎总是rel值写错或link位置/路径出问题，而非图标文件损坏；必须用rel="icon"而非已失效的rel="shortcut icon"，且link须置于内、href用绝对路径，同时声明type和sizes并确保服务器返回正确content-type。
根本原因几乎总是 rel 值写错或 link 位置/路径出问题，而不是图标文件本身坏了。
rel="shortcut icon" 已被现代浏览器彻底忽略
Chrome 94+、Firefox、Edge 等主流浏览器会直接跳过 rel="shortcut icon" 声明，哪怕路径完全正确、文件真实存在，图标也不会加载——你看到的只是浏览器默认“地球”图标。
必须改用标准且受支持的 rel="icon"，并显式声明 type 和 sizes（尤其对 PNG）：
-
<link rel="icon" href="/favicon.ico" type="image/x-icon">—— 兼容老浏览器，但仅靠这个在高分屏上可能模糊 -
<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">—— Chrome 120+ 会优先选这个 - 多个尺寸要分开写多个
link标签，不能合并成sizes="16x16 32x32"
link 标签没放在 里，或路径基准错了
link 必须出现在 内，写在 中会导致部分 Safari 版本不识别图标，W3C 验证也会失败。
href 路径永远以 HTML 文件所在目录为基准，不是以 CSS 或 JS 文件位置算：
- 如果 HTML 在
/index.html，图标在/assets/favicon.png，就得写href="assets/favicon.png" - 写成
href="./assets/favicon.png"没问题，但href="../assets/favicon.png"很可能错 - 绝对路径更稳：
href="/assets/favicon.png"（注意开头的/）
图标文件能访问，但浏览器没加载成功
打开开发者工具 → Network → 刷页面 → 筛选 img 或 other，找你的图标请求。常见卡点：
- 状态码不是
200（比如404表示路径错，403可能是服务器禁止访问） - 响应头缺失
Content-Type：.ico 文件应返回image/x-icon，PNG 应返回image/png；Apache 需加AddType image/x-icon .ico，Nginx 需配types { image/x-icon ico; } - 跨域场景下字体类图标（如 iconfont）被拦截：检查字体请求是否报
Blocked by CORS policy，此时要么配服务端Access-Control-Allow-Origin，要么把字体文件放到同源下
浏览器缓存太顽固，新图标根本没机会展示
favicon 缓存机制比普通资源更激进，即使你改了文件内容，浏览器也可能继续用旧缓存。
- 先试隐身窗口，排除本地缓存干扰
- 手动清空 favicon 缓存：Chrome 地址栏输入
chrome://settings/clearBrowserData→ 勾选“缓存的图像和文件” → 清除 - 临时加版本参数强制刷新：
href="/favicon.ico?v=2"（上线后建议去掉） - iOS Safari 尤其难刷，有时需长按标签页 → “重新加载”才生效
最容易被忽略的是：你以为改了 link 就完事了，其实浏览器早把旧图标哈希进内部缓存了，连刷新都不管用——必须清缓存或换路径，否则永远看不到新图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
