直接回答：favicon 没有唯一的尺寸。浏览器标签页要 16×16，它的高分屏兄弟要 32×32，Windows 快捷方式要 48×48，iOS 主屏要 180×180，Android 要 192×192 和 512×512。覆盖前三者的经典做法是一个 ICO 文件；其余的是几个 PNG 加几行声明。本文就是完整的地图：每个尺寸、用在哪、以及服务它的准确代码。
尺寸对照表
| 尺寸 | 使用场景 | 格式 |
|---|---|---|
| 16×16 | 浏览器标签页、地址栏、历史记录 | ICO |
| 32×32 | 高 DPI 标签页、Retina 屏幕 | ICO |
| 48×48 | Windows 桌面快捷方式、安装图标 | ICO |
| 180×180 | iOS 主屏（apple-touch-icon） | PNG |
| 192×192 | Android 主屏、Chrome 应用列表 | PNG |
| 512×512 | Android 启动画面、PWA 安装 | PNG |
六个尺寸覆盖所有主流场景。下文解释每一行为何存在，以及边角情况在哪里。
ICO：一个文件装三个尺寸
ICO 容器是 favicon 的原始格式，它唯一的超能力是在单个文件里装多个分辨率。一个构建良好的 favicon.ico 装着 16、32 和 48；浏览器或操作系统读文件开头的目录，挑出合适的条目。这个目录的字节级布局见我们的 ICO 格式深度解析。
之所以要手工制作小尺寸而不是让渲染器直接缩小你的 logo：16×16 一共只有 256 个像素。自动缩小会把精细图形糊成一团；为这个尺寸专门绘制或至少修过的版本才能保持可辨认。把源图拖进 PNG 转 ICO，标准尺寸会自动打包好。
两个事实让 ICO 在 2026 年依然绕不开。有史以来每个浏览器都读它。而且浏览器会对任何没有声明的页面自动请求 /favicon.ico——RSS 阅读器、链接预览和爬虫也会往那里找。根目录放一个 favicon.ico，是白送的覆盖面。
PNG favicon 与 sizes 属性
现代浏览器接受按尺寸声明的 PNG favicon：
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
sizes 属性的意义在于让浏览器在下载之前就能选——没有它，所有声明的文件可能都被下载，事后才分胜负。同分辨率下 PNG 比 ICO 小，生成也更简单，但它只在浏览器看得懂这些声明的地方有效。老浏览器完全无视它们——所以 PNG 是 ICO 的补充，不是替代。
apple-touch-icon：180×180
当有人把你的网站存到 iOS 主屏时，Safari 会找 apple-touch-icon.png。标准尺寸是 180×180；iOS 会为更小的场景自行缩小，而且——这点常让人意外——它会自己给图标加圆角、还可能加背景。所以交付一张方形、不透明背景的图；透明区域在老版本 iOS 上会被合成到黑色上。
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
即使不写这行标签，这个文件也会按惯例从 /apple-touch-icon.png 被请求，和 favicon.ico 一个道理。
Android 和 Chrome：manifest 里的 192 和 512
Android 上的 Chrome 从 web app manifest 读图标。重要的尺寸有两个：主屏图标 192×192，启动画面和安装提示 512×512。
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
在页面里引用一次 manifest：
<link rel="manifest" href="/site.webmanifest" />
SVG favicon：有前途，但还不够
SVG favicon 一个文件适配所有场景，Chromium 和 Firefox 多年前就支持了：
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
钉子户是 Safari，至今仍无视 SVG favicon——它唯一的类 SVG 机制是 mask-icon：给固定标签页用的单色 SVG，带主题色：
<link rel="mask-icon" href="/icon-mask.svg" color="#1a1a1a" />
SVG 是叠在 ICO 和 PNG 之上的优秀渐进增强。但它还不是替代品。
完整的 head 声明
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
六个文件，六行代码，全场景覆盖。ICO 那行的 sizes="any" 告诉浏览器容器里有多个分辨率，让它挑选而不是默认 16×16。
生成这些文件
从一张 512×512 以上的方形源图开始，然后：用 PNG 转 ICO 或 WebP 转 ICO 打包容器，缩出 180/192/512 的 PNG，manifest 手工接好。从原始 logo 到上线图标的完整流程见 如何制作 favicon。转换器里的一切都在你的浏览器本地运行——整个过程中唯一的上传，是你自己把文件推到你自己的服务器上。