使用 SVG 制作 favicon 网站图标

2021-07-09 ⏳2.9分钟(1.2千字) 🕸️

我的个人网站一直使用 SVG 图标🧔🏻。今天偶然发现 Austin Gil 写的一篇文章 OMG, SVG Favicons FTW!1，比较系统地整理了使用 SVG 制作 favicon 的玩法。现在翻译出来分享给大家。以下是原文。

我对于自己做的业余项目，只要是时间比较长的，都会想办法添加 favicon 网站图标。

现在我决定玩一下 SVG 网站图标了。浏览器对这一特性的支持还算不错2，但于我而言已经够好了。如果浏览器不支持，那就不显示 favicon，天也不会塌下来。

SVG 有如下优点：

下面就说一下如何给你的项目添加 SVG favicon 图标。在接下来的例子3中我们将使用一个基本的圆形 SVG：

简单的圆形 
<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50"/>
</svg>

在 HTML 中添加 SVG favicon 图标

为网站添加 favicon 图标的语法已经很长时间没有变过了。添加 SVG 图标的方法也是一样（但扩展名除外）。

你需要在<head>标签中添加一个<link>标签，并将它的rel属性设成icon， href属性设成图标的路径：

<link rel="icon" href="path/to/favicon.svg"/>

因为是 SVG 图片，我们可以使用任意尺寸的图片（而不会影响清晰度，译者注）。但要确保图片是正方形。

如果想搜索免费图标，可以使用icones。你也可以使用 penpot 自己设计。

使用 data-uri 内嵌 SVG 图标

迁移到 SVG 图标之后，我马上就想研究一下能不能将 SVG 嵌入到 HTML，这样就不需要引用外部文件了。

我之前使用 data-uri 设置内嵌图片和背景图，非常好用。data-uri 也可以用于 favicon 图标。

你可以把 SVG 代码加上 data:image/svg+xml;utf8, (包括最后的括号）前缀，然后到 href 属性中（之前写的时 SVG 文件路径）。

我很喜欢这种方法。因为如此一来就不会忘记复制图标文件了。我可以复制粘贴这一小段代码就可以了（我的大多数项目都用相同的图标）。

你可能反对使用内嵌 SVG。因为使用单独的文件可以使用缓存，而且内嵌文件会增大 HTML 文件的体积。但我觉得区别不大，我更看更可维护性。

如果你只维护一个网站，这不是什么大问题。但有些人维护多个不同的网站而且使用相同的图标，这种办法就很有用。

使用 Emoji 字符作为 favicon 图标

Lea Verou 发过一条推文4，展示了如何在 favicon 中添加 Emoji 字符。我没想过还能这么玩，但玩法也非常简单。

语法跟前面的圆形 SVG 差不多。SVG 支持使用 <text> 添加文本，而 Emoji 本身就是文本。你可以在 SVG 中添加任意 Emoji 字符（但需要调整一下显示位置）。

<link rel="icon" href="data:image/svg+xml,<svg
  xmlns='http://w3.org/2000/svg'
  viewBox='0 0 100 100'>
  <text y='.9em' font-size='90'>💩</text>
</svg>" />

（哈哈哈哈，大便）

使用这个技巧可以很容易地制作 favicon 图标。如果你不想动手，可以使用 Bryson Reece 提供的 https://emojicon.dev。这个网站会展示 Emoji 列表，你可以通过点击复制整个 SVG 图标代码。

如果你还是觉得麻烦，Wes Bos 还开发了 https://fav.farm。这是一个生成 favicon 的服务，你可以直接引用它的服务：

<link rel="icon" href="https://fav.farm/💩" />

开发者社区的人们每每都能给我带来新创意。

检测夜间模式

我们可以给 SVG 添加 <style> 标签并使用 prefers-color-scheme 来根据用户设置的夜间模式来修改图标。

<link rel="icon"
  href="data:image/svg+xml;utf8,<svg
    xmlns='http://www.w3.org/2000/svg'
    viewBox='0 0 100 100'>
  <style>
    svg {
      background: white;
    }
    circle {
      fill: black;
    }
    @media (prefers-color-scheme: dark)  {
      svg {
        background: black;
      }
      circle {
        fill: white;
      }
    }
  </style>
  <circle cx='50' cy='50' r='50'/>
</svg>">

我在这个例子中直接改了 SVG 和 circle 的属性。如果是自定义的 SVG，你可能需要使用 css 的 class。

（下面是译者添加的显示效果，读者可以修改系统的夜间模式来查看效果。译者注）

根据夜间模式改变图标样式

SVG 中的 <style> 标签是一个 xml 文档，不需要担心其内容会影响到你的网站。

结语

希望读者觉得本文有趣或有用。我也为自己的项目精心打造了一枚 SVG 图标，这是最终版本：

austingil’s favicon

  1. https://austingil.com/svg-favicons/↩︎

  2. https://caniuse.com/link-icon-svg Safari比较拉跨。↩︎

  3. Emoji 示例除外↩︎

  4. https://twitter.com/LeaVerou/status/1241619866475474946↩︎