Mobile Favicon Complete Guide
Master mobile favicon setup: iOS Apple Touch Icons, Android Chrome icons, home screen bookmarks, responsive designs, and mobile-specific optimizations.
Mobile Platform Requirements
iOS Safari
- Apple Touch Icon: 180x180
- Home screen bookmarks
- No transparency support
- Automatic rounded corners
Android Chrome
- Web manifest icons: 192x192, 512x512
- Add to home screen
- Transparency supported
- Customizable theme color
iOS Safari Setup
Apple Touch Icon Configuration
Required Sizes
| Device | Size | Priority | Usage |
|---|---|---|---|
| iPhone (all models) | 180x180 | Required | Home screen, Spotlight |
| iPad (Retina) | 167x167 | Optional | iPad home screen |
| iPad (non-Retina) | 152x152 | Legacy | Older iPads |
HTML Implementation
<!-- Modern iOS (180x180 covers all devices) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Optional: Specific sizes for older devices -->
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-ipad-legacy.png">
<!-- iOS meta tags (optional enhancements) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Your App Name">Design Guidelines
? Do
- Use solid background (no transparency)
- Fill entire 180x180 canvas
- Use simple, recognizable design
- Test on actual iOS device
- Consider rounded corner effect
? Don't
- Use transparent background (will be black)
- Add your own rounded corners
- Include text (hard to read at small size)
- Use complex gradients
- Forget padding at edges
Testing on iOS
- Open your website in Safari on iPhone
- Tap Share button (box with arrow)
- Select "Add to Home Screen"
- Verify icon appears correctly
- Check icon on home screen after adding
Android Chrome Setup
Web App Manifest Configuration
Required Icon Sizes
| Size | Purpose | Priority |
|---|---|---|
| 192x192 | Home screen icon | Required |
| 512x512 | Splash screen, high-res displays | Required |
| 144x144 | Legacy Android support | Optional |
site.webmanifest File
{
"name": "Your App Name",
"short_name": "App",
"description": "App description",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4285f4",
"orientation": "portrait-primary",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}HTML Link
<!-- Link to manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Theme color (appears in browser UI) -->
<meta name="theme-color" content="#4285f4">
<!-- Fallback icons (if manifest not supported) -->
<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">Adaptive/Maskable Icons
What are maskable icons? Android 8+ uses adaptive icons with various shapes (circle, square, squircle). Maskable icons have safe zones to prevent clipping.
Design Maskable Icon:
- Keep important content in center 80% (safe zone)
- Extend design to full 100% for background bleed
- Test with maskable.app
- Add
"purpose": "maskable"to manifest
Testing on Android
- Open website in Chrome on Android
- Tap menu (?) ? "Add to Home screen"
- Or look for "Install app" prompt
- Verify icon and name appear correctly
- Check theme color in browser UI
Responsive Mobile Favicon
Device Density & Size Variations
Screen Density Guide
| Density | Scale | Example Devices | Icon Size |
|---|---|---|---|
| MDPI | 1x | Older Android phones | 48x48 |
| HDPI | 1.5x | Basic smartphones | 72x72 |
| XHDPI | 2x | iPhone 6/7/8, many Androids | 96x96 |
| XXHDPI | 3x | iPhone X/11/12, flagship Androids | 144x144 |
| XXXHDPI | 4x | Pixel phones, high-end devices | 192x192 |
Complete Mobile HTML
<!-- Standard favicons for mobile browsers -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
<!-- iOS Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android Chrome Icons -->
<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">
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- Theme colors -->
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- Prevent iOS from auto-detecting phone numbers -->
<meta name="format-detection" content="telephone=no">Other Mobile Platforms
Windows Phone, Opera Mobile, etc.
Windows Phone Tiles
<!-- Windows Phone 8+ tile images -->
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#2b5797">
<!-- Browserconfig.xml for more control -->
<meta name="msapplication-config" content="/browserconfig.xml">browserconfig.xml
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>Opera Coast
<!-- Opera Coast icon (iPad) -->
<link rel="icon" type="image/png" sizes="228x228" href="/coast-228x228.png">Mobile Favicon Best Practices
? Best Practices
- Provide 180x180 for iOS (minimum)
- Provide 192x192 + 512x512 for Android
- Use web manifest for Android
- Test on real devices (iOS & Android)
- Use solid backgrounds for iOS
- Support maskable icons for Android 8+
- Set theme-color meta tag
- Keep designs simple and recognizable
? Common Mistakes
- Using transparent backgrounds for iOS icons
- Forgetting web manifest for Android
- Not testing on actual devices
- Using too small icon sizes (<180px)
- Complex designs unreadable at small sizes
- Missing "purpose": "maskable" for Android
- Ignoring safe zone for adaptive icons
- Not optimizing file sizes for mobile
Generate Mobile-Optimized Favicons
Create complete favicon packages for iOS, Android, and all mobile platforms
Generate Favicons