如今的 favicon 尺寸归结起来只有五个文件：一个 32×32 的 favicon.ico、一个 SVG 图标、一个 180×180 的 Apple touch icon，以及 Web 应用 manifest 中 192×192 和 512×512 的两张 PNG，其中一张为 maskable。其他的，比如 57×57 的 Apple 图标、Windows 磁贴或额外的 PNG 尺寸，都是旧时代的遗留，可以去掉。
尺寸表
| 文件 | 尺寸 | 使用方 | 说明 |
|---|---|---|---|
favicon.ico | 32×32（也可以同时包含 16 和 48） | 所有浏览器、RSS 阅读器，以及任何请求 /favicon.ico 的程序 | 即使 HTML 声明了其他图标，也请把它放在站点根目录。 |
favicon.svg | 任意，viewBox 为正方形 | Chrome、Edge 和 Firefox 的标签页 | 任何尺寸下都清晰，还能在深色模式下切换颜色。 |
favicon-96x96.png | 96×96 | Google 搜索 | 如果已声明 Apple touch icon，这个文件可选，因为 Google 两者都会读取。 |
apple-touch-icon.png | 180×180 | iPhone 和 iPad 主屏幕、Google 搜索 | 背景要不透明。圆角由 iOS 自己处理。 |
| Manifest 图标 | 192×192 | 安卓主屏幕 | 写在 Web 应用 manifest 的 icons 中。 |
| Manifest 图标 | 512×512 | 安装提示、启动画面 | Chrome 的安装条件要求有 192 和 512 两个图标。 |
| Maskable 图标 | 512×512 | 安卓自适应图标 | "purpose": "maskable"，logo 放在中央 80% 的圆形范围内。 |
浏览器标签页：favicon.ico 和 SVG
标签页以 16 CSS 像素显示图标，在高密度屏幕上就是 32 个设备像素，所以 favicon.ico 里的 32×32 图像最重要。想加的话，可以把 16 和 48 也放进同一个文件，浏览器会选最接近的那个。
SVG 图标一个文件就覆盖所有尺寸。它还可以带 prefers-color-scheme 媒体查询，让深色 logo 在深色标签页上变成浅色。先声明带 sizes="32x32" 的 ICO，再声明 SVG：支持 SVG 的浏览器会用 SVG，其余的退回到 ICO。
Google 搜索
Google 的 favicon 规范要求图标为正方形，至少 8×8 像素，并建议大于 48×48。支持的格式有 BMP、GIF、ICO、PNG、JPEG、PPM 和 TIFF。SVG 不在其中，所以只有 SVG 的网站，Google 无图可用。Google 会同时读取 rel="icon" 和 rel="apple-touch-icon"，因此只要声明了 180×180 的 Apple touch icon，就已经满足尺寸建议。如果想要专用文件，96×96 的 PNG 就可以。
iPhone 和 iPad
用户把你的网站添加到主屏幕时，iOS 使用 Apple touch icon。180×180 是当前 iPhone 的尺寸（60 点，3 倍屏）；iPad 缩小它没有问题，所以一个文件就够。透明区域在主屏幕上会变成黑色，请给图标加上纯色背景。没有这个图标时，iOS 会退回到页面截图，或在素色底块上显示一个字母。
安卓和可安装的 Web 应用
安卓和 Chrome 从 Web 应用 manifest 中读取图标。192×192 的图标用在主屏幕上；512×512 的图标出现在安装对话框和启动画面中。
Maskable 图标是单独的一张 512×512 图片，图案铺满整个正方形。安卓会把它裁成手机使用的形状：圆形、squircle 或圆角方形。把 logo 放在直径为图片 80% 的居中圆内，就能适应所有遮罩。没有 maskable 图标时，安卓会把你的常规图标缩小，放在白色圆圈上。
HTML 代码
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">以及 site.webmanifest 中的图标部分：
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]manifest 请以 application/manifest+json 提供，每个图标也要带上它真实的图片类型。如果服务器对 /favicon.ico 返回的是状态码 200 的 HTML 页面，图标就会失效，尽管网络面板里看起来一切正常。单页应用经常这样。
可以去掉的尺寸
- 57、60、72、76、114、120、144 和 152 px 的 Apple touch icon。iOS 会缩放 180 px 的那个。
mstile-*.png、browserconfig.xml和msapplication-*标签。它们服务于 Windows 8 和 10 的开始屏幕磁贴。- Safari 的
mask-icon。Safari 12 及以后的固定标签页使用常规 favicon。 - 当
favicon.ico已经包含 16×16 和 32×32 时，单独的 16×16 和 32×32 PNG 链接。
检测你的图标集
Favicon Checker 会抓取你网站上的上述每个文件，测量真实的尺寸和格式，并展示图标在标签页、Google、iOS 和安卓上的效果。