App Icon Design: iOS and Android Requirements, Design Principles, and A/B Testing
The app icon is the smallest piece of brand identity with the largest commercial impact in the mobile ecosystem. It is the first visual impression in App Store and Google Play search results, the persistent brand touchpoint on a user's home screen, and one of the most tested and optimised elements in App Store Optimisation (ASO).
iOS App Icon Requirements
Apple's Human Interface Guidelines specify precise requirements for iOS app icons:
- App Store submission icon: 1024×1024px, PNG, no transparency
- Display icons: iOS generates all required device sizes (120×120px for iPhone, 167×167px for iPad) from the 1024×1024px submission icon — do not submit these separately in App Store Connect (deprecated from Xcode 14)
- No transparency: iOS applies the rounded rectangle (squircle) mask — design within the full square canvas; Apple masks automatically
Critical design rule: never add rounded corners yourself. The iOS system applies the squircle (superellipse) mask, and Apple's reviewing system will reject or flag app icons that attempt to simulate the mask manually.
Android App Icon Requirements
Google Play icon requirements:
- App Store submission icon (adaptive icon foreground): 512×512px PNG
- Adaptive icon: Android 8.0 (API 26)+ uses adaptive icons — a foreground layer (108×108dp) that can be masked by the device launcher. The foreground must keep all critical design elements within the 72×72dp safe zone (centred), as launcher shapes vary by device (circle, squircle, rounded rectangle, teardrop)
- Legacy icon (for older Android versions): 192×192px PNG
The adaptive icon system requires a separate foreground layer (the brand symbol or wordmark) and optionally a background layer (solid colour or pattern). Design the foreground with sufficient padding from all edges to ensure the symbol remains visible under any launcher mask shape.
Design Principles for Effective App Icons
Legibility at 40×40px
App icons appear at approximately 40×40px in search results and notification bars. Every design decision must be evaluated at this size. If a design element is not visible at 40×40px, it does not contribute to the icon's effectiveness.
Implications:
- Wordmarks with small text become illegible — reduce to an initial letter, monogram, or symbol
- Multi-element compositions with many small details resolve into visual noise
- Fine lines below 2px at final display size disappear entirely
Icon vs App Name Redundancy
The app icon appears alongside the app name in listings. It is therefore unnecessary (and counterproductive) to include the app name text within the icon — it is duplicated in the label below, and the text within the icon is illegible at small sizes. The icon should communicate brand identity through a symbol, colour, or composition — not typography.
Exception: monogram icons (a single letter or initialisation) where the letterform is the primary brand identifier.
Colour Strategy
iOS and Android icons render against diverse home screen backgrounds. Test your icon against:
- Dark home screens (the most common dark mode scenario)
- Light home screens
- Photos/wallpapers as backgrounds (the highest variability scenario)
An icon that disappears against a white home screen in light mode, or against a dark home screen in dark mode, has a significant visibility problem. Solutions: high contrast between the icon's dominant colour and its background, or a visible icon boundary (a subtle shadow, border, or background plate).
A/B Testing App Icons
Both App Store Connect (iOS) and Google Play Console (Android) provide native A/B testing tools for app icons, screenshots, and store metadata:
- App Store Connect Product Page Optimisation: Test up to 3 treatment variants against the default app icon. Google Analytics for Firebase or ASA (Apple Search Ads) can provide statistical significance analysis.
- Google Play Store Listing Experiments: Test icon variants directly in the Google Play Console with automatic traffic splitting and statistical significance reporting.
Icon A/B test hypotheses to explore:
- Symbol-only vs. monogram/letterform
- Light background vs. dark background
- Single dominant colour vs. gradient
- Geometric precision vs. organic/hand-drawn quality
WhatsApp Us