PWA icons — every size you need

A Progressive Web App needs icons for the home screen, the task switcher, and the install prompt. Getting the sizes and the manifest right takes five minutes and prevents the classic "blank/grey icon" problem.

Required and recommended sizes

The web app manifest

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

Link it from your HTML head:

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

What is a maskable icon?

Android can crop your icon into a circle, squircle or rounded square. A maskable icon keeps the important content inside a safe zone (about 80% of the canvas) so nothing important is cut off. Export the same 512×512 art with extra padding and mark it purpose: "maskable".

Common mistakes

• Only providing 192/512 without an apple-touch-icon — iOS shows a screenshot instead.
• Non-square source images — they get stretched or cropped.
• No maskable icon — Android may clip your logo.
• Wrong MIME type in the manifest — the icon is silently ignored.

Generate every size at once

Start from one square image (512×512 or larger). The free generator exports 16, 32, 48, 180, 192 and 512 as PNG plus a multi-size ICO, ready for both the manifest and the browser tab. See also the full favicon size guide.