SVG，Favicons以及我们可以与他们一起做的所有有趣的事情

网站图标（Favicons）是浏览器标签页中显示的小图标，方便用户在众多书签和标签页中快速识别网站。它们是互联网历史中一个巧妙的设计，并且具备一些令人惊叹的功能。

一项新功能是使用SVG作为网站图标。大多数现代浏览器都支持此功能，并且支持度还在不断提高。

以下是将网站图标添加到网站的代码。将其放置在网站的部分：

<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg xml">
<link href="/manifest.webmanifest" rel="manifest">

并将以下代码添加到网站的Web应用程序清单中：

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

支持SVG网站图标的浏览器将覆盖第一个<link>元素声明，并使用第二个<link>元素。不支持SVG网站图标但支持Web应用程序清单的浏览器将使用更高分辨率的图像。所有其他浏览器将回退到使用favicon.ico文件。这确保了所有支持网站图标的浏览器都能获得良好的体验。

您可能还会注意到第二行中rel声明的备用属性值。这以编程方式向浏览器传达使用.ico文件格式的网站图标作为备用显示。

在网站图标之后是一行代码，它加载另一个SVG图像，名为safari-pinned-tab.svg。这是为了支持Safari的固定标签功能，该功能在其他浏览器支持SVG网站图标之前就已经存在。您还可以在此处添加其他文件以增强不同应用程序和服务的网站，稍后将对此进行详细介绍。

以下是SVG网站图标当前支持级别的更多详细信息：

此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面端

移动端/平板电脑

为什么选择SVG？

您可能想知道为什么需要SVG。.ico文件格式已经存在很长时间了，并且可以支持最大尺寸为256×256像素的图像。这里有三个答案：

易于创作

创建.ico文件很麻烦。该文件是Microsoft使用的专有格式，这意味着您需要专门的工具来创建它们。SVG是一个开放标准，这意味着您可以无需任何其他工具或平台锁定即可使用它们。

未来发展

视网膜屏？5K？6K？当我们使用与分辨率无关的SVG文件作为网站图标时，我们可以保证我们的网站图标在未来的设备上看起来清晰锐利，无论其显示屏有多大。

性能

SVG通常是非常小的文件，特别是与它们的栅格图像对应物相比——如果您事先对其进行优化，则更是如此。通过仅使用16×16像素的网站图标作为不支持SVG浏览器的后备方案，我们提供了一种兼具高支持度和较小文件大小的组合。

这似乎有点极端，但在网络性能方面，每个字节都很重要！

技巧

SVG的另一个优点是我们可以直接在其内嵌入CSS。这意味着我们可以使用JavaScript动态调整它们，前提是SVG是内联声明的，而不是使用<img alt="SVG，Favicons以及我们可以与他们一起做的所有有趣的事情" >元素嵌入的。

<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill:></path></svg>

由于SVG网站图标是使用<link>元素嵌入的，因此无法使用JavaScript修改它们。但是，我们可以使用表情符号和媒体查询。

表情符号

Lea Verou有一个天才的想法，即在SVG的<text></text>元素内使用表情符号来创建一个具有透明背景的快速网站图标，该图标在小尺寸下也能保持清晰。

作为回应，Chris Coyier制作了一个简洁的小型演示，让您可以试用这个概念。

深色模式支持

Thomas Steiner和Mathias Bynens都独立地发现了可以使用prefers-color-scheme媒体查询来提供深色模式支持的想法。这项工作是基于Jake Archibald对SVG和媒体查询的探索。

<svg height="128" width="128" xmlns="http://www.w3.org/2000/svg">
  <path fill: dark path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"></path>
</svg>

对于支持的浏览器，此代码意味着我们的星形SVG网站图标将在激活深色模式时将其填充颜色从黑色更改为白色。非常巧妙！

其他媒体查询

深色模式支持让我想到：如果SVG可以支持prefers-color-scheme，我们还能用它们做什么？虽然对5级媒体查询的支持可能还不存在，但这里有一些可以考虑的想法：

• 使用light-level在低光环境下使网站图标颜色去饱和。
• 使用inverted-colors“翻转”反转颜色以保留品牌，或确保照片般逼真的网站图标按预期显示。
• 使用prefers-reduced-motion删除网站图标动画。理想情况下，我们应该避免首先为网站图标设置动画，因为它们可能是注意力缺陷多动障碍和其他相关残疾的诱因。
• 使用forced-colors和/或Windows高对比度模式媒体查询来确保网站图标在高对比度颜色环境中保持视觉效果！请记住使用颜色关键字以保持网站图标的颜色动态！

保持清晰

良好网站图标设计的另一个重要方面是确保它们在小型浏览器标签区域中看起来不错。其中的秘诀是使矢量图像的路径与像素网格对齐，这是计算机用来将SVG数学转换为我们在屏幕上看到的位图的指南。

这是一个使用正方形形状的简化示例：

当正方形的矢量点与画板的像素网格对齐时，计算机用来平滑形状的抗锯齿效果是不需要的。当矢量点未对齐时，我们会得到“涂抹”效果：

可以使用Figma、Sketch、Inkscape或Illustrator等矢量编辑程序调整像素网格上的矢量点位置。这些程序也导出SVG。要调整矢量点的位置，请使用精确选择工具选择每个节点并将其拖动到所需位置。

为了在如此小的尺寸下看起来不错，一些更复杂的图标可能需要简化。如果您正在寻找这方面的良好入门指南，Jeremy Frank在Vidget上撰写了一篇非常好的两部分文章。

迈出额外一步

除了网站图标外，还有许多不同的（不幸的是专有的）方法可以使用图标来增强其体验。这些包括前面提到的Safari的固定标签图标¹、聊天应用程序展开、固定的Windows开始菜单磁贴、社交媒体预览和主屏幕启动器。

如果您正在寻找开始使用这些增强功能的好地方，我非常喜欢realfavicongenerator.net。

关于网站图标历史的一个有趣的事情：Internet Explorer是第一个支持它们的浏览器，它们是由一位名叫Bharat Shyam的开发人员在最后一刻偷偷添加进去的：

故事是这样的，深夜，Shyam正在开发他的新网站图标功能。他叫来了初级项目经理Ray Sun来看一看。

Shyam评论道：“这很好，对吧？签入吧？”，请求允许将代码签入Internet Explorer代码库，以便它可以在下一个版本中发布。Sun没有多想，这个功能很酷，显然会让IE更有优势。所以他告诉Shyam继续添加它。就这样，网站图标进入了Internet Explorer 5，它将成为网络有史以来最大的浏览器版本之一。

第二天，Sun因让这个功能如此迅速地通过而受到经理的斥责。事实证明，Shyam特意等到当天晚些时候，他知道一个经验不足的项目经理会让他通过。但到那时，代码已经被合并了。顺便说一句，你会惊讶于有多少相对主要的浏览器功能像这样偷偷地进入版本中。

摘自Jay Hoffmann撰写的《我们如何获得网站图标》

我很高兴看到该平台对网站图标给予了一些关注。它们长期以来一直是我最喜欢的微小设计细节之一，我很高兴它们变得对用户的需求更具响应性。如果您有时间，为什么不以Bharat Shyam在1999年所做的那样，将SVG网站图标偷偷添加到您的项目中呢？

¹ 我无法确定Safari是否会实现SVG网站图标支持，但我希望他们这样做。有人听说过什么吗？

以上是SVG，Favicons以及我们可以与他们一起做的所有有趣的事情的详细内容。更多信息请关注PHP中文网其他相关文章！