PWA Icon Sizes: Complete Requirements for 2025

Progressive Web Apps need icons that work across different platforms and contexts. The web manifest defines which icons your PWA uses, but getting the sizes and formats right takes some care. This guide covers what you need.

The Essential Icons

At minimum, your PWA needs these icons in the web manifest:

These two sizes are the baseline. Chrome requires at least a 192x192 icon to show the install prompt, and 512x512 is used for splash screens and the "Add to Home Screen" preview.

Recommended Icon Set

For better coverage across platforms, include these sizes:

This set covers every major platform without going overboard.

The Web Manifest

Your icons are defined in the web manifest file (usually manifest.json or manifest.webmanifest):

{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/icons/icon-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Link to the manifest in your HTML head:

<link rel="manifest" href="/manifest.webmanifest">

Maskable Icons

Android 8.0+ uses adaptive icons that can be masked into different shapes (circles, rounded squares, etc.). For PWAs, you can provide maskable icons that work with this system.

A maskable icon has extra padding so the important content stays visible regardless of the mask shape:

{
  "src": "/icons/icon-maskable-192.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "maskable"
}

Safe Zone for Maskable Icons

The safe zone is the center 80% of the icon. Content outside this area might be cropped:

Total icon: 192x192
Safe zone: ~154x154 (centered)

Design your maskable icons with the logo or important content fitting within that center area. The outer edges should be background color only.

Providing Both Regular and Maskable

You can specify an icon works for multiple purposes:

{
  "src": "/icons/icon-192.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "any maskable"
}

Or provide separate icons:

{
  "src": "/icons/icon-192.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "any"
},
{
  "src": "/icons/icon-maskable-192.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "maskable"
}

Separate icons give you more control over how each version looks.

iOS Considerations

iOS has limited PWA support and uses the Apple touch icon instead of manifest icons for the home screen:

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

The Apple touch icon should be 180x180 pixels. iOS ignores the web manifest icons for home screen display, so you need both:

• Web manifest icons for Android and desktop
• Apple touch icon for iOS

Splash Screens

When a PWA launches, it shows a splash screen generated from your manifest. The splash uses:

• The 512x512 icon (or largest available)
• The name field from your manifest
• The background_color field
• The theme_color field

Make sure your 512x512 icon looks good on this splash screen. It appears centered on the background color while the app loads.

{
  "name": "Your App Name",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Shortcuts Icons

PWAs can define shortcuts that appear when users long-press the app icon. Each shortcut can have its own icon:

{
  "shortcuts": [
    {
      "name": "New Document",
      "url": "/new",
      "icons": [
        {
          "src": "/icons/shortcut-new.png",
          "sizes": "96x96",
          "type": "image/png"
        }
      ]
    }
  ]
}

Shortcut icons are typically 96x96 pixels.

File Format Requirements

Stick with PNG for maximum compatibility. WebP works in modern browsers if you want smaller files, but always include PNG fallbacks.

All icons should be:

• Square (same width and height)
• PNG format with RGB color
• No transparency for splash screen icons
• Transparent background is fine for home screen icons

Common Mistakes

Missing the 512x512 icon. Chrome specifically needs this for the install prompt and splash screen. Without it, your PWA might not be installable.

Ignoring maskable icons. On Android, your icon might get cropped awkwardly if you don't account for the maskable safe zone. Either provide maskable icons or ensure your regular icon has enough padding.

Forgetting the Apple touch icon. iOS doesn't use manifest icons. Your PWA will have a blank or screenshot icon on iOS home screens without the touch icon.

Wrong file paths. Manifest icon paths are relative to the manifest file location, not the HTML file. Use absolute paths starting with / to avoid confusion.

Transparent splash icons. The splash screen background color shows through transparent areas. If your icon has transparency, it might look wrong on the splash.

Testing Your PWA Icons

1. Chrome DevTools: Open Application > Manifest to see if your icons are detected correctly.

2. Install prompt: Trigger the install prompt and check the icon shown in the preview.

3. Android home screen: Install the PWA and verify the icon looks correct on the home screen.

4. Splash screen: Launch the installed PWA and check the splash screen appearance.

5. iOS home screen: Add to home screen on an iPhone and verify the Apple touch icon.

Minimal Setup

If you want the simplest possible setup that works:

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

Plus in your HTML:

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

Three icon files (192, 512, and 180 for Apple) cover the essentials. Add more sizes and maskable versions if you want finer control.