使用 SVG 制作 favicon 网站图标

2021-07-09

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

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

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

SVG 有如下优点:

下面就说一下如何给你的项目添加 SVG favicon 图标。在接下来的例子(emoji emoji示例除外)中我们将使用一个基本的圆形 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属性设成iconhref属性设成图标的路径:

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

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

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

使用 data-uri 内嵌 svg 图标

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

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

Instead of linking to the path, prefix your entire SVG code with data:image/svg+xml;utf8, (including that last comma) and pass the whole thing to the href attribute.

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

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

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

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

使用 Emoji 字符作为 favicon 图标

Lea Verou 发过一条推文,展示了如何在 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
austingil’s favicon
「taoshu」微信公众号