你在 Safari 中打开网站，瞥了一眼标签页，看到的却是默认的地球图标或一个空白方格，而不是自己的 logo。如果这种情况听起来很熟悉，那就是遇到了 favicon 在 Safari 中不显示的问题——这是一个常见问题，通常有几个可能的原因。好消息是，大多数修复方法不到一分钟就能完成。
快速修复：强制 Safari 重新获取图标
Safari 会非常激进地缓存 favicon。在修改代码之前，先按以下顺序试试：
- 清除 Safari 的 favicon 缓存：清空缓存（Safari > Settings > Privacy > Manage Website Data，然后移除你的网站）。在 iOS 上，进入 Settings > Safari > Clear History and Website Data。
- 强制重新加载页面：在 Mac 上按
Cmd+Option+R，或者关闭标签页后重新打开。 - 直接检查 favicon URL：在新标签页中打开，例如
https://yoursite.com/favicon.ico。如果返回 404，说明文件路径有误。
如果图标仍然没有出现，继续排查下面这些根本原因。
favicon 在 Safari 中不显示的根本原因
1. 缺少或不正确的 <link> 标签
Safari 按照 HTML 规范处理图标链接，但比一些浏览器更严格。确保你的 <link rel='icon'> 标签位于 <head> 中，并指向一个实际存在的文件。WHATWG 规范将 rel='icon' 定义为把图标与页面关联起来的标准方式。
<link rel='icon' type='image/png' href='/favicon-32x32.png' sizes='32x32'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>注意：即使你指定了 PNG，macOS 上的 Safari 也可能额外从根目录请求 /favicon.ico。请在根目录保留一个有效的 favicon.ico 作为备用方案。
2. 不支持的格式或损坏的文件
Safari 支持 ICO、PNG 和 SVG（从 Safari 12 起）。不过，SVG 必须是格式正确的 XML——只要有一个标签没有闭合，Safari 就会忽略它。如果你使用的是 SVG，请用 XML parser 验证。若要获得更广泛的兼容性，建议使用 PNG 或 ICO。
3. 服务器或 CDN 层面的缓存
如果你最近更新了 favicon，Safari 可能仍会从自身缓存或你的 CDN 提供旧版本。给 URL 加上版本查询字符串（例如，favicon.png?v=2），即可让缓存失效。想深入了解，可以查看我们关于清除 Safari favicon 缓存的指南。
4. iOS 主屏幕图标缺失
在 iPhone 和 iPad 上，主屏幕图标来自 apple-touch-icon，而不是普通 favicon。如果缺少它，iOS 会显示网站截图或一个灰色方块。请确保通过 rel='apple-touch-icon' 链接一个 180×180 的 PNG。
预防建议
- 务必在网站根目录中放置
favicon.ico。 - 图标使用绝对路径，以避免路由问题。
- 清除缓存后，在 Safari 中进行测试——不要假设它会自动更新。
- 如需完整配置，请参阅我们的 iOS Safari favicon 指南。
大多数 Safari favicon 问题都归结为缓存、路径错误或文件无效。先尝试快速修复，然后检查 HTML 和文件格式。配置无误后，你的图标就会稳定显示在标签页、书签和收藏夹中。