PWA 图标怎么生成？从一张 logo 到完整安装图标
做 PWA 或 Web App 时，图标不只是浏览器标签页里的小图。安装到手机桌面、Android 启动画面、iOS 主屏幕图标、桌面快捷方式和 manifest.json 安装提示，都会读取不同尺寸的图片。本工具在浏览器本地处理图片，上传一张 logo 或应用主视觉，即可生成 72×72 到 512×512 的常用 PWA 图标、180×180 Apple Touch 图标、Maskable 图标、favicon.ico（包含 16x16、32x32、48x48 三个尺寸），并输出可复制到 manifest.json 的 icons 配置。
使用教程
- 第一步 · 上传图片：将 PNG / JPG / SVG / WEBP 图片拖拽到上传区，或点击选择文件。建议使用边缘干净、主体居中的正方形 logo，尺寸最好不低于 512×512，这样生成 192×192、512×512 等 PWA 图标时更清晰。
- 第二步 · 调整安全区：拖动「安全区留白」滑块设置 Maskable 图标的留白比例，预览圈会显示安全范围；如果原图主体偏移，可开启智能裁剪；如果是纯色背景的品牌图，也可以尝试背景去除，再按需要设置背景填充色，兼顾 Android 图标尺寸、iOS Apple Touch 图标和桌面端 favicon。
- 第三步 · 生成下载：勾选项目需要的尺寸，点击「生成图标」查看圆形、圆角和方形效果，再点击「打包下载 ZIP」获取全部文件。生成后可以单独下载 favicon.ico、icon-192x192.png、icon-512x512.png，也可以复制 manifest.json icons 片段放进自己的项目。
示例和适配建议
如果你正在把网站改造成可安装的 PWA，可以先上传项目 logo，生成 192×192 和 512×512 两个核心图标，再补齐 Apple Touch 图标和 favicon.ico；如果你在做后台系统、工具站、小程序落地页或企业官网，也可以用它快速整理一套统一的应用图标文件。Maskable 图标建议给主体留出足够边距，文字型 logo 不要贴边，圆形图标预览里能完整看清主体，通常就能减少 Android 桌面图标被裁切的问题。manifest.json icons 片段生成后，记得根据你的目录结构调整 src 路径，再和网站的 name、short_name、theme_color 一起检查。