App Icons

Every mobile app needs an icon. Expo simplifies icon generation by taking a single high-resolution image and creating all required sizes for iOS and Android.

Required Sizes

Basic Setup

Place your icon in the assets folder and configure app.json:

{
  "expo": {
    "icon": "./assets/icon.png"
  }
}

This single 1024x1024 PNG is used to generate all required sizes during the build.

Icon Requirements

• Format: PNG (no transparency for iOS App Store)
• Size: 1024x1024 pixels minimum
• Shape: Square — iOS rounds the corners automatically
• No alpha: iOS App Store rejects icons with transparency

Adaptive Icons (Android)

Android adaptive icons have separate foreground and background layers, allowing the OS to apply different shapes (circle, squircle, rounded square):

{
  "expo": {
    "icon": "./assets/icon.png",
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon-foreground.png",
        "backgroundImage": "./assets/adaptive-icon-background.png",
        "backgroundColor": "#FFFFFF"
      }
    }
  }
}

Designing Adaptive Icons

The foreground image should:

• Be 108x108 dp (432x432 px at xxxhdpi)
• Keep the logo within the safe zone (center 66dp / 264px circle)
• Have a transparent background

You can use a solid color instead of a background image:

{
  "android": {
    "adaptiveIcon": {
      "foregroundImage": "./assets/adaptive-icon-foreground.png",
      "backgroundColor": "#3B82F6"
    }
  }
}

iOS-Specific Configuration

For a different icon on iOS:

{
  "expo": {
    "ios": {
      "icon": "./assets/ios-icon.png"
    }
  }
}

Favicon (Web)

If your Expo app also runs on web:

{
  "expo": {
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Generation Tools

Start with a 1024x1024 source image and use these tools:

Design Tips

1. Keep it simple — The icon is small on screen, fine details get lost
2. Use bold colors — Stand out on both light and dark wallpapers
3. Avoid text — Text is unreadable at small sizes
4. Test on device — Check how it looks on the actual home screen
5. Check dark backgrounds — Ensure visibility on dark mode home screens

Development Build Icon

Add a banner to distinguish dev builds from production:

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {},
          "ios": {}
        }
      ]
    ]
  }
}

A common pattern is to add a "DEV" banner to development build icons so you can tell them apart from the App Store version on your device.

Verify Your Icons

After building, verify icons look correct:

# Build for preview
eas build --profile preview --platform ios
eas build --profile preview --platform android

Install the build on your device and check the home screen icon appearance.