PWA 图标生成器

几秒钟生成 Progressive Web App 图标

渐进式 Web 应用（PWA）需要符合规范的图标尺寸以及有效的 web app manifest。使用本工具，你只需上传一次图片，即可自动生成所有必需的 PWA 图标和可直接使用的 site.webmanifest 文件。

什么是 PWA 图标？

PWA 图标是在用户将网站“安装”为应用时显示的应用图标，用于确保 Web App 在各类系统中拥有接近原生应用的展示效果。它们会出现在多个位置：

• Android 主屏幕
• 应用启动器 / 应用抽屉
• 任务切换视图
• 启动闪屏 / 启动画面

规范的 PWA 图标可以让你的 Web 应用在各设备上看起来更加专业、统一。

PWA 推荐图标尺寸（Google 建议）

Android Chrome 图标尺寸

• 192x192 —— 用于主屏幕图标
• 512x512 —— 用于应用启动器与闪屏画面

这些尺寸是通过 PWA 安装检测所必需的，缺失会在 Lighthouse 或浏览器审查工具中出现警告。

我们为你生成的文件

图标文件

• android-chrome-192x192.png
• android-chrome-512x512.png

Manifest 配置文件

• site.webmanifest（预配置，可直接引用）

示例：

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "display": "standalone"
}

为什么选择 favicon.pub 来生成 PWA 图标

• 符合 Google 要求的图标尺寸
• 自动生成 Web App Manifest 文件
• 无需手动裁剪与导出多尺寸图标
• 兼容 PNG、JPG、SVG 等多种源文件格式
• 免费、即时下载

如何将 PWA 图标接入你的网站

1. 上传你的 Logo 或应用图标。
2. 下载生成好的 PWA 图标和 manifest 文件。
3. 将文件放入你的网站根目录。
4. 在 HTML 中添加指向 manifest 的链接标签。

<link rel="manifest" href="/site.webmanifest">

PWA 图标 vs 浏览器 Favicon

常见问题

站内相关链接

• 返回 Favicon 生成器首页
• SVG Favicon 生成器
• Favicon 尺寸指南