Chrome 不显示网站 favicon？快速修复方法

你打开 Chrome，加载自己的网站，结果标签页上显示的是一个默认的地球图标或者空白方块，而不是你的图标。你检查了 HTML，文件确实存在，但 Chrome 就是不肯显示。这是我们开发者最常遇到的 favicon 问题之一。好消息是：大多数情况下，修复用不了两分钟。

快速修复：强制刷新并检查 Network 面板

在动任何代码之前，先排除最简单的原因：Chrome 正在使用你旧 favicon 的缓存版本（或者缓存的 404）。Chrome 对 favicon 的缓存非常激进，有时会持续好几天。

1. 在 Chrome 中打开你的网站。
2. 打开开发者工具（F12 或 Cmd+Option+I）。
3. 转到 Network 面板，勾选 Disable cache。
4. 用强制刷新重新加载页面（Ctrl+Shift+R 或 Cmd+Shift+R）。
5. 在 Network 过滤框中输入 favicon。

如果你看到 favicon.ico 的请求返回 404，Chrome 会继续显示默认地球图标。如果看到 200 但图标仍然不更新，那就是缓存图像的问题。强制刷新通常能解决。如果不行，打开 chrome://settings/clearBrowserData，选择 Cached images and files，然后清除。这样会清掉 Chrome 的 favicon 缓存，而不会影响你的密码或历史记录。

根本原因 1：Chrome 请求 favicon.ico，但你的网站没有

即使你从未写过 <link rel='icon'> 标签，Chrome 仍然会从你的域名根目录请求 /favicon.ico。这是一个可以追溯到 Internet Explorer 时代的遗留行为，并且仍然存在于 HTML 规范中。如果该文件不存在，就会返回 404，然后显示默认地球图标。

修复很简单：要么在域名根目录放一个真实的 favicon.ico，要么在 <head> 中添加显式的 link 标签：

<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>

HTML 规范将 rel='icon' 定义为将图标与页面关联的标准方式。Chrome 会使用它找到的第一个有效图标，但同时提供 SVG 和 ICO 回退是最安全的做法。

根本原因 2：link 标签位置错误或存在语法错误

Chrome 只读取 <head> 内的 favicon link 标签。如果你的标签跑到了 <body> 里（常见于模板片段或 CMS 注入），Chrome 会静默忽略它。没有控制台错误，没有警告——只是图标不见了。

检查以下常见错误：

• <link> 标签缺少闭合引号或括号。
• 使用了 rel='shortcut icon' 但没有同时包含 rel='icon'。
• 相对路径解析到了错误的目录（例如，在 /blog/post/ 页面中使用 href='favicon.ico'）。
• 由于模板 bug，标签被放在了 </head> 之后。

如果你不确定标签是否有效，在 Chrome 中查看页面源代码（Ctrl+U），搜索 rel=。该标签应该出现在 head 块内，在任何 body 内容之前。

根本原因 3：文件以错误的 MIME 类型提供或已损坏

Chrome 对图像文件要求严格。如果你的服务器将 .ico 文件返回为 text/plain 或 application/octet-stream，Chrome 可能拒绝渲染它。你可以在开发者工具中验证：在 Network 面板点击 favicon 请求，检查 Response Headers。

正确的 MIME 类型是：

• image/x-icon 用于 ICO 文件
• image/png 用于 PNG
• image/svg+xml 用于 SVG

在 Apache 上，将 AddType image/x-icon .ico 添加到你的 .htaccess。在 Nginx 上，在 server 块中使用 types { image/x-icon ico; }。如果你使用的是托管主机或 CDN，请查阅他们的文档——有些会默认剥离或覆盖 MIME 类型。

根本原因 4：SVG favicon 标记无效

SVG favicon 越来越常见，因为它们可以干净地缩放并支持深色模式。但 Chrome 的 SVG 解析器非常严格。缺少命名空间、未闭合的标签或多余的 HTML 实体都会导致整个文件被拒绝——然后 Chrome 回退到默认地球图标。

通过在浏览器标签页中直接打开 SVG 来验证它。如果它渲染为图像，则标记没问题。如果你看到原始 XML 或错误，请先修复 SVG，再考虑 favicon 标签。同时确认 SVG 的根元素上有 xmlns='http://www.w3.org/2000/svg'。

预防：构建 Chrome 无法忽略的 favicon 组合

最可靠的设置结合多种格式，这样 Chrome 总能有一个有效的回退。一个最小化的现代组合如下：

• 域名根目录下的 favicon.ico（16x16 和 32x32 合并）。
• 通过 type='image/svg+xml' 链接的 favicon.svg。
• 用于 iOS 的 180x180 的 apple-touch-icon.png。
• 用于 Android 和 PWA 安装的 site.webmanifest。

你可以使用 Mzu favicondl 从单个源图像生成所有这些文件。部署后，在 Network 面板中验证每个文件都以 200 状态加载。

关于 Chrome 特定缓存和 localhost 怪癖的更深入讲解，请参阅我们的指南 favicon not showing in Chrome。如果你不确定你的 favicon 是否被正确提供，请运行我们的 favicon 审计指南中的检查。

如果什么都不起作用怎么办

如果你已经清除了缓存、修复了 link 标签、确认了 MIME 类型，但 Chrome 仍然显示空白标签页，请尝试以下最后步骤：

1. 在 Chrome 无痕窗口中测试（扩展和配置文件缓存被绕过）。
2. 在另一个浏览器（Firefox 或 Edge）中测试，以确认文件被正确提供。
3. 检查是否有 service worker 拦截了 favicon 请求并返回过时响应。
4. 查找是否有 Content Security Policy 头阻止了你的图标域的 img-src。

如果图标在无痕窗口中出现但在正常配置文件中不出现，问题 100% 是本地缓存——而不是你的服务器。如果到处都失败，问题出在你的 HTML、文件路径或服务器配置上。

Chrome 不显示网站 favicon 几乎总是以下四种情况之一：缺少根目录 favicon.ico、link 标签位置错误或格式错误、MIME 类型错误，或者缓存的 404。按这个顺序逐一排查，你的图标就能在咖啡变凉之前回到标签页上。