Your icon is the smallest billboard that still has to convert
Before screenshots load, the icon does the first yes/no. It must survive home-screen clutter, store search grids, OS masks, dark mode, and—on Apple platforms—a more dynamic material system. This guide consolidates practical 2026 guidelines for indie designers shipping to both the App Store and Google Play: sizes, safe areas, adaptive icons, and a high-level view of Apple’s Liquid Glass / Icon Composer direction.
Store upload sizes (the files reviewers and stores see)
| Platform | Store / listing icon | Notes |
|---|
| Google Play | 512 × 512 PNG, 32-bit with alpha, ≤1024 KB | Separate from launcher densities inside the APK/AAB; must follow Play icon metadata rules (no ranking/price badges) |
| Apple App Store | Delivered via your Xcode asset pipeline / Icon Composer output | Do not ship marketing “rounded rect” baked into the master if the system already masks |
Always treat the store listing icon and on-device launcher icon as related but not identical pipelines—Play literally says the store icon does not replace the launcher icon.
Android adaptive icons (safe area that actually matters)
Android adaptive icons use layered artwork so OEMs can mask into circles, squircles, and other shapes, and so launchers can apply motion effects.
Per Android developer documentation on adaptive icons:
- Provide foreground and background layers (vectors preferred).
- Size layers to 108 × 108 dp.
- Keep critical logo art inside the ~66 × 66 dp safe zone centered in the 108 canvas—the outer 18 dp per side is reserved for masking and effects.
- Do not bake final masks or drop shadows into the layers; the system owns that.
- For themed icons (Android 13+), provide a monochrome layer when you want wallpaper-driven tinting; newer Android releases may auto-theme apps that omit one, but shipping your own mono layer keeps brand control.
Android design checklist
- Logo legible when cropped to a circle.
- Background layer is a simple color or subtle pattern—avoid important detail near edges.
- Test on Pixel, Samsung, and one OEM with aggressive squircle masks.
- Export Play’s 512×512 with transparency for the store listing.
- Avoid text longer than 2–3 characters; it vanishes at small sizes.
iOS icons and Liquid Glass (high-level)
Apple’s recent design direction introduces Liquid Glass—a dynamic material with optical depth—and layered app icons that respond to lighting and appearance modes. Official guidance emphasizes:
- Layered design — separate foreground / middle / background elements; let the system apply blur, reflection, refraction, highlights, and shadows.
- Simplified, optically balanced shapes — solid, filled, semi-transparent overlapping forms tend to fare better than heavy skeuomorphic detail.
- Appearance variants — light, dark, clear, and tinted looks on Home Screen; design so the metaphor survives each.
- System masking — rounded rect on iPhone/iPad/Mac, circular on watchOS; keep content centered to avoid clipping. Irregular shapes may receive a system background.
- Icon Composer — Apple’s tool for assembling multilayer Liquid Glass icons, previewing system effects, and producing a single file Xcode can use across iOS, iPadOS, macOS, watchOS, and App Store surfaces. Adding an Icon Composer file can replace older asset-catalog icon sets; Xcode can generate fallbacks for older OS versions—read Apple’s “Creating your app icon using Icon Composer” notes before migrating mid-release.
You do not need to fake glass highlights in Photoshop; over-rendering fights the system materials.
Practical iOS tips for indies
- Start from Apple’s updated icon grids (Apple Design Resources).
- Prefer fewer layers with clear depth roles over a dozen tiny fragments.
- Preview dark / clear / tinted early—many logos fail only in tinted mode.
- Keep marketing site icons consistent with, but not necessarily identical to, the live OS icon (flattened exports from Icon Composer help).
- Avoid baking the iOS mask into your master SVG; deliver full-bleed square art and let the system squircle it.
Cross-platform brand system
One metaphor, two technical implementations:
| Concern | Unify | Split |
|---|
| Color story | Yes | Gamut tweaks per OS |
| Logo geometry | Same core mark | Safe-zone padding differs (Android 66dp vs iOS grid) |
| Shadows / gloss | Let each OS own effects | Do not copy iOS specular onto Android adaptive layers |
| Store listing vs launcher | Same recognition | Follow each store’s file spec |
If users cannot match your Play icon to your App Store icon at a glance, pick a side and converge.
Composition principles that still beat trends
- Silhouette test — shrink to 32×32; if the idea dies, simplify.
- One focal metaphor — checklist, flame, wave—not all three.
- Contrast on both light and dark wallpapers.
- No store badges (“#1”, “Sale”, category names)—Play forbids misleading badges; Apple rejects junk metadata and misleading creatives.
- Distinct from category clones — blue gradient + white outline letter is an invisible tax.
- Accessible — avoid relying on red/green alone; respect reduced-transparency users by keeping shapes readable without blur.
ASO angle: icons and experiments
Icons influence install rate more than “ranking keywords,” but a weak icon caps every ASO win. Practical approach:
- Ship a clear metaphor aligned with your primary keyword (“scanner” should look scannable).
- On iOS, use Product Page Optimization / custom experiments when available to test icon variants with enough traffic.
- Change icons sparingly—recognition compounds over time; seasonal skins need an exit plan.
- Pair icon tests with screenshot tests; isolating variables matters.
Production pipeline (lean)
- Sketch 5 metaphors on paper; kill 3.
- Vector the winner on a 1024 (or larger) square grid.
- Build Android adaptive foreground/background/mono.
- Build iOS layered art; assemble in Icon Composer when targeting current OS design.
- Export Play 512 and App Store pipeline assets.
- QA on physical devices + store listing previews.
- Archive masters; never redesign from a flattened PNG.
Common failure modes
| Failure | Symptom | Fix |
|---|
| Detail overload | Mud at small size | Fewer shapes, thicker strokes |
| Mask clipping | Logo ears cut off | Pull art into safe zone |
| Baked shadow | Double-shadow under adaptive mask | Flatten effects out of layers |
| Play PNG with wrong bit depth | Upload complaints | 32-bit with alpha for icon; no alpha on screenshots |
| Trend chasing | Indistinguishable in category | Stronger unique metaphor |
Bottom line
Master the safe zones (Android’s 66dp core, Apple’s grid + centering), ship the correct store files (Play 512 with alpha), and adopt Liquid Glass layers at a high level through Icon Composer rather than faking materials by hand. A simple, recognizable mark that survives masks will outperform a trendy render that only looks good in your portfolio deck.