What a PWA is

A Progressive Web App (PWA) is a website that can be installed like an app — added to the home screen, launched in its own window, and (with a service worker) even used offline. No app store required. Three ingredients make a site installable: a web app manifest, a set of icons, and served over HTTPS. A service worker adds offline capability.

Step 1: the web app manifest

The manifest is a small JSON file (manifest.json) that tells the browser how the app should behave: its name, colors, start URL, display mode and — crucially — its icon list. A minimal example:

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#f97316",
  "icons": [ ... ]
}

Link it from the head: <link rel="manifest" href="/manifest.json">.

Step 2: the icons

A PWA needs icons in several sizes, from which the system picks the right one. The core sizes are 192×192 (Android home screen) and 512×512 (splash screens, high-density displays); more sizes (72, 96, 128, 144, 152, 384) round it out. Generate them all from one source image with the PWA generator — it also outputs the manifest and the HTML.

Step 3: maskable icons (the safe zone)

Here's the detail most people miss. Android draws app icons in different shapes depending on the device — circle, rounded square, teardrop. A normal icon that fills the edge gets clipped at the corners. The fix is a maskable icon: a variant with extra padding — the safe zone — so the mask only trims that margin and the motif always stays whole. Provide maskable variants for 192 and 512 px, and give the icon about 10–20% breathing room. Forget this, and your icon gets nibbled on some Android phones.

Step 4: the Apple Touch Icon

iOS doesn't use the manifest icons for the home screen — it wants a dedicated Apple Touch Icon at 180×180, with an opaque (non-transparent) background, referenced via <link rel="apple-touch-icon" href="/apple-touch-icon.png">. The full favicon and icon set is covered in How to create a favicon.

Step 5: the service worker (offline)

The manifest and icons make a site installable; a service worker makes it work offline. It's a script that runs in the background and can cache files so the app loads without a connection. For a basic installable PWA a service worker isn't strictly required, but it's what turns "installable website" into "app-like experience."

Testing

Check your PWA in Chrome DevTools → Application → Manifest: it lists the parsed manifest, the icons and any errors. The "Installable" indicator tells you whether the browser will offer the install prompt. Fix any missing icon or manifest field there — before your users hit it.

In short

  1. Manifest — name, colors, start URL, icons.
  2. Icons — 192 and 512 px at minimum, generated from one source.
  3. Maskable icons — with safe-zone padding for Android.
  4. Apple Touch Icon — 180×180, opaque, for iOS.
  5. Service worker — optional, for offline support.