Skip to content
Start building
Free toolExpo SDK 57

Expo app icon & splash generator

One square image in; the icon, Android adaptive icon, themed icon, splash icon and favicon an Expo SDK 57 app expects out — plus the app.json block that points at them.

Your image never leaves your browser.

Icon settings

Fills the iOS icon and favicon, and becomes the Android adaptive-icon and splash background in app.json.

10%

Space around your art on each side. The Android layers are already shrunk to the 66/108 dp safe zone before this is applied.

Preview

iOS
Android
Safe zone

The safe-zone view shows the full 108 dp Android layer. The dashed circle is the 66 dp zone no launcher mask clips; the solid circle is roughly what a round launcher shows. Keep anything important inside the dashed circle.

Downloads

  • icon.png

    1024×1024, fully opaque — iOS rejects transparent pixels, and the OS rounds the corners itself.

    PNG

  • android-icon-foreground.png

    1024×1024, transparent, art kept inside the inner 66/108 safe zone so no launcher mask clips it.

    PNG

  • android-icon-monochrome.png

    Single-colour silhouette for Android 13+ themed icons. Only meaningful if your image has a transparent background.

    PNG

  • splash-icon.png

    1024×1024, transparent — the splash background colour comes from app.json, not the image.

    PNG

  • favicon.png

    48×48, same art as the app icon.

    PNG

Save them into assets/images/ in your project, next to app.json.

What you get

Five PNGs at the sizes Expo SDK 57 expects — icon, Android adaptive foreground and monochrome layers, splash icon and favicon — plus the app.json block that points at them.

How it works

Your image is drawn onto a canvas in your browser at each size, with the padding and background you set. The Android layers are shrunk to the 66/108 dp safe zone first.

Privacy

Nothing is uploaded and no AI model is involved. Close the tab and the image is gone.

Then ship it

Read how to publish your app to the App Store, see how Vibely builds native mobile apps, or check the mobile templates.

app.json

Merge these keys into your existing app.json — keep your other plugins (such as expo-router) in the same plugins array.

{
  "expo": {
    "name": "My App",
    "slug": "my-app",
    "icon": "./assets/images/icon.png",
    "android": {
      "adaptiveIcon": {
        "backgroundColor": "#FFFFFF",
        "foregroundImage": "./assets/images/android-icon-foreground.png",
        "monochromeImage": "./assets/images/android-icon-monochrome.png"
      }
    },
    "web": {
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      [
        "expo-splash-screen",
        {
          "backgroundColor": "#FFFFFF",
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200
        }
      ]
    ]
  }
}

Have the icon, need the app?

Vibely writes a real Expo app from a prompt. Native iOS and Android builds and publishing to the App Store and Google Play are available on Pro and Business. Web apps are free to start, with no credit card needed.

See Vibely for mobile

More free tools

Questions about this tool

No. It is drawn onto a canvas in your browser at each size, and the PNGs are made on your device. Close the tab and it is gone.

No. It resizes, pads and encodes your image with plain canvas code. No model is involved.

Square and at least 1024×1024. A transparent PNG gives the best Android adaptive icon, themed icon and splash results.

Save the five PNGs into assets/images/ in your project, next to app.json, then merge the app.json block below into your own.

Not sure where to start? Just describe it.

Type the app you want and Vibely builds it from a blank project.