Favicon 尺寸——完整指南
2026 年你需要的每一个 favicon 尺寸、各自用途,以及要加到网站的确切 HTML。
1 分钟阅读现代网站不止需要一个 favicon.ico。浏览器、iOS、Android 和 PWA 各自期望特定尺寸。用这份参考构建完整的图标集。
| 文件 | 尺寸 | 用途 |
|---|---|---|
| favicon.ico | 16x16, 32x32, 48x48 | 旧版浏览器标签页、书签、兜底 |
| favicon-16x16.png | 16x16 | 标准浏览器标签图标 |
| favicon-32x32.png | 32x32 | 高分屏标签页、Windows 任务栏 |
| apple-touch-icon.png | 180x180 | iOS 主屏、iPad |
| favicon-192.png | 192x192 | Android 主屏、PWA |
| favicon-512.png | 512x512 | PWA 安装页、启动屏 |
| favicon.svg | 可缩放 | 现代浏览器、深色模式 |
我到底需要哪些尺寸?
要全覆盖,就用图标生成器生成上面所有尺寸,并加上下面的 link 标签。要最小化配置,favicon.ico + 180x180 apple-touch-icon + 32x32 PNG 就能覆盖绝大多数设备。
加到 '<head>' 的 HTML
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">常见问题
标准的 favicon 尺寸是多少?+
经典标准是浏览器标签用的 16x16,但现代 favicon 从 16x16 到 512x512 不等,以覆盖高分屏、iOS、Android 和 PWA。
Apple Touch Icon 是多大?+
180x180 像素。iOS 会按不同场景缩放,所以 Apple 推荐只准备这一个 180x180 尺寸。
Android / PWA 需要哪些尺寸?+
192x192 和 512x512,在 site.webmanifest 里声明。512x512 用于 PWA 安装和启动屏。
我需要 SVG favicon 吗?+
可选但推荐。SVG 可无损缩放,还支持深色模式变体。要为旧浏览器搭配 PNG 兜底。