Home Articles Icon Design App Icon Design Guidelines for iOS & Android (2026): Sizes, Safe Area & Liquid Glass

Table of contents

  • Quick nav

Was this helpful?

Share it with someone who needs it.

App Icon Design Guidelines for iOS & Android (2026): Sizes, Safe Area & Liquid Glass

官
AppShotMaker
10/18/2026

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)

PlatformStore / listing iconNotes
Google Play512 × 512 PNG, 32-bit with alpha, ≤1024 KBSeparate from launcher densities inside the APK/AAB; must follow Play icon metadata rules (no ranking/price badges)
Apple App StoreDelivered via your Xcode asset pipeline / Icon Composer outputDo 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

  1. Logo legible when cropped to a circle.
  2. Background layer is a simple color or subtle pattern—avoid important detail near edges.
  3. Test on Pixel, Samsung, and one OEM with aggressive squircle masks.
  4. Export Play’s 512×512 with transparency for the store listing.
  5. 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:

ConcernUnifySplit
Color storyYesGamut tweaks per OS
Logo geometrySame core markSafe-zone padding differs (Android 66dp vs iOS grid)
Shadows / glossLet each OS own effectsDo not copy iOS specular onto Android adaptive layers
Store listing vs launcherSame recognitionFollow 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

  1. Silhouette test — shrink to 32×32; if the idea dies, simplify.
  2. One focal metaphor — checklist, flame, wave—not all three.
  3. Contrast on both light and dark wallpapers.
  4. No store badges (“#1”, “Sale”, category names)—Play forbids misleading badges; Apple rejects junk metadata and misleading creatives.
  5. Distinct from category clones — blue gradient + white outline letter is an invisible tax.
  6. 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)

  1. Sketch 5 metaphors on paper; kill 3.
  2. Vector the winner on a 1024 (or larger) square grid.
  3. Build Android adaptive foreground/background/mono.
  4. Build iOS layered art; assemble in Icon Composer when targeting current OS design.
  5. Export Play 512 and App Store pipeline assets.
  6. QA on physical devices + store listing previews.
  7. Archive masters; never redesign from a flattened PNG.

Common failure modes

FailureSymptomFix
Detail overloadMud at small sizeFewer shapes, thicker strokes
Mask clippingLogo ears cut offPull art into safe zone
Baked shadowDouble-shadow under adaptive maskFlatten effects out of layers
Play PNG with wrong bit depthUpload complaints32-bit with alpha for icon; no alpha on screenshots
Trend chasingIndistinguishable in categoryStronger 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.

Ready to design your store screenshots?

立即体验应用截图工坊,创建令人惊艳的视觉展示效果!