Favicon 深色模式:适配明暗的自适应图标(2026)

深色的 favicon 在浅色浏览器标签页上很好看——而在深色标签页上会消失得无影无踪。解决方法是自适应 favicon:一个图标用于浅色模式,另一个用于深色模式。本指南介绍 SVG 媒体查询技术、theme-color meta 标签,以及针对旧浏览器的 JS 兜底方案。

SVG 媒体查询技术(推荐)

SVG favicon 可以内嵌响应 prefers-color-scheme 的 CSS。浏览器会根据用户的操作系统或浏览器主题自动选择正确的颜色——无需任何 JavaScript。

创建一个像这样的 favicon.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { fill: #1a1a1a; }
      .logo { fill: #ffffff; }
    }
    .bg { fill: #ffffff; }
    .logo { fill: #1a1a1a; }
  </style>
  <rect class="bg" width="32" height="32" rx="6" />
  <path class="logo" d="M8 16 L16 8 L24 16 L16 24 Z" />
</svg>

然后在你的 HTML 中声明它:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

在浅色标签页中,图标渲染为白底深色;在深色标签页中,它翻转为深底浅色。浏览器会即时处理切换。

Safari 注意事项:Safari 26(2025)终于能渲染 SVG favicon,但它会忽略其中的媒体查询——你的深色模式变体不会在那里切换。这被记录为 WebKit 缺陷 #309949。请参阅 Safari 中深色模式 Favicon 不生效?→ 了解诊断和解决办法。此外,一如既往地提供一个 PNG/ICO 兜底——请参阅 SVG vs PNG 指南。

theme-color meta 标签

在适配深色模式的同时,还可以使用两个 theme-color meta 标签来设置浏览器界面颜色:

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a1a">

这会为移动版 Safari 和 Chrome 的浏览器标签页/工具栏背景着色,与你的自适应 favicon 相得益彰。

针对旧浏览器的 JS 兜底

如果你需要支持不支持 SVG 媒体查询的浏览器,可以使用 JavaScript 和 matchMedia 在两个 PNG favicon 之间切换:

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

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

这在任何地方都有效,但需要提供两个单独的 PNG 和一小段脚本。条件允许时优先选择 SVG 方案。

自适应 favicon 的设计技巧

使用轮廓线,而非填充。勾勒出的 logo 比实心形状适应度更好,因为它在任何背景上都可读。
两种模式都测试。在明暗之间切换操作系统,并检查两种浏览器标签页。
避免纯白或纯黑填充——米白(#f5f5f5)和近黑(#1a1a1a)看起来更柔和。
保持 SVG 精简。内嵌 CSS 会增加字节;保持路径简单。

SVG favicon 的浏览器支持

已针对 2025 年 9 月的 Baseline 变更更新——Safari 26 现在可以渲染 SVG favicon,但不支持其中的媒体查询:

浏览器	SVG favicon	SVG 内部的媒体查询
Chrome(桌面和 Android)	✅	✅
Firefox	✅	✅
Edge	✅	✅
Safari 26+(桌面)	✅(2025 年新增)	❌ WebKit 缺陷 #309949
iOS Safari	❌(请使用 apple-touch-icon)	❌

结论是:为现代浏览器提供 SVG,并为其他一切提供 PNG/ICO 兜底——如果 Safari 的深色模式支持对你的受众很重要,再使用下面的 JS 切换。

完整的深色模式 favicon 配置

<!-- Adaptive SVG for modern browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallbacks -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Browser chrome color -->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a1a">