---
title: PWA Icons: Make Your App Installable
description: A PWA needs a 192x192 and a 512x512 PNG in the manifest or the install prompt never appears. Add a maskable icon for Android, and an apple-touch-icon for iOS.
canonical: https://favicontools.com/blog/pwa-favicon-guide
---

# PWA Icons: Make Your App Installable

The install prompt is not a design choice, it is a checklist. Miss the 192 or the 512 icon and the browser silently refuses to offer the install. Here is the exact set.

> **Short answer:** Your web app manifest must list a 192x192 and a 512x512 PNG or the browser will not show the install prompt. Add a maskable icon so Android can shape it to the launcher, and keep an apple-touch-icon because iOS ignores the manifest for the home screen.

## The install prompt is gated on icons

A browser only offers to install a PWA when the manifest meets a set of requirements, and icons are one of them. Specifically the icons array must include at least a 192x192 and a 512x512 PNG. Miss either and the prompt never fires, with no error a user would notice.

The 192 is the launcher icon. The 512 feeds the splash screen and higher-density displays. Both must be real PNGs at those exact dimensions, not one image stretched by CSS.

## Make it installable

1. **Export the two required PNGs** — Create icon-192.png at 192x192 and icon-512.png at 512x512. These are the two the install prompt checks for.
2. **Add a maskable version** — Export a 512x512 with your mark centred inside the safe zone and padding around it, then mark it purpose: maskable so Android can crop it to a circle, squircle, or rounded square.
3. **List them all in the manifest** — Put every icon in the manifest icons array with its src, sizes, type, and purpose. See the code below for the exact shape.
4. **Link the manifest and the apple-touch-icon** — Add <link rel="manifest" href="/manifest.json"> and a separate <link rel="apple-touch-icon"> in your head. iOS reads the second one, not the manifest.
5. **Verify the prompt** — Open your site in Chrome, check the install control appears, and confirm the manifest has no errors in the browser dev tools application panel.

## The manifest icons array

```json
{
  "name": "Your App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1a1a1a",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}
```

The 192 and 512 with purpose any satisfy the install requirement. The maskable entry lets Android shape the icon without clipping your mark.

> **iOS ignores the manifest for the home screen:** On iOS, Add to Home Screen does not read the manifest icons. It uses the apple-touch-icon link tag. If you only put icons in the manifest, the iOS home screen icon will be wrong or blank. Keep a 180x180 apple-touch-icon in your head.

## Why maskable is separate

Android launchers crop icons to whatever shape the device theme uses. A normal icon that fills the full square gets its corners chopped off. A maskable icon has your mark centred in a safe zone with padding, so the launcher can crop the edges without touching the important part.

You still keep a purpose any icon alongside the maskable one. Surfaces that do not mask (the tab, the task switcher) use the any version so it is not left with extra padding.

## Frequently asked questions

### Why is my PWA install prompt not showing?

The most common icon cause is a missing 192x192 or 512x512 PNG in the manifest icons array. Both are required. Also check the manifest is linked and served, and the app is on HTTPS with a service worker.

### What icon sizes does a PWA need?

A 192x192 and a 512x512 PNG in the manifest are required for the install prompt. Add a 512x512 maskable version for Android and a 180x180 apple-touch-icon for iOS.

### Do I need a maskable icon?

For Android, yes. Without one the launcher crops your full-bleed icon and cuts off the corners. A maskable icon keeps your mark inside a safe zone so it survives any shape.

### Does the manifest set the iOS home screen icon?

No. iOS ignores the manifest icons for Add to Home Screen. It uses the apple-touch-icon link tag, so you need one in your head even if the manifest is complete.