指南

网站图标未显示 — 故障排除指南

您上传了一个网站图标，但该选项卡仍然显示通用地球仪或旧徽标。本指南按照您应该检查的顺序介绍了最常见的原因 - 缓存、错误路径、丢失文件和冲突的 <link> 标记。

浏览器比几乎任何其他资源更积极地缓存网站图标。硬刷新（Ctrl+Shift+R 或 Cmd+Shift+R）可以修复许多误报。如果失败，请附加一次版本查询字符串：/favicon.ico?v=2。

确认浏览器请求的 URL 处存在该文件。直接在新选项卡中打开/favicon.ico。 404 意味着该文件没有部署在您认为应该部署的位置——这在仅服务于 index.html 的 SPA 构建中很常见。

检查您的 <link rel="icon"> href 路径。绝对路径（/favicon.ico）适用于每个页面；相对路径 (favicon.ico) 在 /blog/post 等嵌套路由上中断。

如果您使用 CDN，请在部署后清除图标路径。当第一次请求期间文件丢失时，某些 CDN 会缓存 /favicon.ico 的 404 响应。

多个 <link rel="icon"> 标签可能会让旧版浏览器感到困惑。首先放置 favicon.ico，然后是具有显式类型和大小属性的 PNG/SVG 变体。

WordPress、Shopify 和静态主机各自注入自己的标签。查看页面源代码并搜索 rel="icon" — 重复或覆盖标签是常见原因。

HTTPS 混合内容警告会阻止安全页面上的 HTTP 图标 URL。通过 HTTPS 提供每个图标。

对于本地开发，某些浏览器拒绝更新网站图标，直到您清除本地主机的站点数据。

工作原理

立即尝试

为什么我的网站图标可以在本地运行，但不能在生产环境中运行？+

生产版本通常输出到子目录或 CDN 前缀。验证部署的路径是否与您的 <link> href 匹配，并且该文件是否包含在构建输出中。

Google 需要多久才会更新我在搜索结果中的网站图标？+

Google 重新抓取后可能需要几天到几周的时间。确保图标至少为 48×48、方形，并且可以通过稳定的 URL 公开访问。

Does adblock or privacy mode hide favicons?+

很少用于第一方图标。可以阻止第三方图标代理；您域上的自托管图标不受影响。

我应该删除浏览器图标缓存吗？+

在浏览器设置中清除您的域的站点数据，或在禁用缓存的私有窗口中进行测试。