外刊IT评论

SVG 网站图标(favicon)的实际应用

你听说过用 SVG 制作的网站图标(Favicon)吗？如果你是 CSS-Tricks 的常读读者，你可能听说过。但你的网站真的使用了网站图标(Favicon)吗？

这项任务比你想象的要复杂得多。正如本文将要探讨的，创建一个有用的 SVG 网站图标(Favicon)需要手动编辑 SVG 文件，而这正是许多人试图避免或感到不适的事情。此外，我们讨论的是图标。我们可以花几个小时玩弄一个热门的新 CSS 框架。但图标？它有时感觉太小，不值得我们花时间。

本文旨在创建一个真正的 SVG Favicon。如果你正在使用笔记本电脑，请准备好一个徽标的矢量文件。在你（积极地！）阅读完本文后，你的 SVG Favicon将准备好闪耀。

为什么需要SVG Favicon？

我们关注的是“如何做”，但值得反思：SVG Favicon究竟有什么用处？我们已经有了其他文件类型来处理这个功能，对吧？

SVG是一种矢量格式。因此，它相较于位图格式（如常用于图标的PNG）具有显著优势。SVG可无损缩放且通常比二进制格式更紧凑，因为它本质上就是代码！所有内容都以数字和字母形式绘制！

这固然是好消息，但这对图标有何帮助？桌面图标尺寸极小，最大仅64×64像素。你可以提供多个分辨率的Favicon。缩放功能在这里其实并不必要。

文件大小是另一个令人失望的因素。虽然 SVG 在高分辨率下明显优于 PNG 文件，但在低分辨率下情况就不同了。一个 48×48 的 PNG Favicon通常比其 SVG 版本的文件大小更小。

然而，我们有充分理由关注SVG Favicon：暗色模式支持。

暗色模式近期备受关注。您可能已为自己的网站实现了暗色模式。这对图标意味着什么？这意味着根据浏览器标签页背景亮度显示不同Favicon的能力。

我们将准备这样的Favicon。

如何创建SVG Favicon（理论上）

要为SVG Favicon 实现深色模式支持，需要借助一个CSS技巧（格兰芬多加10分），即可以在SVG内部直接嵌入<style>标签，并通过媒体查询检测用户的当前主题偏好。具体实现方式如下：

<svg>
  <style>
    @media (prefers-color-scheme: dark) {
      // Your dark styles here
    }
  </style>

  <!-- more stuff -->

</svg>

有了这种图样，您的明暗Favicon只受限于您的想象力。例如，改变所有线条的颜色：

<svg>
  <style>
    path { fill: black; }
    @media (prefers-color-scheme: dark) {
      path { fill: white; }
    }
  </style>

  <!-- more stuff -->

</svg>

现在是时候真正开始编写这些样式了。问题就从这里开始。

SVG是图像格式，而我们用来制作网站图标的标志很可能是在Adobe Illustrator或InkScape等工具中创建的。为什么不再次使用相同的工具呢？那是因为这类应用程序尚未将CSS和媒体查询真正集成到其产品中。并不是说它们无法处理这些功能，但你必须放弃它们所承诺的仅限鼠标操作的体验。你将需要使用键盘并手动输入代码。

这让我们不得不考虑第二个选项：手动编写CSS。毕竟，这是前端开发中常见的做法。为什么这里要有所不同？不幸的是，SVG往往难以阅读。虽然这是一种XML方言，与HTML（几乎）相似。但SVG图像中充斥着冗长的路径声明和其他我们在日常工作中很少见到的标记。例如，树莓派的标志就包含超过8KB的原始数据。这使得手动编辑比听起来要繁琐得多。

如何创建SVG Favicon（实践指南）

要快速轻松地处理SVG Favicon，我们首先需要明确目标。

我们之前提到的技术需要发挥创意：替换颜色、反转所有颜色（稍后会详细说明）、更改形状……但网站图标的设置并非适合这些创意的场合。网站图标几乎总是网站的标志。它的外观？美学？它传达的信息？所有这些问题都已得到解答。准备网站图标应是调整标志以适应浏览器标签中分配的小空间。

通常，标志本身已非常完美，其 favicon 版本只是其缩小版。有时，我们需要添加边距使其成为正方形。那么，为什么需要深色图标呢？

对比度。

许多标志是为浅色背景设计的。当它们不是时，会存在另一个版本，专门用于深色背景。

图2：SVG 网站图标(favicon)的实际应用 — 请注意，由于背景颜色较深，连颜色也略有变化。

因此，无论我们是手动还是使用工具准备 favicon，我们都会自动选择与浅色兼容的徽标，并以此为起点。毕竟，传统上桌面标签都是白色或浅灰色的。在使用暗色模式时，问题就出现了。

图3：SVG 网站图标(favicon)的实际应用 — 在最好的情况下，徽标自然能很好地适应浅色和深色背景。色彩丰富的徽标就会出现这种情况，比如 Facebook 的徽标。

图4：SVG 网站图标(favicon)的实际应用 — 有时，通过嵌入自己的背景，可以使 favicon 不受背景影响。不过这种技术也有缺点。它需要填充，以免徽标触碰到背景边缘。

图5：SVG 网站图标(favicon)的实际应用 — 最糟糕的情况是深色徽标，适合浅色背景，不适合深色背景。阿迪达斯要么清晰可见，要么几乎看不见。

既然我们已经找到了问题的症结所在，我们就可以制定一个解决方案：有时，我们需要一个更亮的暗模式图标。这很简单。对于色彩丰富但过于暗淡的徽标，我们可以通过 CSS 滤镜为暗色模式下的图标增加亮度：

<svg>
  <style>
    @media (prefers-color-scheme: dark) {
      :root {
        filter: brightness(2);
      }
    }
  </style>

  <!-- more stuff -->
</svg>

如果徽标是浅色或灰色，我们可以使用另一种 CSS 滤镜反转其颜色：

<svg>
  <style>
    @media (prefers-color-scheme: dark) {
      :root {
        filter: invert(100%);
      }
    }
  </style>

  <!-- more stuff -->

</svg>