SVG Favicon FTW 你不知道的居然还有这些！-51CTO.COM

【51CTO.com快译】我最近一直在做一辅助项目（Style Check和Bedrocss），就像我其他任何长期项目一样，我已经到了想要添加favicon的地步。

于是，我决定尝试使用 SVG 图标，在BOO Safari浏览器上是足以支持的，但对于一些需求还不是达到要求。如果在不受支持的浏览器上没有显示图标，也是可以接受的。

通过使用 SVG，可以获得很多的好处，例如：

• 单个文件的清晰图像质量

• 对表情符号的支持

• 内联图标（无需链接资源）

• 暗模式检测

为了了解如何将 SVG 图标添加到项目中，因此，通过对以下示例（除了表情符号）进行操作，我们将使用一个非常基本的圆形 SVG：

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> 
  <circle cx="50" cy="50" r="50"/> 
</svg>

将 SVG Favicon 添加到 HTML

将favicon添加到网站的语法同以往操作一样，同样适用于 SVG 收藏夹图标（减去文件扩展名）。

在 HTML 文件的<head>标签中，放置一个<link>元素，其rel属性设置为“icon”，href属性设置为图标所在的路径。

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

因为我们使用的是 SVG，所以图标可以是任何你想要的大小，只要确保画布是方形的。

如果需要搜索免费图标，icones是一个很好的资源，或者可以使用penpot创建自己的图标。

将 SVG Favicon 内联为 Data-URI

在切换到 SVG 收藏夹图标后，我尝试做的第一件事是看看是否可以将它们与内联格式一起使用，而不是链接到单独的文件。

曾经在内联图像或背景中使用过 Data-URI 技巧，它的效果非常好，并且，也适用于网站图标。

不要链接到路径，而是在整个 SVG 代码前加上data:image/svg+xml;utf8,（包括最后一个逗号）并将整个内容传递给href属性。

<link rel="icon" href="data:image/svg+xml;utf8,<svg...>...</svg>">

我真的很喜欢这种方法，因为如果忘记将图标文件放在某个文件夹中的某个位置，我可以将此代码复制/粘贴到任何项目（我的大多数副项目都使用相同的图标）。

当然，你可能会觉得这样使用内联 SVG 图标不太好，因为这样会占用内存，并且在每个页面上添加内联 SVG 会增加 HTML 的大小。

如果只有一个网站要处理，这可能不是什么大问题，但对于一个维护多个网站并使用同一个favicon的人来说，是一个不错的选择。

使用表情符号表达Favicon

Lea Verou在推特上展示了如何将表情符号添加为Favicon，使用方法特别简单。

语法的工作原理与之前相同，由于SVG通过<text>元素支持文本内容，并且表情符号几乎都是文本，因此可以在 SVG 中将放置任何表情符号（可能需要四处移动以适应正确的位置一些移动来适应）。

<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">[place emoji here]</text> 
</svg>" />

这使得创建favicon非常容易，而无需创建自定义favicon。查看Bryson Reece提供的emojicon.dev，可以得到一个表情符号列表，点解其中任何一个，将整个favicon片段复制到剪贴板上。

除此之外，Wes Bos还创建了fav.farm。这是一项第三方服务，将为你生成网站图标。可以使用你想要的表情符号直接链接到他的服务。

<link rel="icon" href="https://fav.farm/[place emoji here]" />

开发社区的创造力从未停止，在那里有很多很酷、聪明和有创意的开发者。

添加暗模式检测

我们可以在SVG中添加一个<style>标记，并使用prefers color scheme media查询根据用户的暗模式首选项更改图标。

<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，你可能需要这样做。

SVG中的<style>标记包含在该XML文档中，因此你不必担心样式会泄漏到应用程序的其余部分中。

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】