1. Single source of truth
Design once:
Master: 1024×1024 (or SVG if vector)
Safe area: keep key content inside ~80% center (for masking/cropping)
Background: define both light and dark compatibility Everything else is derived from this.
2. Universal icon set (apps + web + installs)
Core exports
1024×1024 PNG (store listings, macOS, fallback)
512×512 PNG (PWA, Android)
192×192 PNG (PWA minimum)
180×180 PNG (iOS home screen)
32×32 PNG
16×16 PNG
SVG (where supported)
3. Favicon (browser identity)
favicon.ico (16, 32, 48 embedded)
favicon.svg (modern browsers)
favicon-32.png
favicon-16.png
4. PWA / install (manifest)
192×192
512×512
512×512 maskable
This is what Chrome/Android actually uses when “installing” your site.
5. iOS (still its own universe)
180×180 (apple-touch-icon.png) ← critical
(optional but safe)
167×167
152×152
iOS still ignores your manifest, so this is non-negotiable.
there are special html HEAD lines for IOS.
6. Desktop app surfaces (optional but real)
If your “product” becomes installable or wrapped:
256×256 PNG
512×512 PNG
.ico (Windows)
.icns (macOS)
7. Social sharing
These are just as important as icons now—they are your first impression.
Open Graph (general: Facebook, LinkedIn, Slack, etc.)
1200×630 PNG/JPG (canonical)
Aspect ratio: ~1.91:1
X (Twitter)
1200×600 (safe)
Or reuse 1200×630
Square fallback (some platforms crop aggressively)
1200×1200
Optional high-res / future-proof
2400×1260 (2× retina OG)
8. Xcode
oh god I've run out of energy
9. Android Studio
Please help me.
10. Caching.
Everything has its own idea about cache Persistence. Good luck working out if you're doing it right.
Top comments (0)