前阵子帮朋友部署个人站，他甩给我一个 512×512 的 PNG 说「这就是图标」，结果浏览器标签页里显示的却是模糊的小方块。我这才意识到，很多人对 favicon 尺寸的理解还停留在「给一张图就行」。实际上 favicon 不是一张图，而是一组不同尺寸的图标，系统会根据显示位置自动挑合适的那张。
为什么 favicon 需要多尺寸
浏览器标签页、书签栏、任务栏、手机主屏、应用商店——这些地方显示图标的大小从 16 像素到 180 像素不等。如果只给一张大图，系统在缩到 16×16 时要么糊成一团，要么把细节挤没。
标准做法是用一个 ICO 文件把多档尺寸打包在一起（16/32/48/64/128/192/256/512），系统按显示环境自行挑选最匹配的那一档。所以「选尺寸」这一步，本质上是在决定你的图标会在哪些位置保持清晰。
各尺寸档对应什么位置
下面这张表是我按常见浏览器和系统的显示场景整理的，具体位置会随版本变化，部署前用目标环境预览确认最稳妥：
| 尺寸 | 常见显示位置 | 建议 |
|---|---|---|
| 16×16 | 浏览器地址栏、书签栏小图标 | 必选，最容易被缩糊的一档 |
| 32×32 | Windows 任务栏、部分收藏夹 | 必选 |
| 48×48 | Windows 资源管理器大图标、桌面快捷方式 | 做桌面/程序图标时选 |
| 64 / 128×128 | 高分屏下的地址栏与文件管理器 | 追求清晰度时加 |
| 192×192 | 安卓/PWA 的 manifest 图标 | 做渐进式 Web 应用时选 |
| 256×256 | Retina/高分屏下的清晰图标 | 多数网站推荐包含 |
| 180×180 | Apple 设备主屏（apple-touch-icon） | 单独导出 PNG，不进 ICO |
注意最后一档 180×180：苹果设备主屏图标走的是另一条路，要求一张独立的 apple-touch-icon.png，不能塞进 ICO 里。所以它是「额外准备」，不是 ICO 内部的一档。
用工具一次生成多尺寸 ICO
用 NBTools 的 图片转 ICO 工具，全程在浏览器本地处理，文件不上传：
- 准备一张方形、带透明背景的 PNG（建议 256×256 或 512×512 源图）
- 上传后勾选需要的尺寸档，例如做网站 favicon 选 16/32/48/256
- 点「转换为 ICO」，工具会把你勾选的每一档都打包进同一个 ICO 文件
- 下载后命名为
favicon.ico放到网站根目录
源图建议用 256 或 512 这种较大的正方形，这样缩到 16×16 时细节丢失更少。低于 128×128 的源图缩到小尺寸容易糊。
部署时还要补的两张图
- favicon.ico：根目录放一份，覆盖 PC 浏览器绝大多数场景
- apple-touch-icon.png（180×180）：iPhone/iPad 主屏「添加到主屏幕」时用的图标，单独导出一张 PNG
- manifest 图标（192/512）：做 PWA 时在 manifest.json 里声明，安卓主屏和安装横幅会用到
在 HTML 的 <head> 里用 <link rel="icon" href="/favicon.ico"> 和 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 分别引用即可。
常见问题
只给一张大图不行吗
系统会把大图强行缩到目标尺寸，小尺寸（如 16×16）下细节会被挤掉、出现锯齿或模糊。多尺寸档让每个位置都用「刚好合适」的图，清晰度高很多。
ICO 里包含的尺寸越多越好吗
不是。尺寸越多文件越大，但超出你实际需要的档位意义不大。普通网站 favicon 勾 16/32/48/256 通常够用；做桌面程序或 PWA 再补 48/192。
苹果主屏图标为什么单独一张
苹果设备的「添加到主屏幕」走 apple-touch-icon 规范，要求独立 PNG（常见 180×180），与 ICO 是两套机制，所以得额外准备。