面对这么多设备、浏览器和平台，Favicon 尺寸确实让人困惑。你需要 6 个不同的文件吗？还是一个就够了？本指南帮你理清思路。
完整 Favicon 尺寸表
| 尺寸 | 文件名 | 用途 | 必需？ |
|---|---|---|---|
| 16×16 | favicon-16x16.png | 浏览器标签页（普通屏幕） | 推荐 |
| 32×32 | favicon-32x32.png | 浏览器标签页（Retina/高清屏）、任务栏 | 是 |
| 48×48 | favicon.ico（多尺寸） | Windows 桌面快捷方式 | 可选 |
| 180×180 | apple-touch-icon.png | iOS 主屏幕（iPhone/iPad） | 是 |
| 192×192 | android-chrome-192x192.png | Android 主屏幕、PWA 图标 | 推荐 |
| 512×512 | android-chrome-512x512.png | PWA 启动画面、应用商店 | 推荐 |
最简配置（3 个文件）
如果想保持简单，这 3 个文件覆盖了 99% 的实际场景：
- favicon.ico（32×32）— 通用兜底方案，所有浏览器都支持。
- apple-touch-icon.png（180×180）— 适用于 iOS 设备和部分 Android 启动器。
- site.webmanifest — 指向 192×192 和 512×512 图标，用于 PWA 支持。
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">提示：现代浏览器实际上更偏好 PNG 而非 ICO。如果你同时提供了 32×32 的 PNG 和 ICO，现代浏览器会使用 PNG 来获得更清晰的渲染。
完整配置（6 个文件）
为了在所有平台上获得最佳体验：
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">为什么不能只用一张大图？
一个常见的误区是只提供 512×512 的图标，期望浏览器自动缩小。为什么这样不好：
- 性能 — 512×512 的 PNG 可能超过 50KB。浏览器标签页只需要 16×16（不到 1KB），多了 50 倍的数据。
- 质量 — 把复杂的 Logo 从 512px 缩小到 16px 通常会变成模糊的一团。手动优化的小图标看起来好得多。
- ICO 兼容性 — 旧版浏览器和 Windows 快捷方式仍然需要 ICO 格式。
从一张图生成所有尺寸
好消息：你不需要手动创建每个尺寸。使用 Mzu favicondl 的图片转 Favicon 工具，上传一张高清图片即可自动生成上述所有尺寸，打包成即用的 ZIP 文件。
快速参考速查表
| 平台 | 所需尺寸 | 格式 |
|---|---|---|
| Chrome/Firefox/Edge 标签页 | 32×32 | PNG 或 ICO |
| Safari 标签页 | 32×32 | PNG 或 ICO |
| Google 搜索结果 | ≥48×48（48 的倍数） | 任意 |
| iPhone/iPad 主屏幕 | 180×180 | PNG |
| Android 主屏幕 | 192×192 | PNG |
| Windows 任务栏 | 32×32 | ICO |
| macOS Dock（PWA） | 512×512 | PNG |