搜索“网站图标尺寸”，仍会看到从 2014 年沿用至今、包含十五个文件的清单。实际上，如今六种尺寸就能覆盖浏览器标签页、搜索结果、iOS、Android 和 PWA。下面介绍具体尺寸及原因。
真正需要的尺寸
每一行都对应推荐图标包中一项有文档依据的用途。这份表格优先选择精简、兼容性好的组合，而非收集各种历史版本。
| 文件 | 尺寸 | 用途 |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | 标签页、书签、旧版浏览器、抓取程序 |
| favicon.svg | 矢量，正方形 | 现代浏览器，任意尺寸都清晰，支持深色模式 |
| favicon-96x96.png | 96×96 | Google 移动端搜索结果 |
| apple-touch-icon.png | 180×180 | iOS 和 iPadOS 主屏幕，不使用透明背景 |
| web-app-manifest-192x192.png | 192×192 | Android 主屏幕，在网页应用清单中声明 |
| web-app-manifest-512x512.png | 512×512 | PWA 启动画面，可遮罩（maskable）版本 |
为什么把 16、32 和 48 放在同一个 .ico 中
ICO 是一种容器格式：单个文件可以保存多张图片，由浏览器选择与显示场景匹配的一张。这正是我们需要的，因为不同场景请求的尺寸并不相同。
16×16 适用于普通屏幕上的标签页。32×32 用于高像素密度屏幕及其他浏览器界面。48×48 补全这一组合，也符合 Google 搜索结果网站图标文档中关于 48 倍数的规则。
只包含 16×16 的 .ico 是最常见的错误：在 Retina 屏幕上，图标会被放大，看起来一直模糊不清。
iOS 用 180×180，Android 用 192 和 512
iOS 不通过网页应用清单读取主屏幕图标，而是查找 apple-touch-icon 标签。只需一张 180×180 图片，就能覆盖较新的 iPhone 和 iPad。对于旧设备，系统会自行缩小。
Android 则通过网页应用清单读取图标。两个条目就够了：192×192 用于主屏幕图标，512×512 用于网站安装为应用后的启动画面。512 版本应声明 purpose 为 "maskable"，表示绘制时已考虑圆形或圆角正方形裁切。
对于可遮罩图标，请将关键内容保持在中央 80% 的区域内。外侧部分可能因手机厂商而被裁切。
应该从什么源图片开始
最佳起点是 SVG，它可以无损缩放到上述任意尺寸。没有 SVG 时，使用至少 512×512 像素的正方形 PNG，这样即使 Android 启动图标也只需缩小，不必放大。
带文字的横向标志不适合 16×16：在这个尺寸下，一整词只会糊成几个像素。请提取图形符号，或在对比鲜明的背景上使用一两个字母。
最后，检查浅色和深色背景下的对比度：黑色标志在深色主题标签页中会消失。这正是 SVG 网站图标深色模式版本的用途。
不再需要的尺寸
旧生成器仍会输出历史集成所需的文件，例如 Windows 磁贴使用的 mstile-150x150.png 和 browserconfig.xml。只有明确需要支持这些界面时，才添加这些文件。
apple-touch-icon-57x57、60x60、72x72、76x76、114x114、120x120、144x144 和 152x152 这一长串文件，来自 iOS 还不能自行调整尺寸的年代。一张 180×180 图片即可取代它们。
删除没有用途的声明可以精简代码仓库和 HTML。移除现有集成前，请先检查项目实际支持的浏览器与平台。
一手资料
常见问题
还需要 favicon.ico 吗？
需要，但只需放在网站根目录。现代浏览器优先使用 SVG，但许多抓取程序、聚合服务和邮件客户端仍会直接请求 /favicon.ico，而不读取 HTML。这个文件只有几 KB，建议保留。
Google 搜索结果使用多大的网站图标？
Google 要求图标边长为 48 像素的倍数，通常以 48×48 显示。96×96 PNG 或 SVG 都能轻松满足。图标必须允许抓取，不能被 robots.txt 阻止。
网站图标可以是长方形吗？
技术上可以，但视觉效果不好。所有显示场景都预留正方形区域，长方形图片要么变形，要么居中后留下空白。请始终从正方形开始，必要时在符号周围添加留白。