How to add an app icon in a React Native Android app
🕒 Published on January 06, 2021 ⚡️ 3 minutes read🔖 #react-native
In this post, let's generate an app icon and learn how to add it to an Android app build with React Native.
To create an app icon we are going to make use of a free tool called Expo Icon Builder. Thanks to Evan Bacon for making it free and available for us to use. You are free to use any other design tool of your own choice such as Figma.
This tool allows building an app icon quickly using an Emoji icon with a customized background color scheme. For example, in the below image you will find that we have selected the coffee icon emoji since it is going to represent the main app. The Emoji icon is selected from the right-hand panel. The selected item is shown on the left-hand side. You can also add a customized background color.
After selecting the icon you have to download it by clicking the download button at the top left corner.
Android requires five separate sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline (mdpi). Refer to the table below for more information on pixel densities:
|mdpi (Baseline)||160 dpi||1×|
Another free service I like to use to generate different assets for the app icon is called makeappicon.com. This service generate different assets for various pixel densities based on the above table.
All you have to do is upload the app icon we created in the previous step and provide an email where the icons will be available to download.
It creates icons for both platforms iOS and Android. For this demo app, we are only interested in the
android/ directory it generates. A different set of directories are created that are prefixed with
mipmap and suffixed with different sizes like
Within an Android app, the icons live at the following path:
android/app/src/main/res. Now copy the contents of the
android/ directory generated in the previous step and paste them to that location. Note that there going to be the same directory names. You will have to replace those old directories with the new ones to be pasted.
Depending on the Android device the system will decide whether to use a square icon or a rounded icon. You may need both types of the icon. For this demo app, we are going to use the icon we generated and exclude the rounded icon from the configuration of the Android app.
To not use the rounded icon, open
android/app/src/main/AndroidManifest.xml file and remove the modify following line:
To the same icon generated in the previous step:
In the same file, you will find the code snippet:
android:icon="@mipmap/ic_launcher" points towards the original icon filename.
You will have to run the build command
npx react-native run-android to apply these changes to show the app icon.
That's it to generate and a new icon for your Android app. Please find the link here to learn more about Google Play's icon design specifications.