见微知著，细节上雕花：SVG生成矢量格式网站图标(Favicon)探究

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_215

Favicon是favorites icon的缩写，也被称为website icon（站点图标）、page icon（页面图标）或者urlicon（URL图标）。Favicon是与某个站点或网页相关联的图标，网站设计者可以多种方式建立这种图标，几乎所有浏览器都支持此功能，浏览器可以将favicon显示于浏览器的地址栏中，也可置于书签列表的网站名前，还可以放在标签式浏览界面中的页标题前：

我们定义一个favicon的方法是将一个名为“favicon.ico”的文件置于Web服务器的根目录下，IE的收藏夹（即书签）可以自动显示该文件。后来出现了一种更为灵活的方法，即使用HTML来为任何一个网页指示其图标所存储的位置：

大多数情况下使用ICO格式，现代浏览器也支持PNG（便携式网络图片）格式，和GIF（图形交换格式）动画图像格式：

现如今，我们可以使用另外一种矢量格式来创建favicon了，那就是SVG。

SVG格式favicon

SVG 能够在不损失质量的情况下放大和缩小，并且尺寸上比以往任何图片格式都小，它们还可以嵌入 CSS，甚至嵌入动画和媒体查询。这意味着如果在浏览器应用程序或书签栏中使用 SVG 图标，由于 SVG 内部提供的深色偏好样式，用户有可能获取与站点主题相关的（浅色或深色）图标。

首先在站点根目录建立favicon.svg文件：

接下来，添加svg路径path:

随后，在网站头部标签中，修改icon声明：

随后就可以在标签页中观察到svg格式的favicon了：

这里需要注意的是，两种不同的favicon声明方式并不是非此即彼，它们可以共存：

以Chrome为例子，浏览器会优先选择svg格式的图标进行展示，如果声明了png的favicon，那么png格式的图标也会被下载：

所以，如果出于性能层面考虑，可以只写一种声明，用来节约系统资源。

SVG样式

有的时候，在页面对比度层面，我们可以为svg图标设置前景色或者背景色来突出favicon：

也可以通过设置svg的viewBox属性来等比例缩小或者放大图标：

不仅仅支持内嵌，我们也可以将样式进行外联操作：

暗黑模式

通过在样式中添加媒体查询，我们可以为svg的图标添加“暗黑模式”，首先创建好光明模式：

这里，背景色为白色，前景色为黑色：

随后添加暗黑模式：

颜色正好相反，背景色为黑色，前景色为白色，动态切换效果是这样的：

这细节，也是没谁了。

Safari

没错，又是Safari，来看看svg格式的Favicon支持列表：

SVG Favicons on IE is fully supported on None of the versions, partially supported on None of the versions, and not supported on 5.5-11 IE versions. SVG Favicons on Edge is fully supported on 80-99, partially supported on None of the versions, and not supported on 12-79 Edge versions. SVG Favicons on Firefox is fully supported on 41-100, partially supported on 4-40, and not supported on 2-3 Firefox versions. SVG Favicons on Chrome is fully supported on 80-103, partially supported on None of the versions, and not supported on 4-79 Chrome versions. SVG Favicons on Safari is fully supported on None of the versions, partially supported on None of the versions, and not supported on 3.2-15.4 Safari versions. SVG Favicons on Opera is fully supported on 44-83, partially supported on None of the versions, and not supported on 9.5-66 Opera versions. SVG Favicons on Safari on iOS is fully supported on None of the versions, partially supported on None of the versions, and not supported on 3.2-15.4 Safari on iOS versions. SVG Favicons on Android Browser is fully supported on None of the versions, partially supported on None of the versions, and not supported on 2.3-99 Android Browser versions. SVG Favicons on Opera Mobile is fully supported on None of the versions, partially supported on None of the versions, and not supported on 10-64 Opera Mobile versions. SVG Favicons on Chrome for Android is fully supported on 97-100, partially supported on None of the versions, and not supported on below 97 Chrome for Android versions. SVG Favicons on Firefox for Android is fully supported on None of the versions, partially supported on None of the versions, and not supported on 95-98 Firefox for Android versions. SVG Favicons on Samsung Internet is fully supported on 13-16, partially supported on None of the versions, and not supported on 4-12 Samsung Internet versions.

连三星浏览器都支持了，然而，只有Safari不支持，不愧是苹果生态圈，可谓独领风骚，无出其右。

尝试苹果独有的mask-icon的声明方式另辟蹊径：

但这样的声明方式只支持单色的svg文件，同时也无法使用媒体查询的特性来控制图标颜色模式，所以，很明显，mask-icon是鸡肋，味同嚼蜡，蜡要沿着嘴角流下来了。

事实上，就算是苹果官网apple.com，也并没有使用mask-icon，就算坐等Safari支持原生svg favicon，苹果最快也要每六个月左右才更新一次 Safari，那时候，黄花菜都凉了。

除此之外，在Safari中调试svg的favicon也是令人痛苦的，需要走下面的流程：

1、退出Safari. 2、进入~/Library/Safari/Favicon Cache/目录 3、删除所有文件 4、进入~/Library/Safari/Touch Icons Cache/目录，重复第三步 5、进入~/Library/Safari/Template Icons/目录，重复第三步 6、清空废纸篓 7、再次打开Safari

才能查看Safari下最新的Favicon效果。

结语

鹌鹑嗉里寻豌豆，鹭鸶腿上劈精肉，于细枝末节处雕花，见微知著，对着favicon一番把玩之后，favicon.ico文件最好留着别删，因为也许还会有人在用IE访问您的站点也未可知，最后，代码开源于https://github.com/zcxey2911/svg_website_logo，聊博诸君一晒。

原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_215

相关链接