各尺寸用在哪
| 尺寸 | 文件 | 使用场景 | 必要性 |
|---|---|---|---|
| 16×16 | favicon.ico | 浏览器标签页（1x 屏） | 必需 |
| 32×32 | favicon.ico 内嵌 | 标签页（Retina）、任务栏 | 必需 |
| 48×48 | favicon.ico 内嵌 | Windows 高 DPI 缩放 | 推荐 |
| 180×180 | apple-touch-icon.png | iPhone/iPad「添加到主屏幕」 | 必需 |
| 192×192 | manifest 引用 | Android 主屏图标 | PWA 必需 |
| 512×512 | manifest 引用 | Android 启动画面、PWA 安装页 | PWA 必需 |
| 512×512 | maskable 版本 | Android 自适应图标（圆形裁切安全区） | PWA 推荐 |
favicon.ico 其实是个容器
favicon.ico 不是单张图，而是能内嵌多个尺寸的容器格式。现代做法是内嵌 16/32/48 三个 PNG 图（PNG-in-ICO），浏览器按场景自动取用。只放一个 16×16 的老式 ico 在 Retina 屏上会模糊。
最小可用方案（3 个文件）
不打算做 PWA 的站点，这三个文件就够了。HTML 里引用：<link rel="icon" href="/favicon.ico" sizes="any"> 加 <link rel="apple-touch-icon" href="/apple-touch-icon.png">。
- favicon.ico：内嵌 16/32/48 三尺寸，覆盖桌面浏览器全部场景
- apple-touch-icon.png：180×180，覆盖 iOS 主屏
- icon.svg（可选）：矢量 favicon，支持的浏览器优先使用，任何 DPI 都清晰
完整 PWA 方案（加 manifest）
要让网站能「安装」到手机主屏，需要 manifest.json 声明 192 与 512 两个尺寸，且 512 建议提供 maskable 版本——Android 自适应图标会把图标裁成圆形/圆角方形，maskable 图要求关键内容集中在中央 80% 安全区内，四周留出血。
- 设计稿从 512×512 起步，向下缩放生成所有尺寸（向上放大会糊）
- maskable 图标四周留至少 10% 的纯色/背景边距
- manifest 里 icons 数组按尺寸从小到大声明，purpose 区分 any 与 maskable
一张原图生成全套 favicon
Favicon 生成器