于是,我决定尝试使用 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 文件的标签中,放置一个元素,其rel属性设置为“icon”,href属性设置为图标所在的路径。
- "icon" href="path/to/favicon.svg"/>
因为我们使用的是 SVG,所以图标可以是任何你想要的大小,只要确保画布是方形的。
如果需要搜索免费图标,icones是一个很好的资源,或者可以使用penpot创建自己的图标。
将 SVG Favicon 内联为 Data-URI
在切换到 SVG 收藏夹图标后,我尝试做的第一件事是看看是否可以将它们与内联格式一起使用,而不是链接到单独的文件。
曾经在内联图像或背景中使用过 Data-URI 技巧,它的效果非常好,并且,也适用于网站图标。
不要链接到路径,而是在整个 SVG 代码前加上data:image/svg+xml;utf8,(包括最后一个逗号)并将整个内容传递给href属性。
- "icon" href="data:image/svg+xml;utf8,
..." >
我真的很喜欢这种方法,因为如果忘记将图标文件放在某个文件夹中的某个位置,我可以将此代码复制/粘贴到任何项目(我的大多数副项目都使用相同的图标)。
当然,你可能会觉得这样使用内联 SVG 图标不太好,因为这样会占用内存,并且在每个页面上添加内联 SVG 会增加 HTML 的大小。
如果只有一个网站要处理,这可能不是什么大问题,但对于一个维护多个网站并使用同一个favicon的人来说,是一个不错的选择。
使用表情符号表达Favicon
Lea Verou在推特上展示了如何将表情符号添加为Favicon,使用方法特别简单。
语法的工作原理与之前相同,由于SVG通过
- "icon" href="data:image/svg+xml,
".9em" font-size="90">[place emoji here] - " />
这使得创建favicon非常容易,而无需创建自定义favicon。查看Bryson Reece提供的emojicon.dev,可以得到一个表情符号列表,点解其中任何一个,将整个favicon片段复制到剪贴板上。
除此之外,Wes Bos还创建了fav.farm。这是一项第三方服务,将为你生成网站图标。可以使用你想要的表情符号直接链接到他的服务。
- "icon" href="https://fav.farm/[place emoji here]" />
开发社区的创造力从未停止,在那里有很多很酷、聪明和有创意的开发者。
添加暗模式检测
我们可以在SVG中添加一个
在本例中,我直接针对SVG和
SVG中的