Learn about configuring the app's icon and best practices for Android, iOS and the web.
Your app's icon is what users see on the home screen of their devices, as well as in the App Store and Play Store. This is one topic where platform differences matter and requirements can be strict. This guide offers details on how to make sure your App Icon looks as good as possible on all devices.
The most straightforward way to provide an icon for your app is to provide the icon key in app.json. If you want to do the minimum possible, this key alone is sufficient. However, Expo also accepts platform-specific keys under
ios.icon. If either of these exists, they will take priority over the base
icon key on their respective platform. Further customization of the Android icon is possible using the
android.adaptiveIcon key, which will override both of the previously mentioned settings. Most production-quality apps will probably want to provide something slightly different between iOS and Android.
Create an app icon and splash image with the Figma template and video below:
android.adaptiveIcon.foregroundImagefield in app.json to specify your foreground image.
android.adaptiveIcon.backgroundColorfield. You can instead specify a background image using the
android.adaptiveIcon.backgroundImagefield; ensure that it has the same dimensions as your foreground image.
android.iconfield. This single icon would probably be a combination of your foreground and background layers.
If your app contains
privacy: public in app.json, it will show up on your expo.dev profile. We will mask your icon to have rounded corners in that circumstance, so if it already looks reasonable on iOS, it will probably look good here as well.