SVG Favicon 实战

你听说过用 SVG 制作的 favicon 吗？如果您是 CSS-Tricks 的常客，您可能听说过。但是您的网站是否真的使用了 SVG favicon 呢？

这项任务可能比你想象的要复杂。正如我们将在本文中看到的那样，创建有用的 SVG favicon 涉及手动编辑 SVG 文件，这是我们许多人试图避免或感到不适的事情。此外，我们谈论的是一个 favicon。我们可以花几个小时玩一个热门的新 CSS 框架。但是 favicon 呢？它有时感觉太小了，不值得我们花时间。

本文主要介绍如何 **真正地** 创建 SVG favicon。如果您正在电脑前，请准备好 logo 的矢量文件。在您（积极的！）阅读结束时，您的 SVG favicon 将准备闪耀。

为什么使用 SVG favicon？

我们在这里关注的是“如何”，但值得思考：SVG favicon 到底有什么好处？我们已经有其他可以处理它的文件类型了，对吧？

SVG 是一种矢量格式。因此，它比光栅格式（包括通常用于 favicon 的 PNG 格式）具有宝贵的特性。SVG 可以缩放，并且通常比其二进制同类更紧凑，因为，它们只是代码！ 所有内容都是用数字和字母绘制的！

这是一个好消息，但这对我们的 favicon 有什么帮助呢？桌面 favicon 很小，最多 64×64。您可以以 多种分辨率提供图标。缩放是我们这里并不真正需要的功能。

文件大小是另一个令人失望的来源。虽然 SVG 在与高分辨率 PNG 文件相比具有明显的优势，但在低分辨率下则情况相反。48×48 PNG favicon 的文件大小通常小于其 SVG 等效文件。

然而，我们有一个充分的理由关注 SVG 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 是图像，我们用来构建 favicon 的 logo 可能是使用 Adobe Illustrator 或 InkScape 等工具创建的。为什么不再次使用相同的工具呢？这是因为像这样的应用程序并没有真正将其产品集成到 CSS 和媒体查询中。并不是说它们无法处理它们，而是您必须忘记它们承诺的仅用鼠标操作体验。您将使用键盘并键入代码。

这导致了第二个选项：手动编写 CSS。毕竟，这是前端开发的常用方法。为什么这里应该有所不同呢？不幸的是，SVG 通常难以阅读。当然，这是一种 XML 方言，（几乎）类似于 HTML。但是 SVG 图像充斥着冗长的 path 声明和其他我们在日常工作中很少看到的标记。例如，树莓派 logo 拥有超过 8KB 的原始数据。这使得手动编辑比听起来更繁琐。

如何创建 SVG favicon（实践中）

为了理解如何快速轻松地处理 SVG favicon，我们首先需要定义我们要实现的目标。

我们上面介绍的技术需要创造力：替换颜色、全部反转（我们稍后会讲到）、更改形状……但是 favicon 的设置不是尝试这些的合适时机。favicon 几乎总是网站的 logo。它的外观？美学？它传达的信息？所有这些问题都已经得到解答。准备 favicon 应该是微调 logo 以使其适合浏览器标签中分配的小空间。

通常，logo 本身就很完美，其 favicon 对应版本只是缩小版。有时，我们需要添加边距使其成为正方形。那么是什么促使我们使用暗色图标呢？

对比度。

许多 logo 都是为浅色背景设计的。当它们不是这样时，另一个版本仅用于更暗的背景。

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

现在我们已经确定了问题，就可以制定解决方案：有时，我们需要一个更亮的图标用于暗黑模式。这非常简单。对于彩色但过于暗淡的 logo，我们可以使用 CSS 过滤器为暗黑模式 favicon 添加亮度

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

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

如果 logo 是灰度或阴影，我们可以使用另一个 CSS 过滤器反转其颜色

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

  <!-- more stuff -->

</svg>

轮到你了！在文本编辑器中打开您的 SVG logo，并将上述任何 <style> 代码段放在关闭 </svg> 标签之前。在浏览器中打开您的 logo，从浅色切换到暗色，然后从暗色切换到浅色（Windows 或 Mac），并观察神奇的效果。根据需要调整 brightness 或 invert 过滤器。

这有多快？

更快：SVG favicon 编辑器

我们介绍的亮度技巧并非凭空而来。我在使用 RealFaviconGenerator 的 SVG favicon 编辑器 进行升级时编写了它。此在线工具包含我们之前讨论的所有内容。提交您的 SVG logo 以在标签和 Google 搜索结果页面中获取 favicon 预览。

之后，使用编辑器生成完美的 favicon。在此示例中，我们使暗色图标更亮，在幕后使用 brightness 过滤器技巧

灰度 logo 也能从 invert 过滤器中受益

点击“生成 Favicon”按钮，瞧！Favicon 已准备就绪，并在不到一分钟的时间内针对浅色和暗色模式进行了微调。任务完成。

结论

除了酷炫之外，SVG favicon 实际上解决了 PNG 对应版本无法解决的问题。我们能够以这种方式使用 SVG 也才大约一年，但到目前为止，它似乎很少被使用。凭借有意的目的和工具，也许 SVG favicon 会兴起并在 favicon 经典作品中占据一席之地。