Android Icon Requirements
Android uses your website's icons in multiple places: Chrome's new tab page, home screen shortcuts, and Progressive Web Apps. Two sizes are essential for complete coverage.
192x192 pixels
Filename: android-chrome-192x192.png
Use: Home screen icon, Chrome new tab
Standard size for Android home screen shortcuts and Chrome's most visited sites.
512x512 pixels
Filename: android-chrome-512x512.png
Use: Splash screens, high-DPI displays
Used for splash screens in PWAs and ensures crisp display on all Android devices.
manifest.json Configuration
Android requires a Web App Manifest file (manifest.json) that declares your icons. This file tells Android how to display your site when saved to the home screen.
{
"name": "My Website",
"short_name": "MySite",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Manifest Field Explanations
name
Full name displayed in install prompt and app drawer
short_name
Shorter name for home screen (12 chars max recommended)
theme_color
Color of browser toolbar and status bar
background_color
Splash screen background color when launching
display
How app appears: standalone, fullscreen, minimal-ui, browser
start_url
URL to load when app is launched from home screen
HTML Link Tag
Reference your manifest.json file in your HTML <head>:
<!-- In your <head> section -->
<link rel="manifest" href="/manifest.json">
<!-- Optional: Direct icon links (fallback) -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<!-- Theme color for Android Chrome toolbar -->
<meta name="theme-color" content="#ffffff">Adaptive Icons & Maskable Icons
Android 8.0+ supports adaptive icons that can be masked into different shapes (circle, square, rounded square, squircle) depending on the device manufacturer's theme.
What are Maskable Icons?
Maskable icons have a "safe zone" where important content must stay. The outer 20% can be cropped depending on the device's shape preference.
Safe Zone (80% center)
- ✅ Logo and important elements go here
- ✅ Always visible regardless of mask shape
- ✅ Equivalent to 384x384 area in 512x512 icon
Bleed Area (20% edges)
- ⚠️ Background color or pattern only
- ⚠️ May be cropped on some devices
- ⚠️ No critical text or logo elements
Creating Maskable Icons
- Start with your regular 512x512 icon
- Scale logo down to fit in center 80% (384x384 area)
- Add background color or pattern in remaining 20%
- Test with Maskable.app tool
- Add to manifest with "purpose": "maskable"
Add to Home Screen Behavior
How Users Add Your Site
- User opens your site in Chrome on Android
- Chrome may show "Add to Home Screen" banner automatically
- Or user taps Chrome menu → "Add to Home Screen"
- User confirms and icon appears on home screen
- Tapping icon launches site in standalone mode
Triggering Install Prompt
Chrome shows the install prompt automatically if your site meets these criteria:
- Has a valid manifest.json file
- Served over HTTPS
- Has a service worker registered
- User has engaged with site (dwells for 30+ seconds)
Testing on Android
Android Testing Checklist
Test on Real Device
Open Chrome on Android phone, visit your site, add to home screen
Check Icon Appearance
Verify icon looks good among other apps on home screen
Test Launch Behavior
Tap icon, ensure it opens in standalone mode (no browser UI)
Validate Manifest
Use Chrome DevTools → Application → Manifest to check for errors
Test Theme Color
Verify toolbar/status bar displays your theme color correctly
Common Android Icon Issues
❌ Icon Not Appearing
Possible Causes:
- manifest.json not found or invalid JSON
- Icon file paths incorrect in manifest
- Missing manifest link in HTML
- CORS issues (manifest served from different domain)
Solution: Check browser console for errors, validate JSON syntax, verify file paths
❌ Icon Looks Pixelated
Possible Causes:
- Using 192x192 on high-DPI device
- Image upscaled from smaller source
- Low quality PNG compression
Solution: Provide 512x512 version, use high-quality source image at 512x512+
❌ Icon Cropped Incorrectly
Possible Causes:
- Logo too close to edges in maskable icon
- No maskable icon provided (regular icon used as fallback)
Solution: Create proper maskable icon with 80% safe zone, test with Maskable.app
Browser Compatibility
| Feature | Chrome Android | Firefox Android | Samsung Internet |
|---|---|---|---|
| Basic manifest | ✅ Full support | ✅ Full support | ✅ Full support |
| Maskable icons | ✅ Chrome 93+ | ❌ Not supported | ✅ v14+ |
| Install prompt | ✅ Full support | ⚠️ Manual only | ✅ Full support |
| Standalone mode | ✅ Full support | ✅ Full support | ✅ Full support |
Generate Android Icons Automatically
Our favicon generator creates both 192x192 and 512x512 Android icons with optional maskable versions, plus a complete manifest.json file. Everything ready to implement.
Create Android Icons Now →