PWABuilder Image Generator Alternative
Generate the icons a PWA needs on the web, with a live preview, maskable safe zone and manifest.json. Free, and processed entirely in your browser.
A different job from PWABuilder
PWABuilder is an open-source project from Microsoft whose main purpose is packaging a Progressive Web App for the app stores: Google Play, the App Store and the Microsoft Store. Its image generator is part of that workflow.
This generator is aimed at the step before that: the files your website itself has to serve so that browsers can install it. If you are publishing to a store, use PWABuilder for the package. If you need the icons, favicon and manifest for the site, this is the shorter path, and the two work well together.
What this generator produces
Everything comes from one image and is downloaded as a single ZIP, with file names that already match the manifest.json and HTML tags inside it.
| Output | Details |
|---|---|
| PNG icons | 12 sizes from 16x16 to 512x512, including the 192x192 and 512x512 that Chrome requires |
| Maskable icons | 192x192 and 512x512 on a solid background, with the logo kept inside the safe zone |
| Apple touch icon | 180x180 with an opaque background, so iOS does not fill it with black |
| favicon.ico | A real multi-size ICO with 16x16, 32x32 and 48x48 images |
| iOS splash screens | Optional launch images for current iPhone and iPad sizes, in both orientations |
| manifest.json | Filled in with your app name, colors, display mode and every icon path |
| HTML tags | The link and meta tags to paste into your page head |
How it works
Your image is resized on your own device using the browser Canvas API and packed into the ZIP there. It is not uploaded, so the tool also works for logos that are not public yet.
The preview updates as you change the padding and background color, and the maskable tab shows the icon cropped to a circle, a squircle and a rounded square before you download anything.
After deploying the files, the PWA validator checks the live site and confirms that every icon loads at the size the manifest declares.
Everything You Need for PWA Assets
- All icon sizes from 16x16 to 512x512 pixels for every PWA requirement
- A live preview of every icon, each maskable shape and the splash screens before you download
- A real use preview of your icons in a browser tab, a search result and on Android and iPhone home and launch screens, also included in the ZIP
- A one-click demo with a sample logo, so you can try the generator before uploading anything
- Maskable icons for Android adaptive icons, with a proper safe zone
- iOS splash screens for popular iPhone and iPad devices in both orientations
- A ready-made manifest.json with all icon references included
- HTML meta tags for PWA icons and splash screen declarations
- A built-in logo maker for initials or an emoji, if you have no logo yet
- Images processed in your browser and never uploaded to a server
- One-click download of all assets as an organized ZIP file
How It Works
- Upload your logo as a PNG, JPG, SVG, or WEBP file, or make a simple one from initials or an emoji.
- Choose which assets to generate, adjust padding and background color, and check the live preview and the real use preview.
- Download a ZIP with icons, splash screens, manifest.json, and HTML meta tags.
Frequently Asked Questions
Is this a replacement for PWABuilder?
For generating the icons, favicon and manifest of a website, yes. It does not build app store packages, which is what PWABuilder is for, so many projects use both.
Can I use these icons in a PWABuilder package?
Yes. The ZIP contains standard PNG files, including a 512x512 icon that you can supply wherever a store package asks for a base image.
What image format should I use?
We recommend using PNG or SVG formats for the best quality. PNG works well for photos and complex images, while SVG is ideal for logos and icons as it scales perfectly. JPG and WEBP are also supported but may not preserve transparency.
What is the recommended image size?
For best results, use an image that is at least 512x512 pixels with a 1:1 aspect ratio (square). Larger images will be scaled down, and smaller images may appear blurry at larger icon sizes.
Can I preview the icons before downloading?
Yes. As soon as you add an image, the preview shows every icon size, the maskable icons cropped to a circle, a rounded square and a squircle, and the splash screens for each device. It updates as you change the padding and background color, so you only download once it looks right. The "See your icons in real use" button goes further and shows them in a browser tab, a search result, a desktop shortcut and on Android and iPhone home and launch screens. The ZIP includes that page as preview.html.
Can I use this tool without a logo?
Yes. Choose "No logo yet?" under the upload box, or open the text and emoji icon generator, to make a simple logo from your initials or an emoji on a colored square, rounded square or circle, with an optional gradient. It is drawn in your browser and then goes through the generator like any uploaded image. To just see how the tool works, choose "Try the demo" under the upload box: one click loads a sample logo with a name and colors and generates every asset, splash screens included.
What are maskable icons?
Maskable icons are a PWA feature that allows your icon to adapt to different shapes on Android devices. They include a safe zone so the icon looks good whether displayed in a circle (Pixel), rounded square (Samsung), or other shapes. This tool fills the background with your chosen colour and keeps your logo within the center 80% of the image.
Do I need splash screens?
Splash screens provide a native app-like experience on iOS devices. When a user adds your PWA to their home screen and opens it, the splash screen shows briefly while the app loads. They're optional but highly recommended for a polished experience.
How do I implement the generated assets?
Download the ZIP file and extract it. Copy the icons/ and splash/ folders to your project's public directory. Copy manifest.json and favicon.ico to your root/public folder. Then add the HTML code from meta-tags.html to your index.html <head> section.
Is this tool free to use?
Yes! This PWA Icon Generator is completely free. All processing happens in your browser - your images are never uploaded to any server. You can generate unlimited assets for personal or commercial projects.
Does this tool store my images?
No. All image processing happens locally in your browser using Canvas API. Your images never leave your device, ensuring complete privacy and security.