图标是您在浏览器选项卡中看到的小图标。 当您浏览浏览器的书签并打开选项卡时，它们可以帮助您了解哪个站点。 它们是互联网历史上整洁的一部分，能够执行一些很酷的技巧 。
一种非常新的技巧是能够将SVG用作图标。 大多数现代浏览器都支持该功能 ，并且此后还将提供更多支持。
以下是有关如何在网站上添加图标的代码：
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" href="/favicon.ico">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ff8a01">如果浏览器不支持SVG网站图标，它将忽略第一个链接元素声明，并继续进行第二个声明。 这样可以确保所有支持收藏夹图标的浏览器都可以享受该体验。
您可能还会在第二行中注意到rel声明的替代属性值。 这通过编程方式与浏览器通信，具有使用.ico文件格式的收藏夹图标专门用作替代表示。
网站图标之后是一行代码，可加载另一个SVG图像，即safari-pinned-tab.svg 。 这是为了支持Safari的固定选项卡功能 ，该功能在其他浏览器获得SVG网站图标支持之前就已经存在。 您可以在此处添加其他文件，以针对不同的应用程序和服务增强您的网站，但稍后会对此进行更多介绍。
以下是有关SVG网站图标支持当前水平的更多详细信息：
该浏览器支持数据来自Caniuse ，其更多信息。 数字表示浏览器支持该版本及更高版本的功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 80 | 41 | No | 80 | TP |
手机/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 81 | No | No | 14.0 |
为什么选择SVG？
您可能会质疑为什么需要这样做。 .ico文件格式已经存在很久了，并且可以支持最大256×256像素的图像。 这是给您的三个答案。
易于创作
制作.ico文件很痛苦。 该文件是Microsoft使用的专有格式 ，这意味着您需要专用的工具来制作它们。 SVG是一个开放标准 ，这意味着您可以使用它们而无需任何其他工具或平台锁定。
面向未来
视网膜？ 5k？ 6k？ 当我们对图标图标使用与分辨率无关的SVG文件时，我们保证图标图标在将来的设备上看起来清晰，无论它们的显示大小如何 。
性能
SVG通常是非常小的文件，尤其是与它们的光栅图像比较时，甚至更是如此-如果您事先对其进行优化 。 对于不支持SVG的浏览器，通过仅使用16×16像素的图标作为后备，我们提供了一种组合，该组合享有高度支持，并且启动文件较小。
这似乎有些极端，但是当涉及到Web性能时，每个字节都很重要！
技巧
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网站图标是使用link元素嵌入的，因此实际上无法使用JavaScript对其进行修改。 但是，我们可以使用表情符号和媒体查询等功能。
表情符号
Lea Verou有一个天才的想法，他想在SVG的text元素中使用表情符号来制作一个带有透明背景的快速图标，该图标可以小尺寸显示。
https://twitter.com/LeaVerou/status/1241619866475474946
作为回应， 克里斯·科耶尔 （ Chris Coyier）制作了一个简洁的小样 ，使您可以试用这个概念。
暗模式支持
Thomas Steiner和Mathias Bynens都偶然发现了可以使用“ prefers 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图标将其填充颜色从黑色更改为白色。 漂亮整齐！
其他媒体查询
对暗模式的支持让我开始思考：如果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 。
关于Favicon历史的一件有趣的事：Internet Explorer是第一个支持它们的浏览器，并且在第11小时被名为Bharat Shyam的开发人员吸引到了他们：
随着故事的发展，深夜，Shyam正在研究其新的收藏图标功能。 他拜访了初级项目经理Ray Sun来看看。
Shyam评论说：“这很好，对吗？ 是否签入？”，请求将代码签入Internet Explorer代码库的权限，以便可以在下一版本中发布它。 Sun并没有考虑太多，该功能很酷，很明显会给IE一个优势。 因此，他告诉Shyam继续添加它。 就像这样，该网站图标进入Internet Explorer 5，它将继续成为网络上见过的最大的浏览器版本之一。
第二天，Sun遭到其经理的谴责，因为他让此功能很快获得通过。 事实证明，Shyam特意等到当天晚些时候才知道，经验不足的项目经理会给他通行证。 但是到那时，代码已经被合并了。顺便说一句，您会惊讶地发现有多少个相对主要的浏览器功能已潜入这样的发行版中。
杰伊·霍夫曼 （ Jay Hoffmann）的 《我们如何获得图标》
我很高兴看到该平台对网站图标产生了一点爱。 长期以来，它们一直是我最喜欢的小设计细节之一，而我对它们对用户需求的反应越来越积极感到非常兴奋。 如果有时间，为什么不像巴拉特·谢姆（Bharat Shyam）在1999年所做的那样，将SVG图标收藏到您的项目中。
¹我无法确定Safari是否要实现SVG网站图标支持，但我希望他们能做到。 有人听到过吗？
翻译自: https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/
扫一扫
2478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
