哪些 favicon 尺寸最重要？
实用 favicon 套装通常包含 SVG，以及 16px、32px、48px、180px、192px 和 512px PNG 资源。
Favicon 参考
Favicon 尺寸
下载网站图标前，先检查浏览器和平台需要的 favicon 尺寸。
快速答案
Favicon 尺寸 快速答案
Favicon 是网站在浏览器标签、书签、快捷方式和已安装 Web App 中使用的小型身份图标，不等同于完整 App 图标。建议以 SVG 为主源，补充 16px、32px PNG，按需准备 48px、180px、192px 和 512px，再逐一检查最小尺寸。
关键信息
- 最佳用途
- 网站 favicon、浏览器标签、书签、Apple touch 图标和 PWA 安装界面
- 主要输出
- SVG 主源、ICO fallback、16px/32px PNG、180px Apple touch、192px/512px PWA 图标
- 关键约束
- 先按 16px 设计：保持一个粗形状、高对比度，不放小文字。
- 页面更新
- 2026-07-30
输入和输出示例
输入：带盾牌符号的隐私分析网站。
输出：SVG favicon 提示词、16px 可读性建议和 PNG fallback 说明。
用途：浏览器标签、书签、Apple touch 图标和 PWA 快捷方式。
推荐流程
- 1创建一个简单的母版标识。
- 2导出 SVG 以及 16px、32px PNG fallback。
- 3按需补齐 180px Apple touch 与 192px/512px PWA 资源。
- 4打开最小尺寸文件，检查对比度和可识别性。
可验证的 Favicon 交付
不要把一个大图标简单缩成 16px
| 文件 | 用途 | 检查方法 |
|---|---|---|
| favicon.svg | 现代浏览器可缩放图标 | 设置 viewBox，并检查浅色与深色浏览器主题。 |
| favicon.ico | 桌面浏览器与旧环境回退 | 可包含多尺寸位图；至少人工检查 16px 和 32px。 |
| favicon-32.png / favicon-16.png | 明确的小尺寸回退 | 不要让细描边、透明边缘或文字在缩放后消失。 |
| apple-touch-icon.png | Apple 主屏快捷方式 | 使用独立 180px 方形资源并保留足够边距。 |
| 192px / 512px manifest 图标 | PWA 安装与系统界面 | Favicon 与 PWA 图标是两种使用场景，应分别测试。 |
FAQ
Favicon 尺寸常见问题
Favicon 尺寸 可以导出 SVG 吗？
可以。Favicon 尺寸 会提供可复制的 SVG 标记和可下载的 SVG 文件，适合产品界面、网站、文档和后续矢量编辑。
使用 Favicon 尺寸 需要注册账号吗？
不需要。你可以直接生成图标提示词、预览图标概念、复制 SVG，并下载 PNG 或 SVG 预览文件。
Favicon 尺寸和 App 图标尺寸有什么不同？
Favicon 优先保证 16px 和 32px 浏览器标签、书签可读；App 图标则从较大的方形母版出发，再为启动器、应用商店和 PWA 准备平台尺寸。