Favicon 应该用多大尺寸？
选择正确的 Favicon 尺寸，是确保在不同浏览器、设备和平台上正确展示图标的关键。
本指南会介绍在不同场景下推荐使用的 Favicon 尺寸，以及如何组合多种格式以获得最佳兼容性。
快速答案
简短结论：
推荐的 Favicon 尺寸包括 16×16, 32×32, ，其中 48×48 用于桌面快捷方式，180×180 用于 Apple 设备主屏幕图标，192×192 与 512×512 用于 Android 与 PWA 应用图标。
浏览器 Favicon 尺寸
在桌面与移动浏览器中，为了确保兼容性，通常需要提供多种尺寸的 PNG 图标以及一个多尺寸 ICO 文件。
| 尺寸 | 文件名 | 用途 |
|---|---|---|
| 16×16 | favicon-16x16.png | 浏览器标签页 |
| 32×32 | favicon-32x32.png | 任务栏与浏览器 UI |
| 48×48 | favicon-48x48.png | 桌面快捷方式 |
| 多尺寸 | favicon.ico | 传统浏览器 / 旧版环境兼容 |
Apple Touch 图标尺寸
Apple 设备在将网站添加到主屏幕时，会使用较大的图标尺寸。
| 尺寸 | 文件名 | 设备 |
|---|---|---|
| 152×152 | apple-touch-icon-152x152.png | iPad |
| 167×167 | apple-touch-icon-167x167.png | iPad Pro |
| 180×180 | apple-touch-icon.png | iPhone |
Android 与 PWA 图标尺寸
Android Chrome 与 PWA 安装过程对图标尺寸有明确要求。
| 尺寸 | 文件名 | 用途 |
|---|---|---|
| 192×192 | android-chrome-192x192.png | 主屏幕图标 |
| 512×512 | android-chrome-512x512.png | 应用启动器与闪屏 |
这些尺寸通常是通过 PWA 安装检查的必要条件。
SVG Favicon 尺寸
SVG favicon 基于矢量图形，本身不依赖固定像素尺寸。
推荐做法：
- 使用正方形视图窗口（例如 viewBox="0 0 100 100"）
- 将图形内容居中
- 避免过于复杂的细节
SVG favicon 在高 DPI 与缩放场景下可以始终保持清晰，非常适合现代浏览器。
应该选择哪些 Favicon 格式？
| 格式 | 推荐使用场景 |
|---|---|
| PNG | 最常见，兼容性好 |
| ICO | 兼容旧版 Windows 和传统浏览器 |
| SVG | 现代浏览器，支持缩放与暗色模式 |
最佳实践：同时提供 PNG + ICO + SVG。
推荐的 HTML 标记
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">常见 Favicon 错误
- 只提供单一尺寸的 Favicon
- 忘记配置 Apple Touch 图标
- 缺少 PWA 图标和 manifest
- 使用分辨率过低的源图片
自动生成所有 Favicon 尺寸
与其手动裁剪和导出多种尺寸的图标，不如使用 favicon.pub 一次性生成所有需要的 Favicon。上传一张图片，即可下载包含 ICO、PNG、SVG、Apple Touch 图标、Android 图标和 PWA manifest 的完整压缩包。
站内相关链接
上传图片，一键生成所有 Favicon 尺寸