Add App Icon Launch Screen

Add App Icon + Launch Screen

The 5-second decision asset. Get this right or installs drop 30%.

App Icon

Required size

1024×1024 PNG, no transparency, no rounded corners (Apple rounds them).

Where to put it (Expo)

Save to assets/icon.png (1024×1024). Then in app.json:

jsonCopy code
{
  "expo": {
    "icon": "./assets/icon.png",
    "ios": {
      "icon": "./assets/icon.png"
    }
  }
}

Expo / EAS auto-generates all required sizes (29×29 through 1024×1024) at build time.

Design rules

• No text in the icon (except brand name in some cases — but text reads as small at 60×60)
• High contrast background
• Single subject, centered
• Recognizable at 60×60 (the home screen size)
• Distinctive silhouette (helps users find on home screen)

Tools to generate

• Figma → 1024×1024 frame, export PNG
• Sketch → similar
• icon.kitchen → free online generator
• Bakery (Mac app) → preview on device mockup
• Your designer in Figma + iOS App Icon template

Variants for iOS 18+ (optional)

• Dark mode icon (1024×1024 PNG, transparent OK)
• Tinted icon (1024×1024 grayscale PNG, transparent OK)

In app.json:

jsonCopy code
{
  "expo": {
    "ios": {
      "icon": {
        "light": "./assets/icon.png",
        "dark": "./assets/icon-dark.png",
        "tinted": "./assets/icon-tinted.png"
      }
    }
  }
}

Launch Screen (Splash)

What it is

The first screen shown while your app loads. Should be FAST (<200ms perceived).

Required (Expo)

A storyboard-based launch screen, not a static image (Apple requires storyboard since iOS 14).

In app.json:

jsonCopy code
{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "splash": {
        "image": "./assets/splash.png",
        "tabletImage": "./assets/splash-ipad.png",
        "resizeMode": "contain",
        "backgroundColor": "#ffffff"
      }
    }
  }
}

Design rules

• Match your app's first screen (so it feels seamless when transitioning)
• No text ("Loading..." is unprofessional)
• No animations (Apple's splash is static)
• Background color matches your app's background

Image specs

• 2732×2732 PNG (covers all device sizes via storyboard)
• Center your logo in middle (will be cropped on different aspect ratios)
• Safe area: keep important content within center 60%

SF Symbols (system icons in your UI)

Use Apple's free icon library instead of bundling custom icons.

bashCopy code
pnpm add expo-symbols

tsxCopy code
import { SymbolView } from 'expo-symbols';

<SymbolView name="heart.fill" tintColor="red" size={24} />

Browse all 5,000+ icons in SF Symbols app (Mac App Store, free).

Benefits:

• Zero bundle weight
• Auto-adapts to system dark mode
• Native rendering
• Updated across iOS versions automatically

Adaptive icon for Dynamic Island / Live Activities

Different icon variant shown in:

• Dynamic Island (smaller, monochrome)
• Live Activities (small color)

Apple auto-generates from your main icon, but for premium look:

• Provide tinted variant
• Provide dark variant

Common gotchas

• Icon transparency = Apple rejects (fill the corners, they'll round)
• Icon text smaller than ~60px = unreadable
• Splash screen with text = looks broken on rotate
• Icon doesn't match marketing site = inconsistent brand
• Forgetting iPad version = iPad version uses iPhone icon stretched (ugly)

Iterate / test

After uploading to TestFlight:

1. Install on real device
2. Look at home screen — does it stand out?
3. Look at search results in Spotlight
4. Look in Settings -> Apps list (icon size differs)
5. Look at icon in Notification banner

If any look bad, redesign and re-submit.

Pair with

• apply-hig for full HIG compliance
• apply-liquid-glass for iOS 26 visual treatment
• design-screenshots (different — App Store screenshots, not icon)