Favicon 不显示或不更新？9 个原因与解决办法
让 favicon 出问题的九个原因，以及每个原因的确切解决办法。十有八九是缓存，所以从那里开始，顺着表格往下排查。
<link rel="icon" href="/favicon.ico?v=2" sizes="any">改变 URL 才能让浏览器去取新文件。原地编辑 ICO 是不够的。
原因与解决办法
| 原因 | 为什么会出问题 | 解决办法 |
|---|---|---|
| 1. 浏览器或 CDN 缓存 | 浏览器对 favicon 的缓存几乎比任何其他资源都更顽固，前面再加一层 CDN 就又多了一层。 | 强制刷新（Cmd+Shift+R / Ctrl+F5），并追加一个版本查询字符串，让 URL 本身发生变化。 |
| 2. 文件路径错误 | 相对路径是相对于当前页面解析的，而不是根目录。 | 使用带前导斜杠的路径 /favicon.ico，并在新标签页中确认文件确实能在该 URL 加载。 |
| 3. link 标签缺失或格式错误 | 没有图标 link、rel="icon" 拼写错误，或标签放在了 <head> 之外，都会让浏览器找不到文件。 | 在你的共享布局中校验一下标记。 |
| 4. 格式或尺寸错误 | 太小的 favicon、错误的 MIME 类型或损坏的 .ico 都可能悄无声息地渲染失败。 | 以受支持的尺寸和格式重新导出，并用正确的 content type 提供它。对比 ICO 与 PNG，并核对所需的 favicon 尺寸。 |
| 5. Apple touch icon 不更新 | iOS 会忽略 favicon.ico，转而使用 apple-touch-icon。如果它缺失或过期，主屏幕就会显示错误的东西。 | 修好 apple-touch-icon 的 link，然后把页面从主屏幕移除再重新添加。 |
| 6. Manifest 图标问题 | 在 Android 和已安装的 PWA 上，图标来自 manifest.json。那里路径错误或尺寸不对，会让主屏幕和启动画面的图标出问题。 | 更正 manifest.json 中的图标路径和尺寸，然后重新安装应用。 |
| 7. 构建输出去掉了你的标签 | 有些框架会重写文档 head，导致手写的 link 标签熬不过构建。 | 按你所用技术栈的指南来做：Next.js、React、WordPress 或 Shopify。 |
| 8. 主题或 CMS 注入了自己的图标 | 主题可以设置自己的站点图标，从而覆盖你在标记中添加的那个。 | 通过平台自身的站点图标设置来设定图标，而不是在模板里设定。 |
| 9. 构建缓存提供了过期文件 | 即使你重新部署了，构建或平台的缓存仍不断发出旧图标。 | 清除构建/平台缓存，重新部署，然后再检查一次。 |
接下来去哪里找
怀疑是格式或尺寸？在词汇表里对比 ICO 与 PNG，并核对所需的 favicon 尺寸。iOS 有问题？阅读 apple-touch-icon 词条。Manifest 有问题？阅读什么是 manifest.json。
第 7 到第 9 个原因是与平台相关的：有些框架和 CMS 会以纯 HTML 不会有的方式覆盖或缓存 favicon。构建输出可能去掉你的标签，主题可能注入自己的图标，构建缓存也可能提供过期文件。Next.js、React、WordPress 和 Shopify 指南各自都讲了自己那一版的情况。
如何清除已缓存的 favicon
- 1
追加一个版本查询字符串
把 link 的 href 改成 /favicon.ico?v=2，让浏览器去取一个新文件。
- 2
强制刷新页面
用 Cmd+Shift+R（macOS）或 Ctrl+F5（Windows）绕过缓存。
- 3
清除所有 CDN 缓存
如果你的站点前面有 CDN，就让 favicon 路径失效，好让边缘节点提供新文件。
清了缓存还是老样子？
| 你看到的现象 | 通常意味着什么 | 下一步 |
|---|---|---|
| 404：找不到 favicon | 浏览器请求了 /favicon.ico，而服务器上那里什么都没有。常见于框架构建之后——构建从没把文件复制到输出目录。 | 直接打开 /favicon.ico。如果返回 404，说明文件没有被部署。这是构建或路径问题，不是缓存问题，所以处理缓存永远帮不上忙。 |
| 直接访问 URL 仍加载旧图标 | 打开 /favicon.ico 显示的是旧图片，说明文件本身就是过期的。再怎么强制刷新也动不了它。 | 某个构建步骤或 CDN 正在发出旧文件。清除平台/CDN 缓存，重新部署，然后先重新打开直接 URL，再去看标签页。 |
| URL 上是对的文件，标签页里却是错的图标 | 直接 URL 是对的，但标签页仍然不对。有第二条 link 标签（来自主题、插件或框架默认）压过了你的那条。 | 查看源代码，数一数 rel="icon" 标签。浏览器会采用它能理解的最后一条，所以要删掉那条失败的，而不是再加第三条。 |
| 在一个浏览器里正常，在另一个里却没有 | 每个浏览器、每个 Chrome 配置文件都各自保存着自己的 favicon 存储，有些会把过期条目留上好几天。 | 在断定站点有问题之前，先在一个全新的隐私窗口或干净的配置文件里确认一下。 |
从上到下把那张表走一遍。每一行都排除掉一层，这样你就不再去猜缓存，而是开始读服务器到底返回了什么。
出问题的情况在意的那些尺寸
用一次扫描确认修好了
猜测很慢。运行一次自动扫描，它会抓取你的线上站点，列出找到的每一个 favicon 标签，并标出缺失或损坏的那些，这样你就知道修复是否真的生效了。
还想在各种浏览器和设备上手动测试？请看如何测试并检查你的 favicon。
常见问题
为什么我的 favicon 不显示？
最常见的原因是浏览器的顽固缓存、错误或相对的文件路径，以及 <head> 中缺失或格式错误的 <link> 标签。强制刷新，确认 /favicon.ico 能直接解析，并检查你的标签。
我怎么强制 favicon 更新？
给图标 URL 追加一个版本查询字符串，例如 /favicon.ico?v=2。这会让浏览器把它当作新文件。然后强制刷新或清除站点缓存。
为什么我的 favicon 在桌面端显示，在 iPhone 上却不显示？
iOS 用的是 apple-touch-icon，而不是 favicon.ico。如果那个 180×180 的 PNG link 缺失，iOS 就会退而使用一张截图。添加一个 apple-touch-icon link，并把页面重新添加到主屏幕。
favicon 在 Google 搜索里更新需要多长时间？
Google 会在重新抓取你的站点时更新 favicon，这可能需要几天到几周。确保图标至少为 48×48，用有效的 rel=icon 标签引用，并且 Googlebot 能够访问到。
为什么会显示找不到 favicon，或返回 404？
浏览器按路径请求了图标，而服务器上那里什么都没有。在新标签页里直接打开 /favicon.ico：如果返回 404，说明文件从未被部署到该 URL，通常是框架构建没把它复制到输出目录，或者 link 标签里的路径写错了。要修的是文件落地的位置，而不是缓存。
我的 favicon 不见了：文件到底应该放在哪里？
对于经典的标签页图标，需要在站点根目录放一个真实文件，好让 /favicon.ico 能解析。框架会改变它到达那里的方式：Next.js 读取 app/favicon.ico，Vite 和大多数 SPA 会把 public/ 复制到根目录，而 WordPress 或 Shopify 则通过站点图标设置而非文件来提供它。如果标签指向了构建从未写入文件的位置，那么即使你的源码看起来没错，图标也会“不见”。
我试过清缓存了，还是老样子。现在怎么办？
别再清缓存了，去读服务器返回了什么。直接打开 /favicon.ico：404 意味着构建或路径问题，旧图片意味着过期的构建或 CDN 文件，而文件正确但标签页里图标不对，则意味着有第二条 link 标签占了上风。每种结果都指向不同的解决办法。参见上面的逐级排查表。