PWA icon generator
Make the Android Chrome and progressive web app icons: 192 and 512 px PNGs, maskable versions that fill any launcher shape, and a site.webmanifest that lists them.
Regular vs maskable icons
A regular PWA icon is drawn as-is: transparent corners stay transparent. On many Android launchers that means your icon gets shrunk and placed on a white disc, which looks like an afterthought.
A maskable icon fills the whole square with your background colour and keeps the logo inside the central safe zone. The launcher then crops it to its own shape (circle on Pixel, squircle on Samsung) and it looks native. The generator makes both, and the manifest lists them with the right purpose.
What the manifest looks like
{
"name": "My Site",
"short_name": "My Site",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/maskable-icon-512x512.png", "sizes": "512x512",
"type": "image/png", "purpose": "maskable" }
],
"theme_color": "#e8590c",
"background_color": "#e8590c",
"display": "standalone",
"start_url": "/"
}Set the app name and theme colour under “App name, theme colour & file path” in the generator above.
Questions people ask
What icons does a PWA need?
At minimum a 192×192 and a 512×512 PNG listed in the web app manifest. Chrome uses 192 px for the home screen and 512 px for the splash screen. Add maskable versions (purpose "maskable") so Android can fit the icon to its launcher shape without a white border.
What is a maskable icon?
An icon designed with extra padding so the operating system can crop it into a circle, squircle or other shape. The important content must sit inside a central circle whose radius is 40% of the icon width, the “safe zone”.
What goes in site.webmanifest?
A JSON file with name, short_name, icons (src, sizes, type and optional purpose), theme_color, background_color, display and start_url. The generator writes one for you with the name and colours you choose.
Should I use purpose "any maskable"?
No. Combining both on one image means the icon is either shrunk with padding in normal contexts or cropped badly in masked ones. List separate files: a regular icon and a maskable icon.
How do I link the manifest?
Add <link rel="manifest" href="/site.webmanifest"> to the head of every page, and serve the file with a JSON content type. manifest.json and site.webmanifest are both fine names.