Contents
- 8 Alternate Way to Change App Icon in React Native Using Command Line Interface
App Icon for Android and iOS
For changing app icon on Mac, you’ll need to access Application folder by looking for it in Finder and then select any App for which you wish to customize the icon. Thereafter, follow on from Step #3. Note: For changing the icon of an in-built app (like Safari), you will need to enter your Mac’s password. Like your primary app icon, each alternate app icon is delivered as a collection of related images that vary in size. When the user chooses an alternate icon, the appropriate sizes of that icon replace your primary app icon on the Home screen, in Spotlight, and elsewhere in the system.
Application Icon is the Unique identification of the App. Running macos apps on linux. Application Icon is the main thing that the user always remembers. In most cases, the user remembers the application icon instead of the application name. App Icon can be your brand logo or anything else but should define the purpose of your application.
In this example, we will see how to change the Application Icon in React Native. This example will cover the updating of the icon for both Android and iOS. Please note after setting the application icon if you are recreating/updating the platform (Android / iOS directory in the project) then you have to set up the icon again.
To change the application icon here is an example below. Let’s get started.
First of all, we have to create an App.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the
react-native-cli
command line utility. Open the terminal and go to the workspace and run Mac change default open with app windows 10.
Run the following commands to create a new React Native project
If you want to start a new project with a specific React Native version, you can use the --version argument:
This will make a project structure with an index file named App.js in your project directory.
Look at the Old Icon
If you are developing an app (either in Native or Hybrid) you will be provided a default App Icon for both the platform. If you can run the application then have a look at the current icon.
To run the application in the Android
To run the application in the iOS
How to Make the Multiple Size Icon?
To change this default icon we need our own application icon in different sizes for the different devices. You should create an App Icon by your self or you can download it from the Google Images only when it is free with no copyright.
We are going to set this Icon as our App Icon Authy desktop app mac.
(Please use 1024px * 1024px size image)
Once you have your App Icon Ready then you have to make multiple size Icon for both Android and iOS.
makeappicon.com will also help you to provide App Icon for Both. These guys are doing a great job. You just need to upload your Icon on their website and they will provide multiple sized icons arranged in a proper folder structure.
Other than that you can also explore:
1. Icon Set Creator for iOS
2. Android Asset Studio for Android.
3. resizeappicon.com for both Android and IOS.
Setting App Icon for Android Applications
To change the Android application icon copy all the minmap-* directory from the android directory of downloaded makeappicon zip.
Now navigate to res directory of your project (YourProject -> android -> app -> src -> main -> res) and replace the default icons with newly downloaded icons.
Now open the terminal again and run the project again using
Here we can see the Application Icon has been changed
Setting App Icon for iOS Applications Directly
To change the application icon for the iOS copy all the content of AppIcon.appiconset from the ios>AppIcon.appiconset directory of downloaded makeappicon zip.
After copying all the icons from the downloaded icons paste the same in your projects AppIcon.appiconset directory (YourProject -> ios -> YourProject -> Images.xcassets -> AppIcon.appiconset) if it ask to replace the JSON then click yes to replace.
Open the terminal again and run the project again using
Here we can see the Application Icon has been changed
![Free Free](/uploads/1/3/3/9/133943816/214475797.png)
Setting App Icon for iOS Applications using XCode
You can also do the same for the iOS from the Xcode you just need to open the project in Xcode by clicking -> Your_Project -> ios -> YourProject.xcworkspace file in.
After opening the project expand the project and find the Images.xcassets click onto it
You will see a new window with some empty icon slots.
Now according to 2x, 3x size in PT simply opens your downloaded icon folder -> ios -> AppIcon.appiconset and with the same PT size with the same 2x and 3x size drag the icons here.
Open the terminal again and run the project again using
This is how you can change the Icon of your React Native Application for Android and iOS both.
Alternate Way to Change App Icon in React Native Using Command Line Interface
If you are using MAC or Ubuntu you can also see the alternate way below. If you are the windows user then you have to use the above method only.
Motivation
In an Ionic App development process, we can use a single command to change the Icon so why not in React Native also? So I started finding different ways to do that and finally I got some success in RN ToolBox. Let’s see how to change the App Icon using Command Line Interface.
Installation of RN ToolBox
RN ToolBox will help you to set up your App Icon using Command Line Interface but for that, you need
node > version 6
. If you are using correct node version then you can install the generator using
To generate your icons, the
generator-rn-toolbox
uses ImageMagick. Ubuntu user can skip this but for Mac users run
Set the Icon for Android and iOS Application
Mac Desktop Icons
After the installation of the required tools, we need an application icon. Min 200px x 200px size is recommended.
Now after making the icon, we have to run the following command to set up the icon for our application
You will be asked for the name of your react-native project, just copy and paste the name of your application.
You will be asked to replace Contents.json file, input y and hit enter
Congratulation!! you have successfully updated your App Icon from the command line.
Android
iOS
This is how you can change the App Icon using Command Line Interface. If you have anything else to share please comment below or contact us here.
Free Icons For Mac
Hope you liked it:)