Favicon制作规格
Favicon 尺寸参考表
以下列出了各平台和浏览器所需的所有 favicon 尺寸。确保至少提供标记为"必需"的尺寸。
| 尺寸 | 用途 | 格式 | 是否必需 |
|---|---|---|---|
| 16x16 | 浏览器标签页图标 | ICO / PNG | 必需 |
| 32x32 | 浏览器标签页（高 DPI） | ICO / PNG | 必需 |
| 48x48 | Windows 任务栏 | ICO | 推荐 |
| 64x64 | Windows 快捷方式 | ICO | 可选 |
| 96x96 | Google TV | PNG | 可选 |
| 128x128 | Chrome 网上应用店 | PNG | 可选 |
| 180x180 | Apple Touch Icon (iOS) | PNG | 必需 (iOS) |
| 192x192 | Android Chrome | PNG | 必需 (PWA) |
| 270x270 | Windows 8/10 磁贴 | PNG | 可选 |
| 512x512 | PWA 启动画面 | PNG | 必需 (PWA) |
尺寸实际预览
下方的彩色方块按实际像素尺寸显示，让您直观对比各尺寸大小。
* 512x512 过大，此处省略展示。
HTML 代码片段
将以下代码添加到您的 <head> 中，即可覆盖所有主流平台的 favicon 需求。
格式对比：ICO vs PNG vs SVG
ICO
优点：可在单个文件中嵌入多种尺寸（16, 32, 48）；所有浏览器均支持；Windows 原生格式。
缺点：文件较大；不支持透明渐变（旧版）；编辑不便。
兼容性：所有浏览器 100% 支持。
PNG
优点：支持透明度；画质清晰；文件较小；工具链成熟。
缺点：每个尺寸需要单独文件；IE10 及更早版本不支持 PNG favicon。
兼容性：所有现代浏览器均支持。
SVG
优点：矢量无损缩放；单个文件适配所有尺寸；支持暗色模式自适应（通过 CSS prefers-color-scheme）。
缺点：Safari 不支持 SVG favicon；复杂图形渲染可能有差异。
兼容性：Chrome 80+、Firefox 41+、Edge 80+。Safari 不支持。
Favicon 最佳实践
将 favicon.ico 放在网站根目录。即使不声明 <link> 标签，浏览器也会自动请求 /favicon.ico。
Favicon 在极小的尺寸下展示，复杂的细节会丢失。使用高对比度的简单图形或字母标识。
浏览器标签页背景色可能不同，确保你的 favicon 在深色和浅色背景下都清晰可见。
iOS 用户将网站添加到主屏幕时使用 180x180 的 apple-touch-icon。不提供的话，iOS 会截取网页截图作为图标。
如果你的网站是 PWA，必须在 site.webmanifest 中声明 192x192 和 512x512 图标，用于 Android 安装和启动画面。
Favicon 会被浏览器强缓存。更新图标后，建议修改文件名或添加版本号查询参数（如 ?v=2）来强制刷新。
SVG favicon 支持暗色模式适配，并且一个文件即可适配所有分辨率。但仍需提供 ICO/PNG 作为 Safari 后备。
SVG Favicon 暗色模式示例
SVG favicon 可通过 CSS prefers-color-scheme 媒体查询自动适配系统暗色/亮色模式：
Favicon 检查清单
| 检查项 | 说明 |
|---|---|
| favicon.ico 在根目录 | 16x16 + 32x32 + 48x48 嵌入单个 ICO 文件 |
| PNG 16x16 和 32x32 | 使用 <link rel="icon"> 声明 |
| Apple Touch Icon 180x180 | 使用 <link rel="apple-touch-icon"> |
| Android 图标 192x192 | 在 site.webmanifest 中声明 |
| PWA 启动画面 512x512 | 在 site.webmanifest 中声明 |
| Windows 磁贴 270x270 | 使用 <meta name="msapplication-TileImage"> |
| theme-color 已设置 | 影响移动浏览器地址栏颜色 |