favicon 与 PWA 指南
同时生成网站图标与 PWA 图标的标准方案。
Maskable 图标安全区怎么设置
通过更安全的主体占比，减少 Android 启动器裁切造成的图标内容丢失。
输入检查清单
- 优先使用轮廓清晰的 PNG 或 SVG 主图。
- 建议使用 1024×1024 源图，确保 512 输出细节。
- 若图标细节很多，尽量先做简化，避免被裁切后可读性下降。
实操流程
- 上传主图后切换到“安全”留边模式。
- 重点观察 maskable 预览，确认主体远离边缘。
- 如果图标依赖透明留白，建议搭配稳定的背景色检查效果。
- 下载 ZIP，使用 icon-maskable-192x192 与 512x512。
完整案例
输入： 透明背景 PNG 的 App logo。
设置： 安全留边 + 纯色背景（用于 maskable 兼容）。
输出： 在圆形或 squircle 裁切下仍保持主体清晰可见。
安全区提示
- 文字、细线和关键角标不要贴近画布外沿。
- 如果条件允许，同时在浅色和深色启动器背景下检查图标。
- 普通图标与 maskable 图标最好保存在同一发布包内，避免 manifest 指向错乱。
常见问题
maskable 图标和普通 512 图标有什么区别？
maskable 会被启动器按形状裁切，需要更保守的安全区。
maskable 该用透明还是纯色背景？
多数场景建议纯色背景，视觉稳定性和兼容性更好。
怎么判断主体是否太贴边？
如果文字或图形接近预览边界，建议切换安全模式并再次检查。
相关图标场景
SVG 转图标包指南
从 SVG 快速导出完整图标文件集。