PWA Icon Generator
A fast online PWA icon generator for Progressive Web Apps. Upload one source image and export every required icon plus a ready-to-use manifest.json — no signup, no install.
Use this PWA icon generator to produce the full icon set a Progressive Web App needs — 192, 512, maskable variants, Apple touch icon, and smaller sizes — all from a single square image. The tool also writes a matching manifest.json.
Drop your PNG or JPG, pick app name and theme colours, and download a ZIP you can drop into your public/ folder. Works with Next.js, Vite, plain HTML, or any framework that serves a manifest and icons.
How to generate PWA icons
Four steps to a shippable icon set.
1. Prepare source
Square image, 512 × 512 px or larger. Solid background recommended.
2. Upload
Drop the PNG or JPG into the tool. A preview confirms the design.
3. Set manifest fields
App name, short name, theme and background colours.
4. Download ZIP
Icons plus manifest.json, ready to drop into your project.
Which PWA icon sizes you need
The essentials plus the ones that polish the install experience.
| Purpose | Size |
|---|---|
| Required (PWA minimum) | 192 × 192 px |
| Required (PWA minimum) | 512 × 512 px |
| Android home screen | 144 × 144 px |
| Small tile / notification | 96 × 96 px |
| Apple touch icon (iOS) | 180 × 180 px |
| Maskable (safe zone) | 512 × 512 px with 10% padding |
192 × 192 and 512 × 512 are the two sizes a PWA manifest must include. The rest improve behaviour on specific devices.
What the manifest.json looks like
The icons array the tool generates for you.
{
"name": "Your App Name",
"short_name": "YourApp",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3b82f6",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512",
"type": "image/png", "purpose": "maskable" }
]
}Link it from your HTML with <link rel="manifest" href="/manifest.json">.
What is a maskable icon?
Android adaptive icons apply a shape mask (circle, squircle, rounded square) to the outer area of the icon. Without a maskable variant, parts of your design can get cropped on Android home screens.
A maskable icon keeps the important content in the safe zone — the inner ~80% — and uses the outer 10% on each side for background fill. The generator outputs a 512 × 512 maskable PNG with this safe zone already accounted for.
Common pitfalls
Uploading a non-square source
PWA icons are square. Crop or pad the source before upload or the generator will fit it into a square.
Skipping the maskable icon
Android adaptive icons crop the outer edges. Without a maskable variant, parts of your icon may be cut off.
Forgetting the manifest link
Icons alone don’t install the PWA. Link the generated manifest in your HTML with <link rel="manifest" href="/manifest.json">.
Colour mismatch with the splash screen
Set the same background_color in the manifest as your icon background so the launch screen feels cohesive.
What this tool supports
| Feature | Supported | Notes |
|---|---|---|
| Generate full PWA icon set | Yes | All common sizes used by manifests and browsers. |
| Generate manifest.json | Yes | Ready-to-paste icons array, name, colours, display mode. |
| Maskable icon support | Yes | Safe-zone output for Android adaptive icons. |
| Apple touch icon | Yes | 180 × 180 PNG for iOS home screen. |
| Download as ZIP | Yes | Icons plus manifest.json in one download. |
| Account required | No | No signup, no install. |
Frequently Asked Questions
User reviews
No reviews yet. If you used the tool, you can share feedback on our feedback page.
Ready to ship your PWA icons?
Upload a source image, set manifest fields, and download a ZIP with every icon and a working manifest.