pwa-asset-generator

一张图自动生成全套 PWA 图标和启动屏，省时省力

开源 🏷️完全免费 🔧 仅开源项目，无在线服务，需自行部署图像生成 🍴 复刻 157 🐛 待处理 53 👀 关注 20

GitHub ↗

GitHub 星标 ★ 3043

维护状态维护中

是否开源开源

定价模式 🏷️完全免费完全免费的开源工具，MIT许可证，可自行部署使用。

项目预览

pwa-asset-generator 项目界面预览图 — 图片来源：GitHub 官方仓库名片

项目数据

分类图像生成

开发团队elegantapp

GitHubhttps://github.com/elegantapp/pwa-asset-generator

定价模式🏷️完全免费

价格说明完全免费的开源工具，MIT许可证，可自行部署使用。

访问状态🔧 仅开源项目，无在线服务，需自行部署

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型android,favicon,favicon-generator,html-tags,icon,icon-sizes,image-generation,ios,launch-image,manifest,manifest-specs,mstile,progressive-web-app,progressive-web-apps,puppeteer,pwa,pwa-assets,splash-screen,splash-screens

GitHub 星标★ 3043

上线时间2019-08-09 00:00:00

代码更新2026-10-12

仓库体积46.1 MB

本站数据更新2026-11-11

维护状态维护中

收录时间2026-08-09

浏览次数9

项目介绍

pwa-asset-generator 是一个自动化生成 PWA（渐进式 Web 应用）所需图标的命令行工具。它解决开发者手动制作多尺寸图标、启动屏和 favicon 的繁琐问题，只需提供一张源图片，即可自动生成符合 Web App Manifest 规范和 Apple 人机界面指南的所有图标和启动屏图片，并自动更新 manifest.json 和 index.html 文件。核心能力包括：根据源图自动生成各种尺寸的图标、favicon、mstile 和 iOS 启动图；支持自定义背景色、缩放比例、圆角等参数；可输出为 PNG 或 SVG 格式；提供交互式预览和批量处理功能。该工具显著简化了 PWA 的资源配置流程，确保生成的资源符合各平台要求，提升开发效率。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-08-09 · 当前星标 ★ 3043

技术标签

android image-generation ios puppeteer pwa

使用教程

难度：入门约 10 分钟部署方式：命令行工具 7 步

环境要求

已安装 Node.js 与 npm（需通过 npm 安装该工具）
一张高分辨率源图片：logo.svg、logo.png、logo.html 或远程图片 URL
若需自动写入，需准备 manifest.json 与 index.html 文件路径
Linux/CI 环境运行 Chromium 时可能需处理沙箱限制

安装与启动步骤

1安装命令行工具

在项目目录或全局通过 npm 安装 pwa-asset-generator，安装后即可使用同名命令。
```
npm install pwa-asset-generator
```
2查看帮助与选项

运行 --help 查看全部可用参数与官方示例，确认本次需要哪些选项。
```
pwa-asset-generator --help
```
3准备源图片

准备一张高分辨率源图（如 logo.svg）并确定输出目录；不指定输出目录则存到当前目录。
4生成资源并写文件

指定源图，同时用 -i 指向 index.html、-m 指向 manifest.json，自动插入标签和图标声明。
```
pwa-asset-generator logo.svg -i ./index.html -m ./manifest.json
```
5生成 favicon 与 mstile

加上 --favicon --mstile 生成站点图标；--opaque false 保留透明，--maskable false 关闭遮罩图标声明。
```
pwa-asset-generator logo.svg ./assets --icon-only --favicon --opaque false --maskable false --type png
```
6定制背景与暗色启动屏

用 --background 传 CSS 颜色或渐变，--dark-mode 生成带 prefers-color-scheme 的暗色启动屏 meta。
```
pwa-asset-generator logo.svg ./assets --dark-mode --background dimgrey --splash-only --quality 80
```
7Linux 环境关闭沙箱

Linux/CI 上遇到 No usable sandbox 报错时加 --no-sandbox；该参数仅 Linux 可用且会禁用 HTML 输入。
```
pwa-asset-generator logo.svg ./assets --no-sandbox
```

关键配置

配置项	必填	说明	示例
`--background / -b`	否	提供源图时使用的页面背景，取值同 CSS。	`linear-gradient(to right, #fa709a 0%, #fee140 100%)`
`--padding / -p`	否	源图在画布中的内边距，取值同 CSS。	`15%`
`--manifest / -m`	否	指定 manifest 文件路径，自动写入生成的图标。	`./manifest.json`
`--index / -i`	否	指定 index.html 路径，自动插入启动屏与图标 meta 标签。	`./index.html`
`--type / -t`	否	输出图片类型 png 或 jpg，manifest 文件除外。	`jpg`
`--path / -a`	否	为生成的 meta 标签 href 链接添加路径前缀。	`%PUBLIC_URL%`

如何确认成功

检查输出目录是否生成各尺寸图标与启动屏图片，并确认 manifest.json、index.html 中已插入对应 href/src 标签。

常见问题

Q：如何只生成图标或只生成启动屏？

A：加 --icon-only 只生成图标，加 --splash-only 只生成启动屏，两者都不加则同时生成。

Q：Linux 服务器上报 No usable sandbox 怎么办？

A：添加 --no-sandbox 参数即可；该参数仅支持 Linux，且出于安全考虑会禁用 HTML 作为输入源。

Q：源图可以是 SVG 或远程图片吗？

A：可以，README 示例中源文件支持 logo.svg、logo.html 以及 https 开头的远程图片地址。

Q：如何只生成竖屏或横屏启动屏？

A：使用 --portrait-only 仅生成竖屏启动屏，使用 --landscape-only 仅生成横屏启动屏。

Q：生成的资源默认保存在哪里？

A：若未提供 output-folder 参数，资源会保存到执行该命令的当前目录。

注意事项

未指定输出目录时，资源保存在命令行当前所在目录。
--type 默认值为 jpg，但 manifest 文件中的图片除外。
--no-sandbox 仅限 Linux 平台，且启用后无法使用 HTML 作为输入源。
README 仅给出 npm install pwa-asset-generator 一种安装方式。

核心亮点

自动生成所有平台所需尺寸的图标和启动屏，无需手动裁剪
自动更新 manifest.json 和 index.html，减少手工编辑错误
支持自定义配置（背景色、缩放、圆角），灵活适配品牌风格

不足之处

仅支持静态图片生成，无法处理动态或矢量源图
文档/社区待观察

适用场景

快速为 PWA 项目生成合规的图标和启动屏资源
在 CI/CD 流程中自动化生成并更新 PWA 资源
为多个 PWA 项目批量生成统一风格的图标

替代项目

pwa-asset-generator、favicons、web-app-manifest-generator

上一篇：BananaSlice

下一篇：image-extender