App Launcher icon for React Native app (Android + iOS)

Tram Ho

Before pushing the app to the Store, we will need to create the App Launcher Icon (the icon of the application on the user’s device). App code using React Native will be able to push to both Google Play (Android) and App Store (iOS), so I will guide how to create App Launcher Icon for both operating systems.

1. App Launcher Icon for iOS

Step 1

First we need to have a pre-designed icon image with a size of 1024×1024 pixels (or larger also).

Next, you can use the Icon Set Creator tool (on the App Store) to create icon sets of different sizes for different types of iOS devices.

alt text

Drag and drop photos, select Platform and image storage folder is done

Or you can visit the website https://makeappicon.com , upload photos (JPG or PNG) and enter email to receive the icon set on both iOS and Android.

alt text

Upload photos to the website

alt text

Preview Icon preview, enter email to receive the icon set

Step 2

Turn on XCode, open React Native project (file [project] .xcworkspace in ios folder).

Navigate to Images.xcassets folder, then drag and drop the icon set created from step 1 ( AppIcon.appiconset folder) or click the plus icon in the lower left corner, select import. alt text

Done, rebuild the app to see the results!

1 minute of advertising: The icon above is homemade for the Master Mind X game app written in React Native, you guys try it out and give comments in the comment, if you support 5 stars, the better 😄

2. App Launcher Icon for Android

Step 1

Doing the same as on iOS, we also need an icon image with a minimum size of 1024×1024 pixels. Then use the following website to create the icon set: Android Assets Studio alt text

Step 2

Unzip the downloaded icon set, including the res folder containing the format: mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, …, each folder contains the file ic_launcher (the default name). Copy (overwrite) the entire directory into android> app> src> main> res .

Note that many android devices use circular icons, so we create one more round icon set (Circle) and copy as above, the default icon name will be ic_launcher_round .

alt text

The icon name is already declared in the AndroidManifest.xml file

alt text

Import Icons

Note : According to Google’s recommendations, it should be designed for Android icons in the form of a full square (no need to be rounded), no shading, because when pushing the app to the Store, Google will apply those effects to itself. homogeneous. So with the square icons, you can always use the icon set created from https://makeappicon.com , but if created from the Android Assets Studio page, remove the Effect section (leave None).

Further reference: https://developer.android.com/google-play/resources/icon-design-specification

Share the news now

Source : Viblo