Favicon 尺寸：你真正需要的每一个尺寸
你需要的 favicon 尺寸是：用于浏览器标签页和书签的 16x16 和 32x32 PNG、用于 iOS apple-touch-icon 的 180x180，以及用于 Android 主屏幕和 PWA 安装的 192x192 与 512x512 PNG。一个包含 16、32 和 48 像素条目的 favicon.ico，可以应对任何直接请求 /favicon.ico 的场景。其余每个尺寸都是可选的，而且大多数网站一个都不发布。
为什么需要不止一种尺寸
浏览器标签页需要的图标大约在 16 到 32 像素宽。Android 主屏幕需要 192。PWA 启动画面需要 512。这些并不是同一张图片的缩放。在 16 像素下，一个标志只有大约 256 个像素可用，任何能在这里存活下来的东西，都必须比在 512 下看起来合适的版本简单得多。
当你声明了多种尺寸时，浏览器会挑选最接近的那个再进行缩放。只声明一个大图标，意味着每个小尺寸位置都要向下采样它，这就是标签页里灰色污渍的来源。只声明一个小图标，意味着每个大尺寸位置都要放大它，这就是主屏幕图标模糊的来源。
核心 favicon 尺寸
| 尺寸 | 用于 | 优先级 |
|---|---|---|
| 16x16 | 地址栏、旧版浏览器、书签 | 必备 |
| 32x32 | 浏览器标签页、现代浏览器 | 必备 |
| 96x96 | 桌面快捷方式、Windows 磁贴 | 可选 |
| 192x192 | Android 主屏幕、PWA 图标 | 必备 |
| 512x512 | 启动画面、高分辨率图标 | 必备 |
这些数字看起来是什么样
Apple touch icon 尺寸
| 尺寸 | 设备 |
|---|---|
| 57x57 | iPhone（非视网膜） |
| 60x60 | iPhone（视网膜） |
| 72x72 | iPad（非视网膜） |
| 76x76 | iPad（视网膜） |
| 114x114 | iPhone（视网膜） |
| 120x120 | iPhone（视网膜 HD） |
| 144x144 | iPad（视网膜） |
| 152x152 | iPad（视网膜 HD） |
| 180x180 | iPhone（视网膜 HD）主用 |
文件放在哪里
- 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，其代价也远小于一个模糊的主屏幕图标。