favicon 早就不是一张图了。浏览器、手机、操作系统各自会取不同尺寸放进不同位置——浏览器标签页、书签、iOS 主屏、安卓任务切换器。只放一张 32×32 的 PNG,标签页里能用,但别人把你的站存到手机上时就会糊。放全套,每个位置都能拿到清晰的图标。

下面讲清楚你到底需要哪些尺寸、每个是干什么的,以及这份清单为什么长成这样。

真正要用到的尺寸

Favicon 尺寸指南:一个网站到底需要哪些尺寸 — visual 1
真正要用到的尺寸

大多数网站用六种 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,这个文件依然值得放上。

为什么这么多?快速过一遍

Favicon 尺寸指南:一个网站到底需要哪些尺寸 — visual 2
为什么这么多?快速过一遍

清单这么长,是因为这个图标会以差异极大的物理尺寸出现。

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,每个浏览器、手机和操作系统都能拿到它想要的那张清晰图标。