Maskable 安全区指南
进一步了解如何避免启动器裁切主体。
如何生成 favicon 与 PWA 图标
使用一张 PNG 或 SVG，一次导出 favicon.ico、Apple touch icon 与 PWA 图标，并保持一致留边。
推荐输入类型
- 推荐上传 PNG 或 SVG，尽量使用正方形且尺寸不小于 512×512。
- 对于需要灵活布局的品牌图形，透明背景通常更稳定。
- 若原图非正方形，工具会自动补画布并保持主体居中。
实操流程
- 上传主图并确认主体识别边界是否正确。
- 选择“平衡”或“安全”留边模式，查看 favicon 与 PWA 预览。
- 导出前检查 manifest 名称、背景色和主题色。
- 下载 ZIP，获取 favicon.ico、16/32/48、Apple 180 与 PWA 192/512 文件。
完整案例
输入： 1024×1024 透明品牌 SVG。
设置： 平衡留边 + 透明背景。
输出： 得到网站与 PWA 常用图标文件，可直接接入项目。
发布前提示
- 源图越简洁，16×16 和 32×32 的 favicon 越容易保持清晰。
- 保留一份最终 ZIP，确保线上 manifest 与图标文件来源一致。
- 部署后建议在真实浏览器安装提示或标签页里核对图标效果。
常见问题
favicon 和 PWA 图标可以共用一张源图吗？
可以。只要源图质量足够高，并合理控制留边，通常可以共用。
为什么小尺寸 favicon 看起来会糊？
小尺寸对图形简洁度要求更高，可简化细节并增加安全留白。
需要手工做每个尺寸吗？
不需要，工具会自动生成常见尺寸并一键打包。
相关图标场景
SVG 转图标包指南
从 SVG 输入到完整图标包导出的完整流程。