Generate PWA Icons with AI

PWA Icons Are Not Just Favicons

A favicon lives in the browser tab — a controlled 16x16 or 32x32 square. PWA icons do something harder: they represent your app on the user's home screen, app drawer, task switcher, and splash screen. The operating system decides the shape, and your icon has to survive all of them.

Android might render your icon in a circle. Samsung's One UI uses a squircle. An older device uses a plain rounded rectangle. If your content extends to the edges of the image, it will get clipped on at least one of these shapes. That is where maskable icons come in.

Maskable vs. Standard (Any) Icons

Every icon in your web app manifest has a purpose field. The two values you actually need to care about are any and maskable.

The 80% Safe Zone

Maskable icons reserve 10% padding on every side. For a 512x512 icon, that means all meaningful content must fit within the center 410x410 pixels. The outer ring is not wasted — it should be filled with your brand color or a solid background. The OS clips into this area when applying the mask shape.

Why 80%? The most aggressive mask shape is a circle, which clips roughly 10% from each edge of a square. The 80% safe zone guarantees your content survives every possible mask: circle, rounded square, squircle, teardrop — whatever the device manufacturer picked.

Recommended Sizes

The web app manifest spec does not mandate specific sizes, but Chrome (the main consumer of PWA manifests) has clear preferences. Provide at least 192x192 and 512x512. For full coverage across all contexts:

For each size, you ideally provide both a standard (any) version and a maskable version. In practice, most projects get away with standard + maskable at 192 and 512 only. Chrome downscales from the nearest larger size for everything else.

manifest.json Icons Array

Here is a complete manifest icons configuration with both standard and maskable variants at the two most important sizes. Iconello generates this file for you, but understanding the structure is useful for debugging.

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3b82f6",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-maskable-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Notice the separate files for any and maskable. The any versions have the icon filling the full canvas with a transparent or shaped background. The maskable versions have the icon centered in the safe zone with a solid background extending to all edges.

What About iOS?

iOS does not read PWA icons from the manifest. Safari uses a separate HTML tag:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

The recommended size is 180x180. iOS applies its own rounded-rectangle mask and does not support maskable icons. The Iconello download includes an Apple Touch Icon alongside the PWA manifest icons, so you are covered on both platforms.

What Iconello Generates

• Standard icons at 48, 72, 96, 128, 144, 192, 384, and 512px
• Maskable variants at 192 and 512px with safe zone padding
• A ready-to-use manifest.json (or site.webmanifest) with all icon entries
• Apple Touch Icon at 180x180
• All files individually optimized — not just downscaled from one source

Frequently Asked Questions