198 lines
5.0 KiB
Markdown
198 lines
5.0 KiB
Markdown
# 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:**
|
|
```html
|
|
<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:**
|
|
```json
|
|
{
|
|
"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:**
|
|
```bash
|
|
# 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:**
|
|
```bash
|
|
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.
|