Learn about configuring the app's icon and best practices for Android and iOS.
An app's icon is what your app users see on their device's home screen and app stores. Android and iOS have different and strict requirements.
The most straightforward way to provide an icon for your app is to provide a local path or a remote URL as a value to the icon
property in app.json.
However, with Expo, you can also provide platform-specific values for each platform. For example, you can provide a different icon for Android, you will use android.icon
and for iOS, ios.icon
. If any of these properties are provided, they will take priority over the base icon
for each platform.
Most production-quality apps will probably want to provide something slightly different between Android and iOS.
To create an app icon, you can use this Figma template. It provides a bare minimum design for an icon and splash images for Android and iOS.
For an in-detail walkthrough, see the video below:
Further customization of the Android icon is possible using the android.adaptiveIcon
property, which will override both of the previously mentioned settings.
The Android Adaptive Icon is formed from two separate layers — a foreground image and a background color or image. This allows the OS to mask the icon into different shapes and also supports visual effects. For Android 13 and later, the OS supports a themed app icon that uses a wallpaper and theme to determine the color set by the device's theme.
The design you provide should follow the Android Adaptive Icon Guidelines for launcher icons. You should also:
android.adaptiveIcon.foregroundImage
property to specify the path to your foreground image.android.adaptiveIcon.monochromeImage
property to specify the path to your monochrome image.android.adaptiveIcon.backgroundColor
property. You can instead specify a background image using the android.adaptiveIcon.backgroundImage
property. Make sure that it has the same dimensions as your foreground image.You may also want to provide a separate icon for older Android devices that do not support Adaptive Icons. You can do so with the android.icon
property. This single icon would be a combination of your foreground and background layers.
You may still want to follow some of the Apple best practices to ensure your icon looks professional, such as testing your icon on different wallpapers and avoiding text beside your product's wordmark. Provide something that's at least 512x512 pixels. Since you already need 1024x1024 for iOS.
For iOS, you app's icon should follow the Apple Human Interface Guidelines. You should also:
Learn more about creating a safe area is a great way to ensure that your app's content is appropriately positioned around notches, status bars, home indicators, and other device and operating system interface elements.