SVG Favicon：现代网站图标方案

SVG Favicon 代表了网站图标技术的最前沿。它们可缩放、支持暗黑模式，而且可以是一个在任何尺寸下都完美显示的文件。以下是你需要了解的一切。

为什么选择 SVG Favicon？

• 无限可缩放 — 在 16px、32px、512px 或任何尺寸下都清晰锐利。永远不会有像素化。
• 极小的文件大小 — 简单的 SVG Favicon 可以不到 1KB，比任何 PNG 都小。
• 暗黑模式支持 — SVG 可以使用 CSS prefers-color-scheme 媒体查询来自适应。
• 一个文件搞定一切 — 不需要多种尺寸（尽管你仍然需要 PNG 后备方案）。

浏览器支持（2026）

浏览器	SVG Favicon 支持
Chrome 80+	支持
Firefox 41+	支持
Edge 80+	支持
Opera 67+	支持
Safari	不支持（截至 Safari 18）
IE	不支持

如何实现 SVG Favicon

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

<!-- Safari 和旧浏览器使用 PNG -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">

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

<!-- Apple Touch Icon（始终使用 PNG，不支持 SVG） -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

暗黑模式自适应

SVG Favicon 的杀手级功能 — 你的图标可以自动适应用户的颜色方案：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    circle { fill: #1d1d1f; }
    text { fill: white; }

    @media (prefers-color-scheme: dark) {
      circle { fill: white; }
      text { fill: #1d1d1f; }
    }
  </style>
  <circle cx="50" cy="50" r="45"/>
  <text x="50" y="65" text-anchor="middle"
        font-family="system-ui" font-size="50" font-weight="bold">M</text>
</svg>

浅色模式：深色图标浅色背景。暗黑模式：浅色图标深色背景。全自动，无需 JavaScript。

创建 SVG Favicon

方法一：设计工具

• Figma — 设计图标，选中后导出为 SVG
• Illustrator — 文件 → 另存为 → SVG
• Inkscape — 免费开源矢量编辑器

方法二：手写代码

对于简单图标，手写 SVG 很快：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="#0071e3"/>
  <text x="50" y="70" text-anchor="middle"
        font-size="60" font-weight="bold" fill="white">F</text>
</svg>

2026 年推荐的完整配置

将 SVG 与传统后备方案结合，获得所有世界的最佳体验：

<!-- 现代：支持暗黑模式的 SVG -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- 后备：传统 Favicon 套件 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" href="/favicon.ico" sizes="32x32">

<!-- Apple（不支持 SVG） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- PWA -->
<link rel="manifest" href="/site.webmanifest">

现在应该用 SVG Favicon 吗？

应该，但始终要提供后备方案。Safari 的限制意味着你不能只依赖 SVG。但对于 Chrome、Firefox 和 Edge 用户来说，SVG Favicon 提供了明显更好的体验 — 特别是如果你支持暗黑模式。