网站图标到底要多少尺寸？全平台 favicon 生成清单
上周帮一个朋友上线新站，他用一张 64×64 的 PNG 直接塞进 <link rel="icon">，桌面浏览器标签页看着还行。等他把站点添加到 iPhone 主屏，图标糊成一坨色块，整个 logo 都看不出形状。原因很简单：iOS 主屏要的是 180×180，他那张源图根本不够放大。
favicon 不是一张图，是一组图。浏览器标签页、收藏夹、iOS 主屏、安卓 PWA、Windows 磁贴，各取各的尺寸。一张图走天下，结果就是某些场景正常、某些场景灾难。下面这份清单是我每次新站上线照着填的。
各平台要什么尺寸
记住几个关键数：16、32、180、192、512。其余是锦上添花。
| 用途 | 尺寸 | 文件 | 配在哪 |
|---|---|---|---|
| 浏览器标签页（标准） | 16×16、32×32 | favicon.ico 或 PNG | <link rel="icon"> |
| 浏览器标签页（高清屏） | 32×32、48×48 | PNG | <link rel="icon" sizes="32x32"> |
| iOS 添加到主屏 | 180×180 | apple-touch-icon.png | <link rel="apple-touch-icon"> |
| 安卓 PWA（manifest 必填） | 192×192、512×512 | PNG | manifest.json 的 icons 数组 |
| Windows 磁贴（老 IE/Edge） | 144×144 | PNG | browserconfig.xml 或 meta 标签 |
| Safari 固定标签（macOS） | 32×32 单独一张 | SVG 或 PNG | <link rel="mask-icon">（已逐步淘汰） |
iOS 这一项最容易被忽略。苹果的主屏图标走的是 apple-touch-icon，要求 180×180，且 iOS 会自动给图标加圆角和一层底色，所以源图最好是正方形、四周留白、别自带圆角。
安卓 PWA 是另一套体系。只要你想让站点能「装到桌面」像原生 App 一样打开，就得有 manifest.json，里面 icons 数组必须包含 192×192 和 512×512 两张 PNG，少一张 Lighthouse 就会报可安装性扣分。
Windows 磁贴现在用得少了，但企业内网、Windows 商店场景还能碰上。144×144 这张图配在 browserconfig.xml 里，老 Edge 和 IE 磁贴会读。
源图怎么准备
源图决定一切。我用过的最惨的一次：客户给了张精细的插画当 logo，里面有十几个细线条装饰。缩到 16×16 那一刻，整张图变成几个看不出形状的色块，比不放大还难看。
源图要满足三个条件：
- 尺寸 ≥ 512×512。因为最大输出要 512，源图小于这个数就得放大，放大必糊。
- 简洁高对比。线条少、色块大、轮廓清楚。一张字母标、一个几何图形最理想。
- PNG 带透明。JPEG 没有透明通道，强加上去会在标签页里出现白色或灰色的方框边。
实现层面，前端工具一般用 Canvas 把源图缩到目标尺寸再 toDataURL 导出 PNG，逐个尺寸来一遍。生成多张 PNG 的同时，把对应的 <link> 标签和 manifest 配置拼出来，复制就能用。
HTML link 标签怎么配
一份覆盖主流场景的 <head> 配置长这样：
<!-- 桌面浏览器 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- iOS 主屏 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- 安卓 Chrome 取色（可选） -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<!-- 老浏览器回退，ICO 文件本身能打包多个尺寸 -->
<link rel="shortcut icon" href="/favicon.ico">最后一行那个 .ico 是兜底用的，IE 和一些老浏览器只认这个文件名。ICO 格式本身可以在一个文件里塞多个尺寸（16、32、48 常见），细节是另一篇文章的事，这里知道它是「老浏览器回退」就够了。
manifest.json 怎么写
PWA 必备。文件放站点根目录，HTML 里再引用：
<link rel="manifest" href="/site.webmanifest">site.webmanifest 内容：
{
"name": "我的站点",
"short_name": "站点",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}icons 里至少要有 192 和 512 两项。安卓安装时会根据设备 DPR 自动挑合适的尺寸，少了就报错或者用模糊的图凑数。
实操：一次生成全套
与其手写 Canvas 脚本批量缩放，不如直接上传一张源图到 UPTools Favicon 生成器，选好尺寸，它会在浏览器里把 16、32、48、180、192、512 全部生成出来，附带对应的 <link> 标签和 manifest 配置，打包下载。所有处理在本地，图片不上传服务器。
一个常见坑：换图标后浏览器标签页死活不更新。这是强缓存。强刷一次，或者在文件名后加版本号 favicon.ico?v=2，立刻见效。
三句话总结
favicon 是一组图不是一张图：浏览器标签页用 16/32，iOS 主屏要 180，安卓 PWA 在 manifest 里写 192 和 512，Windows 磁贴 144。源图准备一张 ≥512×512、简洁高对比、带透明的 PNG，缩成小尺寸才不糊。.ico 留给老浏览器做兜底，正经覆盖各平台靠 PNG 加上 link 标签和 manifest。
相关文章