PWA Icon Checklist

Manifest
Required configuration

Multiple Sizes
192x192, 512x512

Maskable
Adaptive icons

Splash Screen
Launch experience

Web App Manifest

Complete Manifest Configuration

manifest.json / site.webmanifest

{
  "name": "My Progressive Web App",
  "short_name": "My PWA",
  "description": "A complete PWA with proper icons",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4",
  "orientation": "any",
  "scope": "/",
  "lang": "en-US",
  "dir": "ltr",
  "categories": ["productivity"],
  
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/maskable-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  
  "screenshots": [
    {
      "src": "/screenshots/desktop.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    },
    {
      "src": "/screenshots/mobile.png",
      "sizes": "750x1334",
      "type": "image/png",
      "form_factor": "narrow"
    }
  ]
}

Link Manifest in HTML

<!-- In <head> section -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#4285f4">

Manifest Properties Explained

Property	Purpose	Required?
`name`	Full app name (shown during install)	Yes
`short_name`	Short name (home screen label)	Recommended
`icons`	Array of icon objects	Yes
`start_url`	URL when app launches	Yes
`display`	standalone, fullscreen, minimal-ui	Recommended
`theme_color`	Browser UI color	Optional
`background_color`	Splash screen background	Optional

Required Icon Sizes

Complete Size Checklist

Size	Purpose	Priority	Platform
192x192	Home screen icon (Android)	Critical	Android, Chrome
512x512	Splash screen, high-res	Critical	Android, Chrome
144x144	Legacy Android, Windows tiles	Recommended	Android, Windows
152x152	iPad home screen	Recommended	iOS (iPad)
72x72	Small icons, MDPI devices	Optional	Low-res Android
96x96	HDPI devices	Optional	Mid-range Android
128x128	XHDPI devices	Optional	Standard Android
384x384	XXXHDPI devices	Optional	High-end Android

Minimum PWA: You need at least 192x192 and 512x512 icons for a valid PWA.

Maskable Icons (Adaptive Icons)

Android 8+ Adaptive Icon Support

What are Maskable Icons?

Starting with Android 8 (Oreo), the system applies various masks (shapes) to icons: circle, square, rounded square, squircle. Maskable icons ensure your icon looks good regardless of the device's shape preference.

Safe Zone Design

Center 80%: Safe zone (always visible)
Full 100%: Background fill (may be cropped)

Design Guidelines:

Keep logo/text in center 80% circle
Extend background to edges (full bleed)
Use solid background color
Avoid important content near edges
Test with maskable.app

Manifest Configuration

{
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"  // Standard icon
    },
    {
      "src": "/icons/maskable-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"  // Adaptive icon
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"  // Can be used for both
    }
  ]
}

Install Prompt & Splash Screen

User Installation Experience

Install Prompt Requirements

For browsers to show "Add to Home Screen" prompt:

? Valid web app manifest with name, short_name, icons, start_url
? Served over HTTPS
? Service worker registered
? User engagement (varies by browser)

Custom Install Button (JavaScript)

let deferredPrompt;
const installButton = document.getElementById('install-button');

// Listen for beforeinstallprompt event
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent automatic prompt
  e.preventDefault();
  
  // Store event for later use
  deferredPrompt = e;
  
  // Show custom install button
  installButton.style.display = 'block';
});

// Handle install button click
installButton.addEventListener('click', async () => {
  if (!deferredPrompt) return;
  
  // Show install prompt
  deferredPrompt.prompt();
  
  // Wait for user choice
  const { outcome } = await deferredPrompt.userChoice;
  console.log(`User ${outcome === 'accepted' ? 'accepted' : 'dismissed'} the install prompt`);
  
  // Clear the deferredPrompt
  deferredPrompt = null;
  
  // Hide install button
  installButton.style.display = 'none';
});

// Listen for app installation
window.addEventListener('appinstalled', () => {
  console.log('PWA was installed');
  deferredPrompt = null;
});

Splash Screen Configuration

Chrome automatically generates splash screen using:

name from manifest ? Shown as app title
background_color ? Splash screen background
icons (512x512 or largest) ? Centered on splash
theme_color ? Status bar color

PWA Testing & Validation

Verify PWA Configuration

Chrome DevTools

Open your PWA in Chrome
Press F12 ? Application tab
Check Manifest section:
- Verify all icons are listed
- Click icon links to preview
- Check for warnings/errors
Service Workers section ? Verify SW registered
Click "Add to home screen" link to test install

Lighthouse Audit

# CLI
lighthouse https://yourpwa.com --only-categories=pwa --view

# Chrome DevTools
# 1. F12 ? Lighthouse tab
# 2. Select "Progressive Web App"
# 3. Click "Generate report"
# 4. Review icon-related checks:
#    - Manifest contains icons
#    - Icons are correct sizes
#    - Icons load successfully

Maskable Icon Tester

Test your maskable icon:

Visit: maskable.app
Upload your maskable icon PNG
Preview with different mask shapes
Verify safe zone compliance
Download adjusted version if needed

PWA Icon Best Practices

? Best Practices

Provide at minimum: 192x192 & 512x512
Include maskable versions for Android 8+
Use PNG format (not JPEG or ICO)
Test with Lighthouse PWA audit
Verify safe zone on maskable icons
Set meaningful theme_color
Optimize file sizes (<200KB total)
Test install prompt on real device

? Common Mistakes

Missing 192x192 or 512x512 icons
Not providing maskable versions
Using non-square icon dimensions
Forgetting to link manifest in HTML
Invalid JSON in manifest file
Icons outside manifest safe zone
Not testing on Android devices
Missing service worker registration

PWA Favicon Complete Guide