favicon 早就不是一张图了。浏览器、手机、操作系统各自会取不同尺寸放进不同位置——浏览器标签页、书签、iOS 主屏、安卓任务切换器。只放一张 32×32 的 PNG,标签页里能用,但别人把你的站存到手机上时就会糊。放全套,每个位置都能拿到清晰的图标。
下面讲清楚你到底需要哪些尺寸、每个是干什么的,以及这份清单为什么长成这样。
真正要用到的尺寸

大多数网站用六种 PNG 尺寸加一个老式 .ico 就覆盖了。对照如下:
| 尺寸 | 格式 | 用在哪里 |
|---|---|---|
| 16×16 | PNG(打进 .ico) | 浏览器标签页、地址栏、书签 |
| 32×32 | PNG(打进 .ico) | 高清标签页、Windows 任务栏快捷方式 |
| 48×48 | PNG | Windows 站点图标、部分安卓位置 |
| 180×180 | PNG | iOS 主屏(apple-touch-icon) |
| 192×192 | PNG | 安卓主屏、PWA 安装 |
| 512×512 | PNG | PWA 启动画面、应用商店、高分屏 |
favicon.ico 文件是个容器,把小尺寸(通常 16 和 32,有时含 48)打包在一起。老浏览器和 Windows 会按名字到你的站点根目录找它,所以尽管现代浏览器也乐意用 PNG,这个文件依然值得放上。
为什么这么多?快速过一遍

清单这么长,是因为这个图标会以差异极大的物理尺寸出现。
16 和 32 是日常的标签页图标。16 是经典尺寸;32 覆盖高分屏("Retina")——在那种屏上 16 会显得发虚。浏览器会按像素密度挑合适的那个。
48 是 Windows 的东西——用于站点快捷方式,在几个 32 覆盖不好的地方会更清晰。
180 是苹果的 apple-touch-icon。当有人在 iPhone 或 iPad 上点"添加到主屏幕",iOS 用的就是它。弄错了,iOS 要么抓一张缩小的截图,要么显示一个纯字母方块——都不像你的品牌。
192 和 512 是渐进式 Web 应用(PWA)的尺寸,在 manifest.webmanifest 文件里声明。192 是安卓主屏图标;512 喂给启动画面,其余需要时由系统下采样。如果你的站可安装,这两个没得商量。
需要比 512 更大的吗?
不需要。512×512 是网页 favicon 的实用上限——webmanifest 规范和各大平台差不多都到这儿封顶。如果你的源图是 1024 或更大,那当作起始图很好(有更多细节可供缩小),但你不会去发一个 1024 的 favicon。超过 512 的部分只是增加没人用得上的字节。
往上走真正重要的那条规则:从一张大的、正方形的源图开始。512×512 或 1024×1024 的原图能干净地缩到下面每一个尺寸。从一张很小的图开始,小尺寸就会发糊,因为一开始就没有足够的细节可保留。
按 16×16 能扛得住来设计
最难的是最小的那个。到了 16×16,细节繁复的 logo 会变成看不清的一团。几条各站通用的建议:
- 化简。 完整的文字标在 16px 下读不出来。用单个字母、字母组合,或你标志里最好认的那部分。
- 保持高对比,让形状在浅色和深色标签页背景上都清晰。
- 留一点留白——四边都顶满的图标在标签页里显得局促。
- 小尺寸下测一测。 把浏览器缩小,或者直接看真实的标签页。要是一眼认不出它是什么,就再简化。
生成整套
这些不用你手工做。把一张正方形图片丢进 Favicon 生成器,它一次性产出全套——favicon.ico、16/32/48/180/192/512 的 PNG、一个可直接用的 webmanifest,以及要粘进去的那段 <head> HTML。全部在你的浏览器里运行:图片从不上传,第一次访问后工具也能离线用。
你最终会得到的 HTML
作为参考,一套完整的 favicon 配置在 <head> 里大致长这样:
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
生成器会替你写好,直接粘进去即可。覆盖这六种尺寸加上 .ico 和 manifest,每个浏览器、手机和操作系统都能拿到它想要的那张清晰图标。
