网站图标不显示或不更新

作者

网站图标缺失时,问题不一定出在文件本身。浏览器、CDN、Service Worker 和搜索引擎可能分别保留不同版本。按顺序排查,能避免同时更改多个因素。

放大镜检查网站图标加载的不同层级
应分别检查 URL、HTML、各层缓存和抓取情况。

从文件请求开始检查

打开 link 元素引用的准确 URL。它应无需身份验证即可响应,返回正确内容,且没有多余的重定向链。即使命名为 favicon.ico,HTML 错误页也无法被解码为图标。

在网络面板中按 icon 或 favicon 筛选。记录最终 URL、状态码、内容类型,以及响应是否来自缓存。

网站图标诊断顺序
检查项预期结果修复方法
直接访问 URL返回 200 图片响应修正路径或部署
link 元素存在于 head 中修正渲染后的 HTML
缓存已收到新响应清除缓存后重新测试
抓取权限文件可访问移除阻止规则

检查实际渲染的 HTML

检查最终生成的文档,而不仅是源模板。扩展、主题或组件可能在你的声明后又注入第二个图标元素,使浏览器选择其他文件。

从深层嵌套页面检查路径,并核对文件名的准确大小写。在区分大小写的服务器上,Favicon.svg 和 favicon.svg 是不同的资源。

逐层排查缓存

先使用全新的浏览器配置文件,或禁用网络缓存后测试。如果源站已有新图片,而公开域名仍返回旧图,请清除 CDN 缓存。如果安装了 PWA,也要检查其 Service Worker 和清单。

以后更新时,可以使用带版本的文件名明确区分新旧版本。同时保留 /favicon.ico,供按惯例请求它的客户端使用。

一手资料

常见问题

为什么旧图标又出现了?

某一层缓存、Service Worker 或第二个图标元素可能仍在提供旧文件。清除缓存前,先确认实际加载的 URL。

只添加版本查询参数就够了吗?

它能绕过部分缓存,但新文件名通常更明确。请保留 /favicon.ico 后备文件。

Google 的网站图标会立即变化吗?

不会。Google 必须重新抓取和处理页面与图标,没有保证的准确更新时间。

动手实践

生成器可在几秒内免费生成完整图标组合,无需上传图片。

诊断我的公开网站图标

接下来可以阅读与尝试

探索 LFFavicon 的其他工具,以及解答常见问题的指南。

工具

指南