有趣的SVG+Favicon应用

favicons是在浏览器选项卡中看到的小图标，当浏览浏览器的书签和标签时，它们可以帮助用户清晰的知道是哪个网站。它们是互联网历史的一部分，能够实现一些很酷的效果。

一个非常新的技巧是能够将 SVG 用作 favicon，现在大部份浏览器都支持这一特征。

以下是如何向网站添加收藏夹图标的代码：

 <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="alternate icon" href="/favicon.ico"> <link rel="mask-icon" href="/safari.svg" color="#1454ec"> 

如果浏览器不支持 SVG 图标，它将忽略第一个链接元素声明并继续第二个，这确保了所有支持网站图标的浏览器都可以正常显示。

细心的你可能发现第二行中 rel 声明的备用属性值，这是向浏览器声明，使用.ico文件格式的 favicon 是专门用作替代表示的。

最后一行代码，用于加载另一个 SVG 图标，名为safari.svg。这是为了支持 Safari 的固有的标签功能，这个功能在其他浏览器支持 SVG favicon 之前就存在了。当然也可以在这里添加额外的文件，以针对不同的应用程序和服务增强网站。

以下是有关 SVG favicons 浏览器支持情况，截图数据来自 Caniuse ：

为什么要用SVG

.ico 文件格式很早就存在，可以支持最大 256×256 像素的图像，为什么要用svg？

容易制作

制作.ico 文件很痛苦，现在一般通过在线网站来转换。该文件是 Microsoft 使用的专有格式，这意味着需要专门的工具来制作它们。 SVG 是一个开放标准，这意味着可以使用它们而无需任何进一步的工具或平台锁定。

面向未来

视网膜？ 5K、 6k，当为网站图标使用对分辨率无感的 SVG 文件时，在确保网站图标在未来的设备上看起来也很清晰，无关显示器分辨率大小。

性能

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 图标是使用 link 元素嵌入的，因此无法真正使用 JavaScript 对其进行修改。但是，可以使用 emoji 和 media 之类的技术。

Emoji

Emoji表情符号作为网站图标，在SVG的文本元素中使用表情符号来制作一个带有透明背景的小图标，以此作为网站的图标。如有兴趣，可以点击这里查看DEMO 。

暗黑模式支持

使用 preferred -color-scheme 媒体查询来支持暗黑模式。对于支持的浏览器，很简单就可以实现此效果。

 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <style> path { fill: #1454ec; } @media (prefers-color-scheme: dark) { path { fill: #ffffff; } } </style> <path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z"/> <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/> </svg> 

正常效果

暗黑模式效果

总结

favicons 在大小上的不足，在用户体验上弥补。这些图标在网站上作为用户的导航工具，往往会留下浏览器标签。

通常情况下，favicon 是一个快速的视觉标识符，它将用户与数字呈现联系起来。建议使用中以确保它是最好的，更准确地代表品牌。