Creating Custom App Icons for iOS & Android

[!TIP] Key Takeaways for Mobile App Icons:

• iOS Master: Single 1024 × 1024 px PNG, 100% opaque (no alpha channel). Do not pre-round corners.
• Android Adaptive Master: 512 × 512 px or 1024 × 1024 px. Keep critical artwork inside the central 66% circular safe zone.
• Color Profile: Use sRGB or Display P3 for rich, vibrant color rendering on OLED and Retina screens.
• Export Bundles: Xcode requires an AppIcon.appiconset catalog; Android Studio requires res/mipmap-*dpi density folders.

Designing an app icon is one of the highest-impact moments in your product release cycle. Your icon is the first visual element prospective users encounter on the App Store or Google Play, and it sits directly on their home screen alongside world-class apps.

Both Apple and Google enforce strict technical specifications. Submitting the wrong format, leaving transparent pixels on iOS, or ignoring Android safe zones will result in automated store rejections or awkward visual clipping on user devices.

1. Apple iOS & iPadOS App Icon Specifications

Apple utilizes a single high-resolution master asset (1024 × 1024 px) for the App Store and automatically generates scaled assets for Spotlight, Settings, and Notifications.

┌──────────────────────────────────────────────┐
│  iOS 1024 × 1024 px Master Asset             │
│                                              │
│      ╭────────────────────────────────╮      │
│      │                                │      │
│      │   Dynamic Squircle Mask Applied│      │
│      │   by iOS at Runtime            │      │
│      │                                │      │
│      │      ★ Core Artwork / Glyph    │      │
│      │                                │      │
│      ╰────────────────────────────────╯      │
│                                              │
│  * Note: Supply full square. No transparency.│
└──────────────────────────────────────────────┘

Apple Requirements Matrix

[!WARNING] Never crop or round the corners of your master file. If you pre-cut corners or place transparency around your icon, iOS will render a black border around the shape, destroying your branding.

iOS 18 Dark & Tinted Icon Considerations

iOS 18 supports custom home screen theming where users can toggle Dark Mode icons or apply a unified system tint:

1. Light Mode: Full-color branding as designed.
2. Dark Mode: Dark or charcoal background with your emblem highlighted.
3. Tinted Mode: iOS converts the icon into a two-tone monochrome mask based on the user’s selected accent hue. High-contrast artwork translates significantly better into tinted mode.

2. Android Adaptive Icons (Google Play & Devices)

Introduced in Android 8.0 (API level 26) and expanded in Material You (Android 12+), Android uses Adaptive Icons. Rather than a single static square, an adaptive icon consists of two distinct layers:

1. Background Layer: A solid color, subtle pattern, or texture (432 × 432 px inside a 108dp grid).
2. Foreground Layer: Your logo glyph, emblem, or character with a transparent background (432 × 432 px).

┌───────────────────────────────────────────────────────────┐
│ Android 108dp Canvas (432 × 432 px at @4x / 512px Store)  │
│                                                           │
│    ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐   │
│    │ Outer Bleed Zone (Motion & Parallax Effects)    │   │
│    │                                                 │   │
│    │      ╭─────────────────────────────────╮        │   │
│    │      │ 66% Inner Safe Zone (72dp Dia.) │        │   │
│    │      │                                 │        │   │
│    │      │       ★ Critical Logo Glyph     │        │   │
│    │      │                                 │        │   │
│    │      ╰─────────────────────────────────╯        │   │
│    │                                                 │   │
│    └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘   │
└───────────────────────────────────────────────────────────┘

The 66% Safe Zone Rule

Different Android manufacturers (Samsung OneUI, Google Pixel, Xiaomi MIUI) apply distinct masks to app icons: circles, squares, rounded rectangles, or teardrops.

To ensure your artwork never gets clipped by any launcher:

• The Canvas: 108 × 108 dp (represented at 432 × 432 px or 512 × 512 px).
• The Safe Zone: The inner 72 × 72 dp circle (the central 66% of the canvas, or 338 × 338 px on a 512px canvas).
• The Bleed Zone: The remaining 18dp outer margin accommodates interactive parallax, spring physics, and OEM mask clipping.

3. Platform Export Structure

Building mobile apps across Flutter, React Native, SwiftUI, or Kotlin requires specific folder hierarchies:

iOS Xcode Asset Catalog (AppIcon.appiconset)

AppIcon.appiconset/
├── Contents.json
├── icon-1024.png          (1024×1024)
├── icon-60@3x.png         (180×180 iPhone)
├── icon-60@2x.png         (120×120 iPhone)
├── icon-76@2x.png         (152×152 iPad)
├── icon-83.5@2x.png       (167×167 iPad Pro)
├── icon-small@3x.png      (87×87 Settings)
└── icon-small@2x.png      (58×58 Settings)

Android Density Buckets (res/mipmap-*)

res/
├── mipmap-mdpi/           (48×48 px)
├── mipmap-hdpi/           (72×72 px)
├── mipmap-xhdpi/          (96×96 px)
├── mipmap-xxhdpi/         (144×144 px)
├── mipmap-xxxhdpi/        (192×192 px)
└── playstore-icon.png     (512×512 px)

4. Automated, Client-Side Icon Generation

Manually slicing 15+ resolutions and writing Contents.json files for Xcode is tedious and error-prone.

The Imagerry App Icon Studio streamlines this entire workflow:

1. Drop your 1024×1024 master image into the studio.
2. Preview safe-zone masks (iOS squircle, Android circle, squircle, and rounded square) in real time.
3. Export ready-to-use packages containing the Xcode .appiconset, Android res/mipmap directories, web favicons, and PWA assets in a single .zip file.

[!NOTE] All processing occurs 100% inside your browser using client-side Canvas APIs. Your proprietary brand assets are never transmitted to an external server.