PWA Icon Guide: Progressive Web App Requirements

What Makes PWA Icons Different?

Progressive Web App icons go beyond traditional favicons. They need to work as app icons on home screens, splash screens, and in app launchers across different devices and operating systems.

PWA Icon Requirements

Understanding Maskable Icons

Maskable icons are specifically designed for Android's adaptive icon system. They allow your icon to conform to the shape preferences of different device manufacturers.

Creating Maskable Icons

1. Start with your regular 512x512 icon
2. Scale your logo to fit within center 80% (410x410 area)
3. Add solid background color or subtle pattern in outer 20%
4. Test with Maskable.app Editor
5. Export and add to manifest with "purpose": "maskable"

Complete manifest.json Structure

{
  "name": "My Progressive Web App",
  "short_name": "MyPWA",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#2196f3",
  "background_color": "#ffffff"
}

Manifest Field Explanations

Splash Screen Configuration

PWAs automatically generate splash screens from your manifest data. The splash screen appears briefly when launching the app from the home screen.

Install Prompt Customization

You can customize the install experience using the `beforeinstallprompt` event:

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing
  e.preventDefault();
  // Store the event for later use
  deferredPrompt = e;
  // Show your custom install button
  showInstallButton();
});

function showInstallButton() {
  const installButton = document.getElementById('install-btn');
  installButton.style.display = 'block';
  
  installButton.addEventListener('click', async () => {
    // Show the install prompt
    deferredPrompt.prompt();
    // Wait for the user's response
    const { outcome } = await deferredPrompt.userChoice;
    console.log(`User response: ${outcome}`);
    // Clear the deferredPrompt
    deferredPrompt = null;
  });
}

Service Worker Integration

PWAs require a service worker for offline functionality and install capability:

// Register service worker in your main JS file
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/sw.js')
      .then(reg => console.log('SW registered:', reg))
      .catch(err => console.log('SW registration failed:', err));
  });
}

Testing PWA Icons with Lighthouse

Google Lighthouse audits your PWA setup. Here's what it checks for icons:

Desktop vs Mobile PWA Icons

Browser Support for PWA Icons

Common PWA Icon Issues