您现在的位置是：亿华云 > 系统运维

SVG Favicon FTW 你不知道的居然还有这些！

亿华云2025-10-02 16:33:32【系统运维】8人已围观

简介【.com快译】我最近一直在做一辅助项目Style Check和Bedrocss），就像我其他任何长期项目一样，我已经到了想要添加favicon的地步。于是，我决定尝试使用 SVG 图标，在BOO S

【.com快译】我最近一直在做一辅助项目（Style Check和Bedrocss），知道就像我其他任何长期项目一样，然还我已经到了想要添加favicon的知道地步。

于是然还，我决定尝试使用 SVG 图标，知道在BOO Safari浏览器上是然还足以支持的，但对于一些需求还不是知道达到要求。如果在不受支持的然还浏览器上没有显示图标，也是知道可以接受的。

通过使用 SVG，然还可以获得很多的知道好处，例如：

• 单个文件的然还清晰图像质量

• 对表情符号的支持

• 内联图标（无需链接资源）

• 暗模式检测

为了了解如何将 SVG 图标添加到项目中，因此，知道通过对以下示例（除了表情符号）进行操作，然还我们将使用一个非常基本的知道圆形 SVG：

将 SVG Favicon 添加到 HTML

将favicon添加到网站的语法同以往操作一样，同样适用于 SVG 收藏夹图标（减去文件扩展名）。

在 HTML 文件的<head>标签中，放置一个<link>元素，其rel属性设置为“icon”，href属性设置为图标所在的亿华云计算路径。

因为我们使用的是 SVG，所以图标可以是任何你想要的大小，只要确保画布是方形的。

如果需要搜索免费图标，icones是一个很好的资源，或者可以使用penpot创建自己的图标。

将 SVG Favicon 内联为 Data-URI

在切换到 SVG 收藏夹图标后，我尝试做的第一件事是看看是否可以将它们与内联格式一起使用，而不是链接到单独的文件。

曾经在内联图像或背景中使用过 Data-URI 技巧，它的效果非常好，并且，也适用于网站图标。

不要链接到路径，而是在整个 SVG 代码前加上data:image/svg+xml;utf8,（包括最后一个逗号）并将整个内容传递给href属性。

我真的网站模板很喜欢这种方法，因为如果忘记将图标文件放在某个文件夹中的某个位置，我可以将此代码复制/粘贴到任何项目（我的大多数副项目都使用相同的图标）。

当然，你可能会觉得这样使用内联 SVG 图标不太好，因为这样会占用内存，并且在每个页面上添加内联 SVG 会增加 HTML 的大小。

如果只有一个网站要处理，这可能不是什么大问题，但对于一个维护多个网站并使用同一个favicon的人来说，是一个不错的选择。

使用表情符号表达Favicon

Lea Verou在推特上展示了如何将表情符号添加为Favicon，使用方法特别简单。

语法的工作原理与之前相同，由于SVG通过<text>元素支持文本内容，并且表情符号几乎都是文本，因此可以在 SVG 中将放置任何表情符号（可能需要四处移动以适应正确的位置一些移动来适应）。

这使得创建favicon非常容易，而无需创建自定义favicon。查看Bryson Reece提供的emojicon.dev，可以得到一个表情符号列表，源码库点解其中任何一个，将整个favicon片段复制到剪贴板上。

除此之外，Wes Bos还创建了fav.farm。这是一项第三方服务，将为你生成网站图标。可以使用你想要的表情符号直接链接到他的服务。

开发社区的创造力从未停止，在那里有很多很酷、聪明和有创意的开发者。

添加暗模式检测

我们可以在SVG中添加一个<style>标记，并使用prefers color scheme media查询根据用户的暗模式首选项更改图标。

在本例中，我直接针对SVG和<circle>，但你也可以使用类。对于定制SVG，你可能需要这样做。

SVG中的<style>标记包含在该XML文档中，因此你不必担心样式会泄漏到应用程序的其余部分中。

【译稿，合作站点转载请注明原文译者和出处为.com】

很赞哦!（72123）

上一篇：利用提升和转移的方法进行数据中心迁移的指南

下一篇：微型数据中心如何实现边缘计算?

站长推荐

友情链接

您现在的位置是：亿华云 > 系统运维

SVG Favicon FTW 你不知道的居然还有这些！

相关文章

热门文章

站长推荐

友情链接