Maskable 安全区指南
进一步了解如何避免启动器裁切主体。
在网站中配置 Favicon 与 PWA 图标
生成并解压图标包，添加 HTML 引用，然后检查网站清单中的图标路径。
推荐输入类型
- 推荐上传 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 与图标文件来源一致。
- 部署后建议在真实浏览器安装提示或标签页里核对图标效果。
如何使用下载的图标包
ZIP 包含 10 张 PNG 图标、favicon.ico 和 site.webmanifest。这些是网站与 PWA 图标资源，不是完整的原生应用项目。
ZIP 内的文件
favicon-16x16.pngfavicon-32x32.pngfavicon-48x48.pngapple-touch-icon.pngicon-192x192.pngicon-512x512.pngicon-maskable-192x192.pngicon-maskable-512x512.pngicon-256x256.pngicon-1024x1024.pngfavicon.icosite.webmanifest
- 解压 ZIP 并上传到网站。以下示例将所有文件放在网站根目录。
- 将下面的引用添加到页面 HTML 的 head 内。
- 导出前设置应用名称、颜色和启动地址。将 site.webmanifest 与它引用的四张 PWA PNG 放在同一目录；图标路径相对于清单文件解析。
- 打开图标与清单的网址，确认能正常加载，并在目标设备上检查效果；仅添加图标并不等于完成可安装 PWA 的配置。
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">若使用 /icons/ 等子目录，请相应修改 HTML 引用，并让清单与 PNG 保持同目录。将 start_url 设为实际应用入口。ZIP 不包含上传的源 SVG。
常见问题
favicon 和 PWA 图标可以共用一张源图吗？
可以。只要源图质量足够高，并合理控制留边，通常可以共用。
为什么小尺寸 favicon 看起来会糊？
小尺寸对图形简洁度要求更高，可简化细节并增加安全留白。
需要手工做每个尺寸吗？
不需要，工具会自动生成常见尺寸并一键打包。
相关图标场景
SVG 转图标包指南
从 SVG 输入到完整图标包导出的完整流程。