PWA Icon Generator

The exact icons your site.webmanifest and Lighthouse audit want, cut from your logo or drawn from a description, with the manifest and head tags written for you.

PWA Icon Generator: The Icons Your Manifest and Lighthouse Actually Want

Installable web apps need a 192 px icon and a 512 px icon declared in site.webmanifest, plus a favicon and an Apple touch icon so the same site looks right in a tab and on an iPhone home screen. Lighthouse checks for exactly this list. This tool produces all of it from one image or one sentence.

How to make PWA icons

Describe the icon and pick a style, or upload a square logo of at least 1024 px.
Pick a background color if your source is transparent. Home screens are busy, and a filled tile reads better.
Run, then download the zip into your site root and paste head.html into your page’s <head>.

What’s in the zip

android-chrome-192x192.png and android-chrome-512x512.png, the two sizes the manifest declares and the install prompt uses.
site.webmanifest with both icons already listed. Add your app’s name, short name and colors.
apple-touch-icon.png at 180 px, because Safari ignores the manifest icons and reads this tag instead.
favicon.ico, favicon-16x16.png and favicon-32x32.png for the browser tab.
head.html with the five <link> tags, including rel="manifest".
The 1024 px square the set was cut from.

The manifest you get looks like this; fill in the blanks and you’re done:

{
  "name": "",
  "short_name": "",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Maskable icons

Android can crop an installed web app’s icon to a circle, a squircle or a rounded square, and a manifest entry marked "purpose": "maskable" tells it the artwork is safe to crop. This tool doesn’t write a separate maskable variant yet; it’s on the list. Until then, keep your subject inside the middle eighty percent of the square (the generator does this for you when it draws) and the standard icons survive every mask well enough.

Tips

One subject, filled background. The 192 px icon sits on a home screen next to native apps, so it needs to hold its own.
Match theme_color to the icon’s background and the splash screen looks intentional.
Test the install prompt in Chrome on Android and in Safari on iOS; they use different icons from this same zip.

FAQ

What sizes does a PWA manifest need? 192 and 512 px at minimum. 192 is the home-screen icon, 512 is the splash screen and the install dialog. Both are in the zip and both are declared in the manifest.

What’s a maskable icon? An icon whose important content stays inside a safe zone (a circle in the middle of the square), so Android can cut any shape around it without clipping. A dedicated maskable file isn’t produced yet; the standard icons are drawn with that safe zone in mind.

Why does Lighthouse flag my icons? Usually one of three things: the manifest isn’t linked from <head>, an icon path in the manifest is wrong, or the 512 px icon is missing. Paste head.html, keep the files in the site root, and all three go away.

Do iPhones use the manifest icon? No. Safari reads the apple-touch-icon tag, which is why the zip includes the 180 px file and the tag for it.

I just need a favicon. Favicon Generator makes the same web set with the favicon front and center.

All apps

See pricing and start creating on Mitte