favicon 要几种尺寸：一份能照抄的清单

设计与前端发布于 2026-10-31

「放一个 512×512 的 PNG 不就行了？」——不行，但也不算全错。浏览器确实会缩，问题是缩出来的 16×16 会很糊，而 16×16 恰恰是用户看得最多的那个。

原因是 16 像素太小，缩小过程无法保留细节：一个带文字的 logo 缩到 16px 之后只剩一团色块，而设计师在 512px 上看着完美。

最小可用集

文件	尺寸	用在哪
`favicon.ico`	16 / 32 / 48 多尺寸	浏览器标签页、书签、老 IE 兼容
`favicon.svg`	矢量	现代浏览器首选，支持暗色模式
`apple-touch-icon.png`	180×180	iOS 添加到主屏、Safari
`icon-192.png`	192×192	Android 桌面、PWA
`icon-512.png`	512×512	PWA 启动画面、应用商店
`icon-maskable-512.png`	512×512	Android 自适应图标

HTML 侧：

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

注意 favicon.ico 要带 sizes="any"，否则某些浏览器会优先挑 SVG 然后又回退失败。

为什么 .ico 还在

它是唯一一个「一个文件装多张图」的格式，浏览器可以按需取 16 或 32 版本。现代浏览器都支持 PNG favicon，但：

老的爬虫、RSS 阅读器、部分桌面程序只认 /favicon.ico
有些系统会在暗色标签栏上用 32 版本、亮色用 16 版本

所以 .ico 留着不亏。用图像工具把 16/32/48 三张打包成一个 .ico，多数在线转换器支持。

16×16 是独立的图，不是缩出来的

专业做法是单独画一版：去掉文字、只用最核心的图形、线条加粗到 1px 以上、像素对齐。

简化程度大致是：

512：完整 logo（含文字）
128：图形 + 短文字
32：只有图形
16：只有图形的最简轮廓，甚至可以只有色块

如果实在只有一个大图，至少保证它在 16px 下「能认出来是什么」——把图缩到 16px 看一眼，认不出就说明需要重画。

maskable：Android 会裁掉你的边

Android 的自适应图标会按不同厂商的形状（圆形、方形、水滴）裁切，只保证中间一个直径 80% 的圆形安全区可见。

所以 maskable 图标要把主体内容放在中间 80% 内，四周留出可被裁掉的背景色。直接把普通图标当 maskable 用，边角会被切掉。

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

purpose 字段不能省，否则系统不知道哪张可以裁。

改了图标浏览器不更新

这是最让人怀疑「服务器坏了」的问题。原因：favicon 的缓存极其顽固，而且是多层缓存（浏览器内存、磁盘、CDN、DNS 无关）。

对策按有效性排序：

改文件名：favicon-v2.ico。最可靠，因为 URL 变了。
在 <link> 上加查询串：favicon.ico?v=2。多数浏览器认，但部分 CDN 会忽略查询串。
清 CDN 缓存。
清浏览器缓存、重启浏览器。
用户手动访问 https://站点/favicon.ico 强制刷新。

_headers 或 Nginx 里给 ico 设短缓存（比如 1 天）也有帮助，但别设成 no-cache —— 那会让每次访问都重新下载，白白浪费请求。

暗色模式图标

SVG 图标可以用媒体查询切色：

<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

这个能力只有 SVG favicon 支持，.ico 和 PNG 都做不到。如果站点有暗色主题、图标又是深色的，加这一个能解决「暗色标签栏里看不见」的问题。

几个容易漏的地方

背景要透明还是纯色。透明 PNG 在深色标签栏上可能糊成一片；带纯色底反而更清楚。看你的图形和周边环境。
别用极细的线条。1px 线条在 16px 上会变成灰色噪点。
描边外扩。图形贴边时留 1~2px 内边距，避免被容器裁掉。
尺寸必须是精确值。192 写成 190 会导致某些校验工具报错，PWA 安装也可能失败。

制作流程

从 512×512 的源图开始，背景透明。
用图片压缩与缩放批量导出 192、180、48、32、16 五个尺寸 —— 一次设置、批量输出，比逐个另存快。
16 和 32 单独看一眼，必要时重新画一版。
需要转格式（比如 PNG 转 WebP 给 manifest 用）用图片格式转换。
多尺寸 .ico 用专门的 ico 打包工具合成。

清单总结：ico（16/32/48）+ svg + 180 + 192 + 512 + maskable-512，六件套覆盖目前所有主流场景。缺一个不会立刻坏，但会在某个特定设备上以「图标是空白」的形式暴露出来，而那种问题很难被自己发现 —— 因为你需要那台设备。