favicon 不更新,通常是卡在浏览器里:浏览器把 favicon 存在自己的缓存中,普通刷新不会清除它。最快的办法是给图标换一个新网址,可以是新文件名,也可以是版本参数,比如 /favicon.svg?v=2,并同步修改 <link> 标签。在此之前,先确认服务器和 CDN 确实返回了新文件。
先确认:服务器返回的是新图标吗?
在无痕窗口中直接打开图标网址,例如 https://example.com/favicon.ico。如果在那里看到的仍是旧图标,问题就在服务器一侧:CDN 或代理还保存着旧文件,部署没有替换它,或者 HTML 指向了别处。Favicon Checker 会重新抓取每个已声明的图标,并显示你的服务器发送的缓存头。
更换网址
新网址一步就能绕过浏览器缓存、CDN 和 Google:
<link rel="icon" href="/favicon.ico?v=2" sizes="32x32">
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2">
manifest 中的图标也要这样处理。/favicon.ico 本身不能改名,因为浏览器请求的就是这个路径;清除 CDN 缓存即可。
在浏览器中清除
- Chrome 和 Edge:在标签页中打开图标网址,按 Ctrl+Shift+R(Mac 上按 Cmd+Shift+R),然后重新加载你的页面。图标和历史记录存放在一起,所以旧图标还在的话,请删除该网站的历史记录,或重启浏览器。
- Firefox:直接打开网址再强制刷新的办法在这里同样有效。Firefox 也把图标和历史记录存在一起:打开资料库,右键点击该网站,选择 Forget About This Site。
- Safari:完全退出 Safari 再重新打开。在 Mac 上,开发 → 清空缓存也有帮助(在设置 → 高级中打开开发菜单)。
设置合理的缓存头
图标很少改动,所以只要图标变化时你会换网址,长时间缓存就没问题。文件名或参数里带版本号的文件,可以缓存一年:
Cache-Control: public, max-age=31536000, immutable
对于路径固定的图标,比如 /favicon.ico,缓存一天到一周即可,避免改版后访客等上几个月才看到新图标:
Cache-Control: public, max-age=604800
主屏幕和已安装的应用
用户把你的网站添加到主屏幕时,iOS 会复制当时的 Apple touch icon,之后不再刷新。访客必须删除这个快捷方式再重新添加。已安装的 Web 应用不一样:Chrome 会不时检查已安装应用的 manifest,并采用更改后的图标。在安卓上,切换前可能会询问用户。
Google 搜索
Google 重新抓取你的首页时会更新 favicon,这可能需要几天或几周。可以在 Search Console 中请求为首页编入索引来推一把。如果图标仍然没有变化,请对照 Google 的 favicon 要求检查。