你已经给网站添加了 Favicon，但浏览器标签页里就是不显示。很烦对吧？让我们看看最常见的 7 个原因及其解决方法，按可能性从高到低排列。
1. 浏览器缓存（最常见）
Favicon 的缓存比几乎所有其他资源都更激进。即使你更新了文件，浏览器可能还会显示旧的（或不显示）长达数小时甚至数天。
解决方法：
- 强制刷新：
Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac） - 在无痕/隐私模式中打开
- 清除浏览器缓存：
设置 → 隐私 → 清除浏览数据 → 缓存的图片和文件 - 添加缓存破坏查询字符串：
href="/favicon.ico?v=2"
2. 文件路径错误
最常见的代码错误。浏览器找不到你的 Favicon 文件因为路径不正确。
解决方法：
- 使用以
/开头的绝对路径：href="/favicon.ico" - 直接在浏览器打开
https://你的网站.com/favicon.ico— 能看到图标吗？ - 检查文件名拼写（如
favicon.icovsFavicon.ico— 在 Linux 服务器上大小写敏感）
3. HTML 标签缺失或错误
<link> 标签可能缺失、格式错误、或放在了 <head> 外面。
解决方法：确保以下代码在 <head> 标签内：
<link rel="icon" type="image/x-icon" href="/favicon.ico">常见错误：
- 使用
rel="shortcut icon"— 虽然仍然支持，但rel="icon"才是标准 - 缺少
type属性 — 添加type="image/x-icon"或type="image/png" - 把 link 标签放在了
<body>而不是<head>中
4. 文件损坏或格式无效
文件在你的电脑上看起来没问题，但可能已损坏或格式错误。
解决方法：
- 确认文件是有效的 ICO/PNG — 用图片查看器打开它
- 不要只是把 JPEG 重命名为
.ico— 那并不会转换格式 - 使用正规工具重新生成，如 Mzu favicondl 的图片转 Favicon
5. 服务器未正确提供 MIME 类型
有些服务器不识别 .ico 文件，会用错误的 Content-Type 头来提供。
解决方法：在 DevTools（网络标签）中检查响应头。MIME 类型应该是：
.ico→image/x-icon或image/vnd.microsoft.icon.png→image/png.svg→image/svg+xml
6. HTTPS / 混合内容问题
如果你的网站使用 HTTPS 但 Favicon URL 使用 HTTP，浏览器会静默阻止。
解决方法：
- 使用协议无关路径：
href="/favicon.ico"（不要加http://或https://） - 或明确使用 HTTPS：
href="https://你的网站.com/favicon.ico"
7. Google 搜索结果中不显示 Favicon
你的 Favicon 在浏览器标签页中显示但不在 Google 搜索结果中。这是一个单独的问题。
Google 的 Favicon 要求：
- Favicon URL 必须可抓取（不被
robots.txt阻止） - 尺寸必须是 48px 的倍数（如 48×48、96×96、144×144）
- 必须是正方形图片
- Google 不会显示它认为不合适或低质量的 Favicon
- Google 获取新 Favicon 可能需要几天到几周
解决方法：使用 Google Search Console 的 URL 检查工具请求重新抓取你的首页。
快速排查清单
- 打开
https://你的网站.com/favicon.ico— 能加载吗？ - 打开 DevTools → 网络标签 → 刷新 → 筛选 "favicon" — 有 404 错误吗？
- 检查 HTML 源码 —
<link>标签正确且在<head>内吗？ - 试试无痕模式 — 那里能显示吗？
- 换个浏览器 — 是浏览器特定问题吗？