Quick Reference
🍎 iOS / Apple
🤖 Android / Chrome
🌐 Web / Favicons
🪟 Windows / Universal
Platform Specifications
Apple / iOS Ecosystem
| Device / Context | Dimensions | Format | Status | Notes |
|---|---|---|---|---|
| iPhone (Current) | 180×180 | PNG | Required | @3x resolution, no round corners |
| iPad (Current) | 152×152 | PNG | Required | @2x resolution |
| iPhone (Legacy) | 120×120 | PNG | Optional | @2x for older iOS versions |
| iPad (Legacy) | 167×167 | PNG | Optional | @2.5x for older iPads |
| Safari Web (Mac) | 16×16 / 32×32 | ICO / PNG | Required | Standard favicon fallback |
Android / Chrome OS
| Context | Dimensions | Format | Status | Notes |
|---|---|---|---|---|
| Play Store | 512×512 | PNG | Required | RGB only, no transparency, 1024×1024 for high res |
| Web / Chrome PWA | 192×192 | PNG / WebP | Required | Standard Android icon size |
| Web / Chrome (Legacy) | 96×96 / 48×48 | PNG | Optional | MDPI & XHDPI fallbacks |
| Adaptive Icons | 432×432 | PNG | Optional | 108dp safe zone in center |
Web / Browser Standards
| Context | Dimensions | Format | Status | Notes |
|---|---|---|---|---|
| Standard Favicon | 16×16 / 32×32 | ICO / PNG | Required | Multi-size ICO recommended |
| Apple Touch Icon | 180×180 | PNG | Required | Links: rel="apple-touch-icon" |
| PWA Manifest | 192×192 / 512×512 | PNG / WebP | Required | Transparent background allowed |
| Modern Favicon | Vector | SVG | Optional | Chrome/Edge support, scalable |
Implementation Best Practices
🎯 Safe Zones & Bleed
Keep critical elements within a central safe zone. Apple and Android apply corner radius and masking automatically. Avoid placing text or logos near edges.
🎨 Color & Transparency
Export in sRGB color space. Use transparency for PNGs unless Play Store requires solid backgrounds. Avoid relying on shadows or effects that get stripped.
/* CSS fallback for PWA theme color */
📐 Naming & Structure
Use consistent naming conventions. Separate directories per platform. Include `favicon.ico` in root for legacy browsers.
/assets/icons/
├── ios/
├── android/
├── web/
└── favicon.ico
🔍 SEO & Metadata
Link icons properly in `
`. Use multiple `sizes` attributes for browser negotiation. Add `type="image/png"` for clarity.Ready-to-Use Templates
Download our pre-configured icon kits, Sketch/Figma templates, and automated generation scripts.