App Store Assets

Requirements

• Exactly 1024 x 1024 pixels. App Store Connect rejects any other dimension.
• No alpha channel (no transparency). Export as RGB, not RGBA. This is the single most common rejection reason.
• No rounded corners. iOS applies its own superellipse mask at every size — if you bake in corners, they will look doubled.
• No transparency of any kind. Even a single transparent pixel triggers rejection. Fill the entire canvas with a solid background.
• No gloss, shadows, or overlays. iOS stopped adding gloss effects in iOS 7. The icon should be flat and clean.
• sRGB color profile. Use sRGB for maximum compatibility. P3 is acceptable but may render differently on older devices.

How Expo Generates All Sizes

You provide a single icon.png at 1024x1024. During the build process, Expo (via @expo/prebuild-config) generates every required variant:

Verifying No Alpha Channel

Before building, verify your icon has no alpha channel using the file command:

# Check the PNG color type
file assets/icon.png

# GOOD output (no alpha):
assets/icon.png: PNG image data, 1024 x 1024, 8-bit/color RGB, non-interlaced

# BAD output (has alpha — will be rejected):
assets/icon.png: PNG image data, 1024 x 1024, 8-bit/color RGBA, non-interlaced

# If you need to strip alpha, use ImageMagick:
convert assets/icon.png -alpha off assets/icon.png

# Or on macOS with sips:
sips -s format png -s formatOptions noalpha assets/icon.png --out assets/icon.png

Two-Layer Architecture

An adaptive icon is composed of two distinct layers that are rendered independently:

• Foreground layer — Your adaptive-icon.png file. Contains the logo/symbol on a transparent background. This is what you design.
• Background layer — A solid color defined by android.adaptiveIcon.backgroundColor in app.json. Alternatively, this can be an image, but NativePress uses a solid color for simplicity.

Both layers are 108dp x 108dp (1024x1024 at the asset level). The system renders the background first, then composites the foreground on top, then applies the launcher’s chosen mask shape.

The Safe Zone

Different Android launchers crop adaptive icons into different shapes: circles, squircles (rounded squares), rounded rectangles, and more. To guarantee your logo is never clipped, all important content must fit within the safe zone — the center 66% of the canvas.

How Different Launchers Mask Icons

NativePress app.json Configuration

{
  "android": {
    "adaptiveIcon": {
      "foregroundImage": "./assets/adaptive-icon.png",
      "backgroundColor": "#0073aa"
    }
  }
}

Legacy vs Modern Approach

Older Expo projects used a splash key in app.json with a full-screen image (e.g., 1284x2778). This approach is deprecated and does not work on Android 12+, which introduced a system-level splash screen that apps cannot override.

NativePress uses the modern expo-splash-screen plugin, configured in the plugins array of app.json. Instead of a full-screen image, you provide a small icon that is displayed centered over a solid background color.

How imageWidth Works

The imageWidth property controls the display size of your splash icon in logical pixels (not physical pixels). The default in NativePress is 200, which means the icon will render at 200 logical pixels wide on screen, regardless of the device’s pixel density.

Your source image (splash-icon.png) is 288x288 pixels, which provides enough resolution for high-DPI screens (3x Retina displays render 200 logical pixels as 600 physical pixels — 288px source is sufficient for up to ~1.4x, and the system handles downscaling cleanly for larger displays).

Android 12+ Constraints

• No full-screen splash. Android 12 introduced SplashScreen API that shows only a centered icon on a solid background. You cannot display a full-bleed branded image.
• Icon is circular by default. On Android 12+, the system may mask your splash icon into a circle. Keep important content centered.
• Background color only. You cannot use a gradient or image as the splash background on Android 12+.
• System controls duration. The system determines how long the splash screen is visible. Your app can extend it slightly via SplashScreen.preventAutoHideAsync(), but cannot shorten it.

Plugin Configuration

