没有唯一"正确"的 favicon 尺寸。现代网站需要多种尺寸才能在浏览器标签页、手机主屏幕、PWA 和搜索结果中都正常显示。这是完整的参考——请收藏。
核心 favicon 尺寸(快速参考)
| 尺寸 | 文件 | 使用位置 | 是否必需? |
|---|---|---|---|
| 16×16 | favicon-16x16.png | 浏览器标签页(经典) | 是 |
| 32×32 | favicon-32x32.png | 浏览器标签页(retina)、任务栏 | 是 |
| 48×48 | 内嵌于 favicon.ico | Windows 站点图标、旧浏览器 | 推荐 |
| 180×180 | apple-touch-icon.png | iOS 主屏幕、Safari 固定标签页 | 是 |
| 192×192 | android-chrome-192x192.png | Android 主屏幕、Chrome PWA | 是(PWA) |
| 512×512 | android-chrome-512x512.png | PWA 启动画面、高清 Android | 是(PWA) |
| 矢量 | favicon.svg | 现代浏览器、深色模式、Safari 固定标签页 | 推荐 |
推荐的源图片尺寸
始终从至少 512×512 像素的正方形图片开始(1024×1024 最理想)。好的生成器会将其缩小到上述所有尺寸,同时保持每个都清晰。绝不放大小图片——它会在 512×512 PWA 启动画面等较大尺寸下显得模糊。
为什么需要每种尺寸
16×16 和 32×32 — 浏览器标签页
这些是用户最常见的尺寸。16×16 是传统的默认值;32×32 在高 DPI(retina)显示屏上更清晰。请始终同时包含两者。
180×180 — Apple touch icon
当 iPhone 或 iPad 用户点击"添加到主屏幕"时,iOS 会使用此文件。Safari 在 Mac 上也将其用于固定标签页。它必须恰好为 180×180。
192×192 和 512×512 — Android 与 PWA
Android Chrome 和其他支持 PWA 的浏览器会从你的 site.webmanifest 中读取这些尺寸。192 是主屏幕图标;512 用于 PWA 启动时的全屏启动画面。
那么 Google 搜索结果中的 favicon 呢?
Google 会在移动端(以及越来越多桌面端)搜索中在你的结果旁显示一个小的 favicon。它取自你声明的 favicon——通常是 32×32 或 .ico。Google 推荐至少 48×48 的正方形图片(48 的倍数最理想)。确保你的 <link rel="icon"> 有效;否则 Google 会显示一个通用的地球图标。
.ico 文件:一个文件,多种尺寸
.ico 格式很特殊——单个文件可以捆绑多种尺寸(通常是 16×16、32×32、48×48)。这就是为什么一个好的 favicon.ico 是兼容性最好的选择:每个浏览器都会自动选择最合适的内嵌尺寸。
不想手动管理这些尺寸?
你不必这样做。将一张正方形图片上传到 Favicon.one,下载包含上述所有尺寸的 ZIP——包含一个 .ico、一个 Apple touch icon、一个 SVG 以及一个 site.webmanifest——外加可直接粘贴的 HTML。