add-expo-icon

Generate all required Expo app icons from a single source image.

What it does

Takes one image (PNG or JPEG, minimum 500×500) and produces:

| File | Size | Purpose | |------|------|---------| | icon.png | 1024×1024 | iOS & general app icon | | adaptive-icon.png | 1024×1024 | Android adaptive icon foreground | | favicon.png | 48×48 | Web favicon | | splash-icon.png | 200×200 | Splash screen icon |

All icons are saved to assets/images/ in your project directory.

It also:

• Automatically updates app.json with the correct icon paths
• Sets backgroundColor for adaptive icon and splash screen based on the dominant color extracted from your image
• Cleans up legacy android-icon-* files

Usage

npx add-expo-icon <path-to-image>

Example

npx add-expo-icon ./my-logo.png

Output:

Dominant color: #1a1a2e

Source: /path/to/my-logo.png (1024x1024 png)

  ✓ icon.png (1024x1024) — iOS & general app icon
  ✓ adaptive-icon.png (1024x1024) — Android adaptive icon foreground
  ✓ favicon.png (48x48) — Web favicon
  ✓ splash-icon.png (200x200) — Splash screen icon

All icons saved to assets/images/

  ✓ app.json updated with icon paths

Requirements

• Node.js 18+
• Source image must be at least 500×500 pixels (PNG or JPEG)
• Run the command from the root of your Expo project

How it updates app.json

If app.json is present with an expo key, the tool sets:

• expo.icon → ./assets/images/icon.png
• expo.android.adaptiveIcon.foregroundImage → ./assets/images/adaptive-icon.png
• expo.android.adaptiveIcon.backgroundColor → extracted dominant color
• expo.web.favicon → ./assets/images/favicon.png
• expo-splash-screen plugin config (if present)
• Legacy expo.splash.image (if present)

License

MIT