创建可适配主流浏览器的favicon集合
✏️
Favicon（favorite icon）是与某个网站或网页相关联的小图标。它通常显示在浏览器地址栏的左侧、收藏夹列表中以及标签页标题前，可帮助用户快速识别不同的网站或网页。
创建favicon的方法有两种
- 将名为“favicon.ico”的文件放置在网站的根目录下。这是最传统的方法，被所有浏览器支持。
- 在HTML代码的
<head>部分中添加<link>标签，指向favicon图标或者图标配置文件。这种方法支持更多格式的图标，例如PNG、SVG等，但各家浏览器的要求不尽相同。Andrey Sitnik提到，只需要准备6个文件即可适配2024年主流的桌面浏览器以及iOS、Android两大移动操作系统1。
| 文件 | 特性 | 适用范围 |
|---|---|---|
| ICO | 所有 | |
| SVG+XML | 无损缩放、动态样式 | Firefox, Chrome, Edge (Chromium), Opera |
| PNG | iOS主屏幕图标 | Safari |
PNG + webmanifest
|
Android 主屏幕图标 | Chrome & Edge (Chromium) |
PNG + browserconfig.xml
|
Windows Metro 磁贴 | Edge Legacy / IE 11 on Windows 8.1 & 10 / Windows Phone 8.1 / Windows 10 Mobile |
位图图标
通常会用到以下几种尺寸的位图图标：
| 浏览器 | 尺寸 |
|---|---|
| 通用 | 16x16 或 32x32 |
| Safari | 180x180 |
| Android Chrome | 192x192 512x512 |
| Metro磁贴 | 150x150 |
可以在设计软件手动导出以上分辨率，也可以只导出最高分辨率，使用RealFaviconGenerator生成全尺寸图标包。
PWA图标
PWA的信息由webmanifest文件提供2，2014年以后的Chromium内核浏览器均支持在webmanifest中定义主屏幕图标3：
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
在 webmanifest 文件中多声明一行 "purpose": "maskable" 可以启用 Android 遮罩图标4：
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192", "purpose": "maskable" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
]
}
不过要注意遮罩图标与非遮罩图标的边距是不同的，直接使用非遮罩图标可能会导致图标的一部分被裁切掉。解决方法可以是在设计阶段就做好窄边距、宽边距两个版本，也可以只出一个窄边距图标，再用maskable.app转化成适配遮罩的宽边距版本。
Windows磁贴图标
Windows 8.1 & 10 / Windows Phone 8.1 / Windows 10 Mobile 等系统上的 Edge Legacy / IE 11，将网页固定到开始菜单的图标。
虽说Windows 11与Chromium内核的新版Edge已经弃用了Metro UI，但截止2024年4月，Win8.1与Win10仍然有高达70%左右的市场占有率5，其中必然也有一些用户仍然在使用老版Edge，是否放弃适配Metro磁贴还是看主观喜好吧，毕竟最少只要再额外加两个文件就能适配Metro UI，我个人倾向于适配。
Win8.1与Win10的Metro磁贴图标由放置在站点根目录的browserconfig.xml文件定义，这个文件不需要在网页head引用，因此不可使用其他名称，修改背景色
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
另外，即使不建立browserconfig.xml，也可以在网页的head部分指定磁贴背景色，例如这段meta标签指定了磁贴的背景是灰色：
<meta name="msapplication-TileColor" content="#403F5F">
矢量图标
SVG是一种基于XML的矢量图形格式，可以使用CSS媒体查询来动态切换SVG图像的样式——例如更改图形的填充颜色，以提高深色模式下的阅读舒适度。
SVG favicon可以被2014年之后的Firefox以及2020年之后的Chromium内核浏览器支持，可惜Safari暂时还不支持6。
可以使用SVG Favicon Generator生成根据浏览器亮色/暗色模式动态反转的矢量图标。
如果有其他的需求，也可以用文本编辑器打开SVG文件，自行编写其中的CSS代码。例如，本站的图标在“浅色模式显示为深蓝色，深色模式显示为白色”的效果，是由以下CSS实现的：
@media (prefers-color-scheme: light) { #foreground { fill: #403f5f; } }
@media (prefers-color-scheme: dark) { #foreground { fill: #ffffff; } }