1---
2title: App icons
3description: Learn about configuring the app's icon and best practices for Android and iOS.
4---
5
6import Video from '~/components/plugins/Video';
7import { BoxLink } from '~/ui/components/BoxLink';
8import { BookOpen02Icon } from '@expo/styleguide-icons';
9
10An 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.
11
12## Configure an app's icon
13
14The 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`](/versions/latest/config/app/#icon) property in **app.json**.
15
16However, 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`](/versions/latest/config/app/#icon-3) and for iOS, [`ios.icon`](/versions/latest/config/app/#icon-2). If any of these properties are provided, they will take priority over the base `icon` for each platform.
17
18Most production-quality apps will probably want to provide something slightly different between Android and iOS.
19
20## Create an app icon
21
22To create an app icon, you can use this [Figma template](https://www.figma.com/community/file/1155362909441341285). It provides a bare minimum design for an icon and splash images for Android and iOS.
23
24For an in-detail walkthrough, see the video below:
25
26<Video url="https://youtu.be/QSNkU7v0MPc" />
27
28## Customization and best practices
29
30### Android
31
32Further customization of the Android icon is possible using the [`android.adaptiveIcon`](/versions/latest/config/app/#adaptiveicon) property, which will override both of the previously mentioned settings.
33
34The Android Adaptive Icon is formed from two separate layers &mdash; 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.
35
36The design you provide should follow the [Android Adaptive Icon Guidelines](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive) for launcher icons. You should also:
37
38- Use **.png** files.
39- Use the `android.adaptiveIcon.foregroundImage` property to specify the path to your foreground image.
40- Use the `android.adaptiveIcon.monochromeImage` property to specify the path to your monochrome image.
41- The default background color is white; to specify a different background color, use the `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.
42
43You 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.
44
45> You may still want to follow some of the [Apple best practices](https://developer.apple.com/design/human-interface-guidelines/app-icons/#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.
46
47### iOS
48
49For iOS, you app's icon should follow the [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/app-icons/). You should also:
50
51- Use a **.png** file.
52- 1024x1024 is a good size. If you have an Expo managed project, [EAS Build](/build/setup) will generate the other sizes for you. If you have a bare workflow project, you should generate the icons on your own. The largest size EAS Build generates is 1024x1024.
53- The icon must be exactly square. For example, a 1023x1024 icon is not valid.
54- Make sure the icon fills the whole square, with no rounded corners or other transparent pixels. The operating system will mask your icon when appropriate.
55
56## Next step
57
58<BoxLink
59  title="Safe areas"
60  description="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."
61  href="/develop/user-interface/safe-areas"
62  Icon={BookOpen02Icon}
63/>
64