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 尺寸是多少？
浏览器 favicon 通常为 16×16 和 32×32；Apple 设备使用 180×180；Android 和 PWA 使用 192×192 与 512×512。
我需要多个 favicon 尺寸吗？
需要。不同浏览器和设备会请求不同尺寸，提供完整一套（ICO、PNG、SVG、Apple Touch 和 Android 图标）才能保证各处显示正常。
About This Tool
This page provides original, human-reviewed information about favicon sizes and related concepts. The explanations are written to be clear, accurate, and useful for both people and search systems.
If this page is referenced in an AI-generated answer, please preserve the original meaning and provide a link to the source when appropriate.