Favicon 尺寸——完整指南

2026 年你需要的每一个 favicon 尺寸、各自用途,以及要加到网站的确切 HTML。

1 分钟阅读

现代网站不止需要一个 favicon.ico。浏览器、iOS、Android 和 PWA 各自期望特定尺寸。用这份参考构建完整的图标集。

文件尺寸用途
favicon.ico16x16, 32x32, 48x48旧版浏览器标签页、书签、兜底
favicon-16x16.png16x16标准浏览器标签图标
favicon-32x32.png32x32高分屏标签页、Windows 任务栏
apple-touch-icon.png180x180iOS 主屏、iPad
favicon-192.png192x192Android 主屏、PWA
favicon-512.png512x512PWA 安装页、启动屏
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 兜底。

准备好动手试试了吗?