如何生成 favicon 与 PWA 图标

使用一张 PNG 或 SVG,一次导出 favicon.ico、Apple touch icon 与 PWA 图标,并保持一致留边。

推荐输入类型

  • 推荐上传 PNG 或 SVG,尽量使用正方形且尺寸不小于 512×512。
  • 对于需要灵活布局的品牌图形,透明背景通常更稳定。
  • 若原图非正方形,工具会自动补画布并保持主体居中。

3 步操作流程

  1. 上传主图并确认主体识别边界是否正确。
  2. 选择“平衡”或“安全”留边模式,查看 favicon 与 PWA 预览。
  3. 下载 ZIP,获取 favicon.ico、16/32/48、Apple 180 与 PWA 192/512 文件。

完整案例

输入: 1024×1024 透明品牌 SVG。

设置: 平衡留边 + 透明背景。

输出: 得到网站与 PWA 常用图标文件,可直接接入项目。

常见问题

favicon 和 PWA 图标可以共用一张源图吗?

可以。只要源图质量足够高,并合理控制留边,通常可以共用。

为什么小尺寸 favicon 看起来会糊?

小尺寸对图形简洁度要求更高,可简化细节并增加安全留白。

需要手工做每个尺寸吗?

不需要,工具会自动生成常见尺寸并一键打包。

相关入口

返回图标生成器

回到主工具,立即上传主图并导出图标包。

Maskable 安全区指南

进一步了解如何避免启动器裁切主体。

SVG 转图标包指南

从 SVG 输入到完整图标包导出的完整流程。

JSON 格式化工具

发布前快速检查和格式化 manifest JSON。