DZone> WebDev Zone >OMG,SVG Favicons FTW!
OMG, SVG Favicons FTW!
这篇文章探讨了SVG图标的有趣新世界。我们涵盖了将它们添加到HTML中、使用表情符号、将它们作为数据URI内联以及支持黑暗模式。
通过
·
21年8月5日 -Web Dev Zone -分析
喜欢 (1)
评论
保存
Tweet
23次浏览
加入DZone社区，获得完整的会员体验。
我最近一直在做一些副业（Style Check和bedrocss），就像任何我做得足够久的项目一样，我到了想添加一个favicon的时候。
我决定用SVG图标来玩玩。对它的支持还可以（Safari浏览器），但对我的需求来说已经够好了。如果在不支持的浏览器上没有favicon显示，我也无所谓。这又不是世界末日。
通过使用SVG，我可以得到很多很酷的好处，比如。
- 以单一文件获得清晰的图像质量
- 支持emojis
- 内联图标（不需要链接资源
- 黑暗模式检测（不错！）。
让我们来探讨一下在你的项目中添加SVG图标的问题。在下面的例子中（除了emojis），我们将使用一个非常基本的圆形SVG。
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<circle cx="50" cy="50" r="50"/>
</svg>
在HTML中添加一个SVG Favicon
在你的网站上添加favicon的语法已经很久没有变化了，这一点同样适用于SVG favicons（除去文件扩展名）。
在你的HTML文件的<head> 标签中，你放置一个<link> 元素，rel 属性设置为 "图标"，href 属性设置为你的图标所在的路径。
<link rel="icon" href="path/to/favicon.svg"/>
因为我们使用的是SVG，所以图标可以是你想要的任何尺寸，只要确保画布是方形的。
如果你需要搜索免费的图标，icones是一个很好的资源，或者你可以用penpot创建你自己的。
嵌入SVG图标作为数据URI
在改用SVG图标之后，我尝试做的第一件事就是看看是否可以用内联格式来使用它们，而不是链接到一个单独的文件。
我以前曾对内联图像或背景使用过Data-URI技巧，而且效果很好。好消息是，它也适用于favicons。
与其链接到路径上，不如用data:image/svg+xml;utf8, （包括最后一个逗号）作为整个SVG代码的前缀，并将整个代码传递给href 属性。
<link rel="icon" href="data:image/svg+xml;utf8,<svg...>...</svg>">
我非常喜欢这种方法，因为我可以不用把图标文件放在某个文件夹里，而且我可以把这段代码复制/粘贴到任何项目中（现在我的大多数边角项目都使用同一个图标）。
你可以反对使用内联SVG favicon，因为链接到一个文件可以被缓存，而且在每个页面上添加内联SVG会增加HTML的大小，但我认为这不会有太大的区别，而且我更喜欢这里的可维护性。
如果你只有一个网站需要处理，这可能不是什么大问题，但作为一个维护多个网站并使用同一个图标的人来说，这很好。
使用表情符号作为你的图标
莱亚-维鲁的一条 推文显示了如何使用它们来添加表情符号作为favicons。我可能根本不会想到这一点，但这是很直接的。
语法的工作原理和以前一样。由于SVG通过<text> 元素支持文本内容，而表情符号几乎就是文本，所以你可以把任何表情符号放在你的SVG中（它可能需要一些移动来适应）。
<link rel="icon" href="data:image/svg+xml,<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100">
<text y=".9em" font-size="90">[place emoji here]</text>
</svg>" />
这使得拥有一个favicon变得非常容易，而无需创建一个自定义的favicon。想要更简单的东西吗？看看Bryson Reece的emojicon.dev。它给你一个表情符号的列表，你可以点击其中任何一个，将整个favicon片段复制到你的剪贴板。
如果这也不是你要的，韦斯-博斯还创建了fav.farm。这是一个第三方服务，将为你生成favicon。你可以直接链接到他的服务和你想要的表情符号。
<link rel="icon" href="https://fav.farm/[place emoji here]" />
开发者社区的创造力从未停止过给我留下深刻的印象。有这么多很酷、很聪明、很有创意的开发者在那里。
添加黑暗模式检测
我们可以给我们的SVG添加一个<style> 标签，并使用prefers-color-scheme 媒体查询来根据用户的黑暗模式偏好改变我们的图标。
<link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<style>
svg {
background: white;
}
circle {
fill: black;
}
@media (prefers-color-scheme: dark) {
svg {
background: black;
}
circle {
fill: white;
}
}
</style>
<circle cx="50" cy="50" r="50"/>
</svg>">
在这个例子中，我是直接针对SVG和<circle> ，但你也可以使用类。对于自定义SVG，你可能需要这样做。
SVG中的<style> 标签都包含在该XML文档中，所以你不必担心样式会泄露到你的应用程序的其他部分。
主题。
html, Web开发, 前端开发, favicon, CSS, 黑暗模式, emoji
经Austin Gil许可发表于DZone。点击这里查看原文。
DZone贡献者所表达的观点属于他们自己。
在DZone上受欢迎
评论
