Safari 中深色模式 Favicon 不生效?WebKit 缺陷与解决办法

你按照自适应 favicon 指南操作了:你的 favicon.svg 内嵌了 prefers-color-scheme 媒体查询,并且在 Chrome 和 Firefox 中可以在明暗之间完美切换。然后你在 Safari 中打开网站……毫无反应。图标在深色标签页上仍保持浅色主题。以下是原因、如何确认这是该缺陷(而不是你的标记问题),以及如今真正有效的解决办法。

根本原因:WebKit 缺陷 #309949

Safari 26 于 2025 年底发布,终于添加了 SVG favicon 支持——在那之前 Safari 是最后一个坚持者。但该实现会忽略嵌入在 SVG 内部的 CSS 媒体查询。你的 prefers-color-scheme: dark 代码块会被解析但从不应用,因此 Safari 始终渲染图标的默认(浅色)变体。

这被记录为 WebKit Bug #309949 (同样影响 WebKitGTK)。自 2026 年初以来一直处于打开状态,尚未发布修复。Chrome 和 Firefox 不受影响——它们能正确评估 SVG favicon 内部的媒体查询。

确认是缺陷,而不是你的 SVG 问题

在责怪 WebKit 之前,先排除常见原因:

1. 在 Chrome 或 Firefox 中测试同一文件。如果图标在那里能切换,说明你的 SVG 是正确的——是 Safari 的缺陷。
2. 检查媒体查询是否位于 SVG 文件本身内部。Safari(以及所有浏览器)只遵循嵌入在 favicon.svg 文件中的 CSS——页面中的样式表无法作用于 favicon。
3. 验证 link 标签: <link rel="icon" type="image/svg+xml" href="/favicon.svg">——并确保 SVG 带有 viewBox 以便正确缩放。
4. 清除 favicon 缓存。Safari 缓存 favicon 非常激进;过期的图标可能伪装成缺陷。在私人窗口中测试。

如果图标在任何地方都不切换,请先修复 SVG——我们的 深色模式 favicon 指南涵盖了正确的标记写法。

解决办法 1:设计主题中立的图标(推荐)

最稳妥的修复是完全不依赖媒体查询。将默认 SVG 设计成在明暗两种标签页背景上都能看清:

• 将 logo 放在圆角方形背景上,使用在两种标签页色调下都有效的品牌色(中间色调胜过纯白或纯黑)。
• 优先使用轮廓线而非细实心填充——它们在两种背景上都能存活。
• 避免纯白形状(在浅色标签页上不可见)和纯黑(在深色标签页上不可见)。仅在对比明显的背景底板上使用 #f5f5f5 这样的米白或 #1a1a1a 这样的近黑。

Chrome 和 Firefox 用户仍能通过媒体查询获得自适应版本;Safari 用户则得到一个永远不会消失的中性图标。每个人都能看到可接受的效果。

解决办法 2:使用 matchMedia 进行 JavaScript 切换

如果 Safari 的还原度真的很重要,可以在运行时在两个 PNG favicon 之间切换。这完全绕过了 SVG 渲染,并且在所有浏览器中都有效:

function setFavicon() {
  const dark = window.matchMedia('(prefers-color-scheme: dark)').matches
  const icon = document.querySelector("link[rel='icon'][type='image/png']")
  if (icon) {
    icon.href = dark ? '/favicon-dark.png' : '/favicon-light.png'
  }
}

setFavicon()
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', setFavicon)

在 SVG 旁边声明一个 PNG 图标链接,并将 SVG 放在前面,这样原生处理 SVG 的现代浏览器就不会重复请求。代价是两个额外的 PNG 和几行脚本。

不要这样做

• 不要去掉 PNG/ICO 兜底。iOS Safari 完全不使用 SVG favicon(它需要 apple-touch-icon.png),较旧的 Android WebView 也会忽略 SVG。
• 不要在 link 标签上使用 media 属性来提供两个 SVG。<link rel="icon" media="(prefers-color-scheme: dark)"> 在各浏览器中表现不可靠——内嵌 CSS 的方式才是标准做法。
• 不要把它当作自己的 bug 提交。它是已知的公开问题——关注 #309949 并在 Safari Technology Preview 发布修复后重新测试。

当前状态

使用我们的 SVG favicon 生成器几秒钟内构建一个经过清理的 favicon.svg,然后用 favicon 检查器验证整个配置。