Generate all required PWA assets from a single 1024x1024px image. This skill creates app icons, favicons, Apple touch icons, maskable icons, badge icons, and placeholder screenshots for PWAs. Use when developers need to prepare PWA manifest assets, generate multiple icon sizes from a source image, or create a complete set of PWA-compliant images.
Generate complete set of PWA assets from a single 1024x1024px source image.
Ensure Node.js and npm are installed. The script will automatically install required dependencies.
node scripts/generate-pwa-assets.js <source-image-path> <output-directory>
The script creates the following PWA-compliant assets:
icon-144x144.png - Standard PWA iconicon-192x192.png - Android Chrome iconicon-512x512.png - High-resolution PWA iconicon-192x192-safe.png - Maskable variant with safe area padding (20% padding)apple-touch-icon.png - 180×180px for iOS devicesfavicon.ico - Multi-resolution icon (16×16, 32×32, 48×48)badge.png - 96×96px monochrome white badgescreenshots/desktop-wide.png - 1280×720px desktop placeholderscreenshots/mobile-narrow.png - 375×812px mobile placeholdershortcuts/start.png - 96×96px with play overlayshortcuts/settings.png - 96×96px with gear overlayThe script adds 20% padding to maskable icons by default. Adjust the MASKABLE_PADDING constant in the script if needed.
The generated screenshots include instructional text. Replace these with actual app screenshots before deployment.
The badge is converted to white monochrome. Edit the script's badge generation section for different color schemes.
# Generate all assets from logo.png into public/ directory
node scripts/generate-pwa-assets.js ./logo.png ./public
output-directory/
├── icon-144x144.png
├── icon-192x192.png
├── icon-512x512.png
├── icon-192x192-safe.png
├── apple-touch-icon.png
├── favicon.ico
├── badge.png
├── screenshots/
│ ├── desktop-wide.png
│ └── mobile-narrow.png
└── shortcuts/
├── start.png
└── settings.png