Favicon 尺寸：你真正需要的每一个尺寸
你需要的 favicon 尺寸是：用于浏览器标签页和书签的 16x16 和 32x32 PNG、用于 iOS apple-touch-icon 的 180x180，以及用于 Android 主屏幕和 PWA 安装的 192x192 与 512x512 PNG。一个包含 16、32 和 48 像素条目的 favicon.ico，可以应对任何直接请求 /favicon.ico 的场景。其余每个尺寸都是可选的，而且大多数网站一个都不发布。
你真正需要的尺寸
| 尺寸 | 用于 | 保留吗？ |
|---|---|---|
| 16, 32, 48 | 浏览器标签页和书签，打包在 favicon.ico 内 | 保留 |
| 180x180 | 用于 iOS 主屏幕的 apple-touch-icon | 保留 |
| 192x192 | Android 启动器图标，在 manifest 中列出 | 保留 |
| 512x512 | PWA 启动画面和安装提示，在 manifest 中列出 | 保留 |
| SVG | 任何尺寸下都清晰的标签页图标，可适配深色模式 | 可选 |
为什么需要不止一种尺寸
浏览器标签页需要的图标大约在 16 到 32 像素宽。Android 主屏幕需要 192。PWA 启动画面需要 512。这些并不是同一张图片的缩放。在 16 像素下，一个标志只有大约 256 个像素可用，任何能在这里存活下来的东西，都必须比在 512 下看起来合适的版本简单得多。
当你声明了多种尺寸时，浏览器会挑选最接近的那个再进行缩放。只声明一个大图标，意味着每个小尺寸位置都要向下采样它，这就是标签页里灰色污渍的来源。只声明一个小图标，意味着每个大尺寸位置都要放大它，这就是主屏幕图标模糊的来源。
这些数字看起来是什么样
应该停止发布的尺寸
| 尺寸 | 曾用于 | 保留吗？ |
|---|---|---|
| 57, 60, 72, 76 | 用于 iOS 6 和更旧 iPad 的 apple-touch-icon | 移除 |
| 114, 120, 144, 152 | 用于旧款 iPhone 和 iPad 的 Retina apple-touch-icon | 移除 |
| 70, 150, 310 | 通过 browserconfig.xml 提供的 Windows 磁贴图标 | 移除 |
| 160, 196 | 各种旧版 Android 和 Chrome 快捷方式尺寸 | 移除 |
文件放在哪里
- public/
- favicon.ico16, 32 and 48 in one file
- favicon-16x16.pngAddress bar
- favicon-32x32.pngBrowser tabs
- favicon-96x96.pngDesktop shortcuts
- apple-touch-icon.png180x180, iOS home screen
- icon-192.pngAndroid home screen
- icon-512.pngPWA splash screen
- manifest.jsonLists the PWA icons
扁平地放在 public 根目录是惯例，因为其中好几个文件也会被按路径直接请求，中间并没有 link 标签参与。
Favicon 尺寸常见问题
最小的一套 favicon 尺寸是什么？
一个包含 16 和 32 的 favicon.ico、一张 180x180 的 apple-touch-icon.png，以及在你的 web app manifest 中列出的 192x192 和 512x512 PNG。这五个文件就能覆盖桌面浏览器、iOS 主屏幕、Android 和 PWA 安装。
iOS 还需要 57x57 和 72x72 吗？
只有在你要支持很老的 iPhone 和 iPad 时才需要。当前的 iOS 使用 180x180 的 apple-touch-icon，并在需要更小图标的地方向下缩放它，所以对几乎所有网站来说，一张 180 就够了。
更大的 favicon 会拖慢页面吗？
并不会有实质影响。图标是以个位数千字节计的小 PNG，浏览器只请求它需要的尺寸，而且它们会被高强度缓存。发布一张你从不使用的 512，其代价也远小于一个模糊的主屏幕图标。
我应该发布 Windows 磁贴图标吗？
不该。70、150 和 310 磁贴尺寸以及 browserconfig.xml 针对的是已停用的 Windows 动态磁贴。把它们去掉。
一个 favicon.ico 能包含多个尺寸吗？
能。.ico 格式是一个容器，在单个文件中包含 16、32 和 48。浏览器会从中挑选它需要的尺寸。