PWA Icons & Manifest Guide
Everything you need to know about creating icons for Progressive Web Apps, including maskable icons, web app manifest configuration, and platform-specific requirements.
What are PWA Icons?
PWA (Progressive Web App) icons are special favicons that allow your web app to be
installed on mobile devices and appear like a native app. They're defined in the
site.webmanifest file and enable features like:
- Home screen installation
- App drawer appearance
- Splash screen display
- Task switcher icons
- Notification icons
- Share target icons
- Adaptive icon shapes (Android)
- App-like experience
Required Icon Sizes for PWA
| Size | Purpose | Platform | Priority |
|---|---|---|---|
| 192x192 | Home screen icon | Android, Chrome | Required |
| 512x512 | Splash screen, high-res display | Android, Chrome | Required |
| 512x512 (maskable) | Adaptive icon (with safe zone) | Android | Recommended |
| 144x144 | Medium-density displays | Android | Optional |
| 96x96 | Low-density displays | Android | Optional |
| 72x72 | Extra low-density | Android | Legacy |
Maskable Icons Explained
What are Maskable Icons?
Maskable icons are a special type of PWA icon that works with Android's adaptive icon system. They allow your icon to adapt to different shapes (circle, square, rounded square) based on the device manufacturer's theme.
Without Maskable Icon
Icon may be cropped
With Maskable Icon
Perfect fit in any shape
Safe Zone Requirements
Important!
- Total size: 512x512 pixels
- Safe zone: Center 80% (409.6 x 409.6 pixels)
- Margin: 51.2 pixels (10%) on each side
- Critical content: Keep within safe zone
- Background: Extend to edges (will be visible on some devices)
How to Create Maskable Icons
- Start with 512x512 canvas with your brand color background
- Add safe zone guides at 51px from each edge
- Place your icon in the center safe zone (80% area)
- Extend background to all edges
- Test with maskable.app to preview different shapes
Web App Manifest Configuration
The site.webmanifest file defines how your PWA appears and behaves when
installed. Here's a complete example:
Complete Manifest Example
{
"name": "My Progressive Web App",
"short_name": "My PWA",
"description": "A professional PWA with complete icon set",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0066cc",
"orientation": "any",
"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-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512x512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"categories": ["productivity", "business"],
"screenshots": [
{
"src": "/screenshots/desktop.png",
"sizes": "1920x1080",
"type": "image/png"
}
]
}Key Manifest Properties
| Property | Description | Example |
|---|---|---|
name |
Full app name (appears on splash screen) | "My Progressive Web App" |
short_name |
Short name (under icon on home screen) | "My PWA" |
description |
App description for app stores | "A professional PWA..." |
start_url |
URL to open when app launches | "/" or "/app" |
display |
Display mode (standalone, fullscreen, minimal-ui) | "standalone" |
background_color |
Splash screen background color | "#ffffff" |
theme_color |
Browser UI color (toolbar, status bar) | "#0066cc" |
icons |
Array of icon objects | See examples above |
Icon Purpose Values
Default purpose. Icon can be used in any context. The user agent may crop or add padding as needed.
Use for: Regular icons (192x192, 512x512)
Adaptive icons. Icon designed with safe zone for masking to different shapes.
Use for: Android adaptive icon (512x512)
Dual purpose. Single icon can be used in both contexts. Must follow maskable requirements.
Use for: Versatile icons (if designed properly)
PWA Splash Screens
When users launch your PWA from the home screen, browsers show a splash screen. This is automatically generated from your manifest data:
Splash Screen Elements
- Background: Uses
background_color - Icon: Uses largest suitable icon (usually 512x512)
- Name: Uses
nameproperty - Theme: Status bar uses
theme_color
Best Practices
- Use high-resolution 512x512 icon
- Choose contrasting background color
- Keep name short (visible on splash)
- Test on actual devices
HTML Implementation
Link your manifest file in the HTML <head>:
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Theme color for browser UI -->
<meta name="theme-color" content="#0066cc">
<!-- iOS specific (doesn't use manifest) -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">Testing Your PWA Icons
Chrome DevTools
- Open DevTools (F12)
- Go to Application tab
- Click "Manifest" in sidebar
- Verify all icons load
- Check for warnings
- Use "Add to home screen" button to test
Lighthouse Audit
- Open Chrome DevTools
- Go to Lighthouse tab
- Select "Progressive Web App"
- Run audit
- Check PWA score
- Fix any icon-related issues
Real Device Testing
- Test on Android devices
- Install to home screen
- Verify icon appearance
- Check splash screen
- Test different launcher shapes
- Verify notifications use correct icon
Online Tools
- Maskable.app: Test maskable icons
- Manifest Validator: Check manifest syntax
- PWA Builder: Validate PWA features
- Favicon Checker: Verify all icons load
Generate Complete PWA Icon Package
Create all PWA icons including maskable variants with proper manifest configuration
Generate PWA Icons Now