Favicons 是您在浏览器标签中看到的那些小图标。 当您浏览浏览器的书签和打开的标签时，它们可以帮助您了解哪个网站是哪个。 它们是互联网历史中一个很酷的部分，能够 执行一些很酷的技巧。
一个非常新的技巧是能够使用 SVG 作为 favicon。 这是 大多数现代浏览器支持的功能，并且正在获得更多支持。
以下是将 favicons 添加到网站的代码。 将其放在您网站的 <head> 中
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="manifest" href="/manifest.webmanifest">并将此代码放在您网站的 web app manifest 中
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}支持 SVG favicons 的浏览器将覆盖第一个链接元素声明并改用第二个。 不支持 SVG favicons 但支持 web app manifest 的浏览器将使用更高分辨率的图像。 所有其他浏览器将回退到使用 favicon.ico 文件。 这确保了所有支持 favicons 的浏览器都可以享受这种体验。
您可能还会注意到第二行中 我们 rel 声明的备用属性值。 这以编程方式向浏览器传达使用 .ico 的文件格式的 favicon 特别用作备用呈现。
在 favicons 之后是一行代码，它加载另一个 SVG 图像，名为 safari-pinned-tab.svg。 这是为了支持 Safari 的固定标签功能，该功能在其他浏览器支持 SVG favicon 之前就已经存在。 您可以在此处添加其他文件以增强您的网站，使其适用于不同的应用程序和服务，但稍后会详细介绍。
以下是有关当前 SVG favicon 支持级别的更多详细信息
此浏览器支持数据来自 Caniuse，其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 80 | 41 | 否 | 80 | 否 |
移动设备/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 否 | 否 | 否 |
为什么使用 SVG？
您可能在质疑为什么需要这样做。 .ico 文件格式已经存在很长时间了，并且可以支持高达 256×256 像素的图像。 这里有三个答案。
易于创作
制作 .ico 文件很麻烦。 该文件是 Microsoft 专有格式，这意味着您需要 专用工具 来制作它们。 SVG 是一个开放标准，这意味着您可以无需任何其他工具或平台锁定就可以使用它们。
面向未来
视网膜？ 5k？ 6k？ 当我们使用与分辨率无关的 SVG 文件作为 favicon 时，我们保证 favicons 在未来的设备上看起来很清晰，无论 它们的显示屏有多大。
性能
SVG 通常非常小，尤其是在与它们的栅格图像对应物相比时 - 尤其是在您 事先优化它们的情况下。 通过仅使用 16×16 像素的 favicon 作为不支持 SVG 的浏览器的回退，我们提供了在高度支持和更小的文件大小之间取得平衡的组合。
这可能看起来有点极端，但就网络性能而言，每个字节都很重要！
技巧
SVG 的另一个很酷之处在于我们可以 直接在其中嵌入 CSS。 这意味着我们可以使用 JavaScript 动态调整它们，前提是 SVG 是内联声明的，而不是使用 img 元素嵌入的。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #272019; }
</style>
<!-- etc. -->
</svg>由于 SVG favicons 是使用 link 元素嵌入的，因此无法使用 JavaScript 修改它们。 但是，我们可以使用表情符号和媒体查询等功能。
表情符号
Lea Verou 有一个天才的想法，就是使用 SVG 的 text 元素 中的表情符号来制作一个带有透明背景的快速 favicon，它可以在较小的尺寸下保持效果。
作为回应，Chris Coyier 制作了一个很酷的小演示，让您可以体验这个概念。
暗黑模式支持
Thomas Steiner 和 Mathias Bynens 独立地偶然发现了可以使用 prefers-color-scheme 媒体查询来提供暗黑模式支持的想法。 这项工作是基于 Jake Archibald 对 SVG 和媒体查询的探索。
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
<style>
path { fill: #000000; }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff; }
}
</style>
<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"/>
</svg>对于支持的浏览器，此代码意味着我们的星形 SVG favicon 将在 暗黑模式 激活时将填充颜色从黑色更改为白色。 很酷吧！
其他媒体查询
暗黑模式支持让我思考：如果 SVG 支持 prefers-color-scheme，我们还能用它们做些什么？ 虽然 5 级媒体查询 的支持可能尚未到位，但这里有一些想法供您考虑。
- 使用
light-level在弱光环境中淡化 favicon 颜色。 - 使用
inverted-colors“翻转”反转的颜色以保留品牌，或确保照片般逼真的 favicon 按照预期显示。 - 使用
prefers-reduced-motion删除 favicon 动画。 理想情况下，我们应该 首先避免为 favicons 设置动画，因为它们可能是多动症和其他相关残疾的触发因素。 - 使用
forced-colors和/或 Windows 高对比度模式媒体查询 来确保 favicon 在高对比度颜色环境中保持视觉效果。 请记住 使用颜色关键词 来保持 favicon 颜色的动态！
保持简洁
好的网站图标设计的另一个重要方面是确保它们在浏览器标签的小区域内看起来很好。 这方面的秘诀是使矢量图像的路径与像素网格对齐，这是计算机用来将 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
我很高兴看到平台对网站图标给予了一点关注。 它们一直是我最喜欢的设计细节之一，我很高兴它们变得对用户的需求更加敏感。 如果你有时间，为什么不把 SVG 网站图标偷偷地添加到你的项目中，就像 Bharat Shyam 在 1999 年所做的那样？
¹ 我无法确定 Safari 是否会实施 SVG 网站图标支持，但我希望他们会这样做。 有人听说过什么吗？
啊，这对于我目前正在进行的项目似乎非常有用 - 但这里有一个问题：是否有任何方法可以使用 JS 检查浏览器的支持？ 我想 CSS.supports 根本不会识别它（因为它不是 CSS）。
哦，太好了，我很高兴这可以帮助到你！
老实说，我不确定你是否可以在 JS 中检查这种事情。 我假设这不是你可以定位的东西，因为它只是 `link` 的 `href` 属性中的一个字符串？ 我很乐意听到其他意见。
我一直期待能够通过 `media` 属性使用媒体查询。 这不仅可以让我们避免在 SVG 中使用内联 CSS，而且还可以让我们在可能需要 PNG 的情况下使用暗色模式图标。
另一个很酷的技巧是动画网站图标：https://blog.tomayac.com/2019/12/01/animated-svg-favicons/。 这更多的是一个实验，可能不要在生产网站上这样做。
`favicon.ico` 链接不应该在 `favicon.svg` 之前，因为它本质上是备用方案吗？
尝试在我的网站上实现它，Chrome 似乎总是选择最后一个。 另一方面，这可能是因为它是 PNG 文件……
我也遇到了这个问题，即使我有一个图标文件。 看起来 Chrome 比较喜欢 ico 文件，如果我注释掉链接到 ico 文件的那一行，浏览器就会显示 svg 文件。
啊，我也遇到这个问题，为什么 Chrome 会这样做。 如果我在根目录下有 favicon.ico 文件，并删除该行，它仍然默认为 .ico 文件，而不是 .svg 文件。 太奇怪了。
这很有用，非常感谢。
关于这个主题的资源令人印象深刻，很棒的文章！