SVG Favicon：为什么更好以及如何实际使用

关于 favicon 有个事实：我们从 1999 年起就一直在使用像素化的 ICO 文件。二十五年的模糊小图标。但 SVG favicon？说实话它们真的很棒——而大多数开发者仍然没有使用它们。

让我来告诉你为什么你可能想要切换到 SVG，更重要的是，如何在不影响旧版浏览器用户的情况下做到这一点。

为什么 SVG Favicon 确实值得使用

无限缩放且不模糊

还记得为 favicon 创建五种不同尺寸的 PNG 吗？16x16、32x32、48x48... 很快就会让人厌烦。使用 SVG，你只需创建一个文件。就是这样。无论是在浏览器标签页中显示 16 像素，还是在 PWA 启动画面中显示 512 像素，它都保持清晰锐利。

典型的 SVG favicon 大小在 300-800 字节。相比之下，PNG favicon 包通常是 2-5 KB。这是 85-95% 的体积减少。从绝对值来看不算大，但当你在做优化时，每一个字节都很重要。

深色模式自动适配

这是杀手级功能。使用 SVG favicon，你可以直接在文件中嵌入 CSS 媒体查询。当用户切换到深色模式时，你的 favicon 会自动适应。

实际效果是这样的：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M16 4L4 28h24L16 4z"/>
</svg>

这是一个简单的三角形，在浅色背景上显示深色，在深色背景上显示浅色。不需要 JavaScript。不需要服务端检测。它就是能用。

CSS 样式和动画

由于 SVG 本质上是带样式的 XML，你可以做一些光栅格式无法实现的事情：

悬停时改变颜色（在支持的环境中）
添加微妙的动画
使用 CSS 变量进行主题设置
用 JavaScript 修改样式

我不建议在 favicon 中使用过多动画——那样有点烦人。但有这个选项还是挺好的。

浏览器支持情况

让我们坦诚地说：SVG favicon 的支持并不完美。以下是 2025 年的实际情况：

完全支持：

Chrome 80+（桌面和 Android）
Firefox 41+
Edge 80+
Opera 44+
Samsung Internet 13+

不支持：

Safari（桌面和 iOS 都不支持）
Internet Explorer
Android Browser

Safari 是个大问题。Apple 的浏览器仍然不支持 SVG favicon，这意味着大约 20% 的用户不会看到你的 SVG 图标。你需要一个回退方案。

正确实现 SVG Favicon

带回退的基本设置

以下是覆盖所有用户的标记：

<head>
  <!-- ICO 回退用于非常老的浏览器 -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- SVG 用于现代浏览器 -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- PNG 回退用于 Safari -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon（Safari 不会使用你的 SVG） -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

顺序很重要。浏览器按顺序解析这些标签，并使用它们支持的最后一个。现代浏览器会选择 SVG，Safari 会使用 PNG，而古老的浏览器则回退到 ICO。

专业提示：防止 Chrome 使用 ICO

Chrome 有时即使有 SVG 可用也会下载 ICO。给你的 ICO 链接添加 sizes="32x32"——这告诉 Chrome 这个 ICO 只适用于那个特定尺寸，所以它会优先选择可缩放的 SVG。

创建深色模式自适应 SVG

这是一个更完整的示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #ffffff; }
    .icon-fg { fill: #000000; }

    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #1a1a1a; }
      .icon-fg { fill: #f0f0f0; }
    }
  </style>

  <circle class="icon-bg" cx="16" cy="16" r="15"/>
  <text class="icon-fg" x="16" y="21"
        text-anchor="middle"
        font-family="system-ui"
        font-weight="bold"
        font-size="18">F</text>
</svg>

这会创建一个带字母的圆形图标，根据系统偏好自动反转颜色。

文件大小的真实情况

有人声称 SVG 总是更小。这不完全正确。实际情况是：

简单的几何图标：SVG 胜出，通常优势很大
复杂的插图：PNG 实际上可能更小
照片或详细图形：不要用这些作为 favicon

对于典型的 logo 风格 favicon（形状、字母、简单图形），SVG 几乎总是文件大小方面的更好选择。

优化技巧

在部署 SVG favicon 之前，通过 SVGOMG 或类似的优化器处理它。像 Illustrator 和 Figma 这样的导出工具会添加很多冗余——元数据、编辑器注释、坐标中不必要的精度。

良好的优化可以将 SVG 大小减少 50-70%。

另外，保持设计简单。复杂的渐变、滤镜和数百个路径不仅会增加文件大小——它们还可能导致渲染延迟。

关于主题检测需要知道的一件事

SVG 内部的 prefers-color-scheme 媒体查询遵循操作系统的偏好，而不是浏览器的主题设置。如果有人使用 macOS 深色模式但浏览器设置为浅色主题，favicon 仍然会是深色模式样式。

这与大多数网站处理深色模式的方式是一致的，但值得了解。

你应该切换到 SVG 吗？

如果你当前的 favicon 是简单的形状或字母标志，SVG 可能值得一试。你将获得：

一个文件代替多个文件
自动深色模式支持
更小的总文件大小
面向未来的可缩放性

如果你的 favicon 是详细的插图，或者你有很多 Safari 用户，坚持使用 PNG 作为主要格式。

大多数网站的最佳方法？两者都用。支持 SVG 的浏览器用 SVG，不支持的用 PNG 回退。只需额外花 5 分钟设置就能覆盖 100% 的用户。

快速实现检查清单

[ ] 创建你的 SVG favicon（保持简单）
[ ] 如需要，添加深色模式媒体查询
[ ] 使用 SVGOMG 优化
[ ] 创建 PNG 回退（最小 32x32）
[ ] 创建 apple-touch-icon.png（180x180）
[ ] 添加正确的 link 标签和回退顺序
[ ] 在 Chrome、Firefox 和 Safari 中测试

这真的就是全部了。SVG favicon 并不复杂——只是使用不足。在你的下一个项目中试试吧。

参考资料

Can I Use - SVG Favicons - SVG favicon 支持的浏览器兼容性数据
Building an Adaptive Favicon - web.dev - Google 关于创建自适应 favicon 的指南
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - 全面探索 SVG favicon 的能力
How to Favicon in 2025 - Evil Martians - 实用的现代 favicon 实现指南