清除 Safari iPhone 和 Mac 的图标缓存

你刚上线了新的 favicon,在 Mac 上清完 Safari 缓存,标签页里终于出现了新图标。结果打开 iPhone 打开同一个网站——旧的那个灰色占位图还稳稳待在那里。要解决,你必须分别在 Safari iPhone 和 Mac 上清除 favicon 缓存,因为这两台设备各自维护着自己的图标数据库,根本不会通过 iCloud 同步。

为什么 Safari 在 iPhone 和 Mac 上的 favicon 缓存机制不一样

Safari 把 favicon 数据存在两层:一层是临时的浏览器缓存,另一层是持久化的 WebpageIcons 数据库,后者负责标签页、书签和"添加到主屏幕"流程的图标。在 macOS 上,这个数据库位于 ~/Library/Safari/WebpageIcons.db;在 iOS 上,它藏在 Safari 的沙盒里,你没法直接进去翻文件。

这两层缓存之间互不通信。在 Mac 上更新 favicon,对 iPhone 毫无影响——反过来也一样。所以同一个网站,在不同设备上同时显示两个不同的图标,一点都不奇怪。

前置条件

已经部署好的 favicon 文件,放在网站根目录,或者通过 HTML 的 <link rel='icon'> 标签引用
macOS 上的 Safari 14 或更高版本,iPhone 上的 iOS 14 或更高版本
每台设备大约 2 分钟

Mac 上如何清除 favicon 缓存

第一步:确认新 favicon 已经实际生效

打开 Safari,加载你的网站,然后查看源代码(Cmd + Option + U)。确认 <link rel='icon'> 标签指向的是新文件。如果旧路径还被硬编码在 HTML 里,清缓存也救不了你——正确的标签写法可以参考我们的 HTML favicon 配置指南。

第二步:清空 Safari 的临时缓存

进入 Safari → 设置 → 高级,勾选 在菜单栏中显示"开发"菜单。然后点击 开发 → 清空缓存。这一步会清掉 Safari 用于渲染标签页的临时缓存,但不会动 WebpageIcons 数据库。

第三步:直接删除 WebpageIcons 数据库

完全退出 Safari(Cmd + Q)。打开终端,执行:

rm -f ~/Library/Safari/WebpageIcons.db
rm -f ~/Library/Safari/WebpageIcons.db-shm
rm -f ~/Library/Safari/WebpageIcons.db-wal

这几个文件保存着 Safari 在所有标签页和书签里展示过的每一个图标。删掉之后,Safari 在下次启动时会从零重建图标数据库。

第四步:重启 Safari 并重新加载

重新打开 Safari,加载你的网站。新 favicon 应该在几秒内就出现在标签页和书签栏里。如果没出现,说明你的 HTML 还在指向旧路径。

iPhone 上如何清除 favicon 缓存

iOS 上的处理方式不一样。你没法直接访问 Safari 的文件系统,所以只能靠从「设置」里清除站点数据,逼 Safari 重新拉取。

第一步:清除 Safari 的网站数据

打开设置 app,滚到 Safari,点击 高级 → 网站数据。点击 删除全部网站数据。这一下会清掉所有站点的 cookie、缓存以及 Safari 的触控图标存储。

注意:这会让你在所有网站上退出登录。如果你只想测试 favicon 改动、不想丢失登录状态,用无痕浏览模式。

第二步:强制退出 Safari

从屏幕底部上滑(老款 iPhone 双击 Home 键)呼出应用切换器。把 Safari 卡片上滑强制退出,然后重新打开并加载你的网站。

第三步:用硬刷新绕过缓存

长按 Safari 地址栏里的刷新按钮,在弹出菜单里点 请求桌面版网站。打开一次再关掉,这样会强制重新请求一次,包括 favicon 文件。另一个替代方案是加个查询字符串打破缓存:

https://yoursite.com/?v=2

第四步:刷新主屏幕图标缓存

如果你之前把网站加到了 iPhone 主屏幕,那个图标来自 apple-touch-icon 文件——而不是普通的 favicon。要重置,先把主屏幕上的快捷方式删掉,再重新添加。Safari 会重新读取 HTML 里的 <link rel='apple-touch-icon'> 标签,下载一份新副本。

常见坑

iCloud 不同步缓存:在 Mac 上清缓存不会影响 iPhone 或 iPad。
Service Worker:如果你的站点用了 Service Worker,它可能从 Cache API 返回一份过期的 favicon。把 Service Worker 版本号往上提一档,强制刷新。
CDN 边缘缓存:你的 favicon 文件可能在 CDN 边缘节点被缓存。在 HTML 标签里给图标路径加个版本查询字符串,比如 ?v=2。
无痕浏览:Safari 的无痕模式根本不持久化 favicon 缓存——在无痕模式下测试,无法反映正常模式下的真实行为。

如何避免以后再遇到 favicon 缓存问题

新图标在两台设备上都显示正常之后,用内容哈希命名的方式,从根源上防止再出岔子:

&lt;link rel='icon' href='/favicon.a1b2c3d4.svg' type='image/svg+xml'&gt;

每次部署都拿到一个全新的 URL,浏览器永远没法再返回旧的缓存副本。更深入的缓存破坏(cache-busting)方案,可以看我们的 favicon 缓存破坏指南。

想完整了解 rel='icon' 属性以及浏览器接受的所有 MIME 类型,请查阅 WHATWG HTML Living Standard。