5.0 KiB
5.0 KiB
Platform Icon Requirements
Detailed specifications for each platform's icon requirements.
Apple App Store (iOS/iPadOS)
Key Requirements:
- NO transparency - must have solid background
- NO rounded corners - iOS applies mask automatically
- 1024x1024px for App Store
- sRGB color space
Required Sizes:
| Size | Usage |
|---|---|
| 1024x1024 | App Store |
| 180x180 | iPhone @3x |
| 167x167 | iPad Pro @2x |
| 152x152 | iPad @2x |
| 120x120 | iPhone @2x, iPhone Spotlight @3x |
| 87x87 | iPhone Settings @3x |
| 80x80 | iPad Spotlight @2x |
| 76x76 | iPad |
| 60x60 | iPhone Notification @3x |
| 58x58 | iPhone/iPad Settings @2x |
| 40x40 | iPhone Spotlight @2x, iPad Notification @2x |
| 29x29 | iPhone/iPad Settings |
| 20x20 | iPhone/iPad Notification |
Asset Catalog Structure:
AppIcon.appiconset/
├── Contents.json
├── AppIcon-1024.png
├── AppIcon-60@3x.png
├── AppIcon-60@2x.png
└── ...
Google Play Store (Android)
Key Requirements:
- 512x512px for Play Store listing
- Transparency allowed
- 32-bit PNG (ARGB)
Adaptive Icons (Android 8.0+):
- Foreground layer: 108dp (432px @xxxhdpi)
- Safe zone: 72dp centered (66% of total)
- Background layer: separate solid or gradient
- System applies various masks (circle, squircle, etc.)
Required Sizes (mipmap folders):
| Density | Size | Folder |
|---|---|---|
| xxxhdpi | 192x192 | mipmap-xxxhdpi |
| xxhdpi | 144x144 | mipmap-xxhdpi |
| xhdpi | 96x96 | mipmap-xhdpi |
| hdpi | 72x72 | mipmap-hdpi |
| mdpi | 48x48 | mipmap-mdpi |
Adaptive Foreground Sizes:
| Density | Size |
|---|---|
| xxxhdpi | 432x432 |
| xxhdpi | 324x324 |
| xhdpi | 216x216 |
| hdpi | 162x162 |
| mdpi | 108x108 |
Favicon (Web)
Key Requirements:
- favicon.ico for legacy browser support
- PNG fallbacks for modern browsers
- apple-touch-icon.png for iOS Safari
Recommended Files:
| File | Size | Usage |
|---|---|---|
| favicon.ico | 16, 32, 48 | Legacy browsers, Windows |
| favicon-32x32.png | 32x32 | Standard browsers |
| favicon-16x16.png | 16x16 | Browser tabs |
| apple-touch-icon.png | 180x180 | iOS Safari |
| safari-pinned-tab.svg | Vector | Safari pinned tabs |
| favicon-256x256.png | 256x256 | High-DPI, thumbnails |
HTML Integration:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
PWA (Progressive Web App)
Key Requirements:
- Multiple sizes for manifest.json
- Maskable icons for Android adaptive display
- Transparency allowed
Manifest Sizes:
| Size | Purpose |
|---|---|
| 512x512 | Install prompt, splash screen |
| 384x384 | Splash screen |
| 256x256 | Various contexts |
| 192x192 | Home screen (Android) |
| 144x144 | Taskbar |
| 128x128 | Chrome Web Store |
| 96x96 | Older Android |
| 72x72 | Legacy |
| 48x48 | Legacy |
Maskable Icons:
- Safe zone: 80% of icon area (centered)
- Used for adaptive home screen icons
- Same sizes as standard icons
manifest.json Example:
{
"icons": [
{ "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/maskable-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
{ "src": "/maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}
macOS (.icns)
Key Requirements:
- ICNS format (Apple proprietary bundle)
- Created via
iconutil -c icns - Requires .iconset directory with specific filenames
Required Sizes:
| Filename | Size | Usage |
|---|---|---|
| icon_512x512@2x.png | 1024x1024 | Retina |
| icon_512x512.png | 512x512 | Standard |
| icon_256x256@2x.png | 512x512 | Retina |
| icon_256x256.png | 256x256 | Standard |
| icon_128x128@2x.png | 256x256 | Retina |
| icon_128x128.png | 128x128 | Standard |
| icon_32x32@2x.png | 64x64 | Retina |
| icon_32x32.png | 32x32 | Standard |
| icon_16x16@2x.png | 32x32 | Retina |
| icon_16x16.png | 16x16 | Standard |
Creation Process:
# Create iconset directory
mkdir MyApp.iconset
# Add all required PNGs with exact filenames
# Then convert to ICNS
iconutil -c icns MyApp.iconset -o MyApp.icns
Windows (.ico)
Key Requirements:
- ICO format (multi-resolution container)
- Created via ImageMagick or similar
- Includes multiple sizes in one file
Required Sizes:
| Size | Usage |
|---|---|
| 256x256 | High-DPI, Windows 10+ |
| 128x128 | Large icons view |
| 64x64 | Medium icons |
| 48x48 | Explorer, Start menu |
| 32x32 | Desktop, taskbar |
| 24x24 | Toolbar |
| 16x16 | Title bar, small icons |
Creation with ImageMagick:
convert icon-256.png icon-128.png icon-64.png icon-48.png icon-32.png icon-24.png icon-16.png app.ico
Note: PNG compression is supported in ICO files for sizes ≥256px.