Mobile App Icon Design

App icons are often the first touchpoint users have with your application. They must work at tiny sizes on home screens, represent your brand clearly, and meet strict platform requirements for both iOS and Android.

iOS App Icon Requirements

Apple has specific requirements for iOS app icons:

Required Sizes

1024×1024 - App Store (required)
180×180 - iPhone @3x
120×120 - iPhone @2x
167×167 - iPad Pro @2x
152×152 - iPad @2x
76×76 - iPad @1x
60×60 - Settings @3x
40×40 - Settings/Spotlight @2x
29×29 - Settings @1x
20×20 - Notifications @1x

iOS Design Guidelines

No transparency—solid background required
System applies corner radius automatically—don't include it
Avoid text in icons (hard to read at small sizes)
Simple, recognizable shapes work best
Don't replicate Apple UI elements

Android App Icon Requirements

Android adaptive icons provide flexibility across device manufacturers:

Adaptive Icon Layers

Foreground layer - 108×108 dp, visible content in center 72dp (safe zone)
Background layer - 108×108 dp, extends beyond visible area
Both layers are 108dp for 18dp of extra content that may be cropped

Legacy Support

48×48 mdpi - Base size
72×72 hdpi
96×96 xhdpi
144×144 xxhdpi
192×192 xxxhdpi
512×512 - Play Store

Designing for Recognition

App icons must be instantly recognizable at small sizes:

Simple silhouette - Should be identifiable from shape alone
Limited color palette - 2-3 colors maximum
Strong contrast - Clear separation between elements
Consistent with brand - Use brand colors and style
Unique on home screen - Stand out from other apps

Icon Grid and Safe Zones

Both platforms use grid systems for consistent sizing:

iOS Keylines

Circle: Diameter of approximately 80% of canvas
Square: Approximately 70% of canvas
Horizontal/vertical rectangles have specific proportions

Android Safe Zone

108×108 dp total canvas
72×72 dp visible area (center)
66×66 dp safe zone for critical content

Creating Adaptive Icons

Design Android adaptive icons with separate layers:

<!-- ic_launcher.xml -->
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background"/>
    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>

The background can be a solid color, gradient, or image. The foreground contains your icon graphic with transparency.

Testing App Icons

Verify icons work in real contexts:

Multiple home screen wallpapers - Light, dark, busy, simple
Folders - Icons appear smaller in folders
Different devices - Various screen sizes and densities
Notification area - If your icon appears in notifications
Settings app - Smaller icon sizes
Store listings - How it appears in search results

Common Design Mistakes

Avoid these frequent app icon errors:

Too much detail - Gets lost at small sizes
Text in icon - Usually illegible on home screen
Thin strokes - Disappear at small sizes
Complex gradients - Can look muddy when scaled
Too similar to competitors - Causes confusion
Different from brand - Creates disconnect with other materials

Export and Asset Generation

Streamline export with these approaches:

Design at 1024×1024 - Downscale from master
Use asset generators - Tools that create all sizes
Xcode Asset Catalog - Organizes iOS icon sizes
Android Studio - Image Asset wizard generates all densities

App Store Optimization

App icons affect discoverability and downloads:

Stand out in category - Research competitor icons
Consider A/B testing - Both stores support experiments
Seasonal updates - Some apps update icons for events
Preview with screenshots - Icon is part of the listing package

Iteration and Updates

App icons can evolve with your brand:

Major redesigns should maintain some recognition
Subtle refinements are common as design trends shift
Consider user familiarity before drastic changes
Update all sizes and platforms simultaneously