[
  "expo-splash-screen",
  {
    "backgroundColor": "#0073aa",           // Light mode background
    "image":           "./assets/splash-icon.png",
    "imageWidth":      200,                   // Logical pixels
    "dark": {
      "backgroundColor": "#1a1a2e",         // Dark mode background
      "image":           "./assets/splash-icon-dark.png"
    }
  }
]

How It Works

The expo-splash-screen plugin accepts a dark configuration object that mirrors the light mode config. When the device is in dark mode (as reported by the system UIUserInterfaceStyle on iOS or Configuration.uiMode on Android), the dark variant is shown instead.

When to Use Different Icons

• White or light-colored logo: Works on both dark backgrounds. You can use the same PNG for both splash-icon.png and splash-icon-dark.png.
• Dark or black logo: The light mode version (on #0073aa) will be visible, but the dark mode version (on #1a1a2e) will be nearly invisible. Create a white/light variant for splash-icon-dark.png.
• Colorful logo: Test on both backgrounds. If contrast is sufficient on both, reuse the same file. If not, create a lighter variant for dark mode.

• Dimensions: 48 x 48 pixels.
• Format: PNG, RGB.
• Usage: Displayed in the browser tab next to the page title.
• When needed: Only if you run npx expo start --web or deploy a web build. If you are only targeting iOS and Android, you can ignore this file.

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

1. Verify File Format with file Command

# Run this for every asset in assets/
file assets/icon.png
# Expected: PNG image data, 1024 x 1024, 8-bit/color RGB, non-interlaced

file assets/adaptive-icon.png
# Expected: PNG image data, 1024 x 1024, 8-bit/color RGBA, non-interlaced

file assets/splash-icon.png
# Expected: PNG image data, 288 x 288, 8-bit/color RGBA, non-interlaced

file assets/splash-icon-dark.png
# Expected: PNG image data, 288 x 288, 8-bit/color RGBA, non-interlaced

file assets/favicon.png
# Expected: PNG image data, 48 x 48, 8-bit/color RGB, non-interlaced

2. Preview in Simulator

• iOS Simulator: Run npx expo run:ios. After install, check the home screen icon. Go to Settings to see the 29x29 rendering. Cold-launch the app to check the splash screen.
• Android Emulator: Run npx expo run:android. Long-press the icon on the home screen to see the adaptive icon with parallax. Check different launcher shapes if available.
• Dark mode: Toggle dark mode in device settings and cold-launch to verify the dark splash variant.

3. EAS Build Preview

For the most accurate test before submission, run an EAS preview build. This generates the same binary that would be uploaded to the stores.

# Build a preview APK/IPA for testing
eas build --platform ios --profile preview
eas build --platform android --profile preview

# Install on a physical device or simulator
eas build:run --platform ios
eas build:run --platform android

4. Adaptive Icon Shape Test

To verify your adaptive icon looks correct across all launcher shapes, use Android Studio’s built-in preview tool or overlay your adaptive-icon.png with circular, squircle, and rounded-square masks in your design tool.

Quick manual test: on an Android emulator, open the app launcher, long-press your app icon, and drag it slightly. You should see the parallax effect between the foreground and background layers.

Icon Design

• Keep it simple. The best app icons use a single bold shape or letter. Your icon renders at 29x29 on iOS Settings — fine details disappear entirely.
• Use a distinct silhouette. Users recognize apps by shape, not by reading text. Your icon should be identifiable even when blurred.
• Avoid text in the icon. Text is unreadable at small sizes and creates localization issues. If your brand is text-based, use a single letter or monogram.
• Test on both light and dark home screens. iOS and Android support dark home screen backgrounds. Your icon should have enough contrast to stand out on both white and black backgrounds.
• Avoid photographs. Photos lose all detail at small sizes. Use flat, geometric designs with solid colors.
• Choose colors intentionally. Bold, saturated colors stand out on the home screen. Avoid light pastels and grays that blend into the background.
• Match your splash icon to your app icon. The splash icon should be the same symbol/mark from your app icon, just without the background. This creates a smooth visual transition from splash to app.

Common Mistakes