How to Create an App Icon
--
How to create and set an app icon for both iOS and Android.
This post was originally posted on my blog @ isaks.io
While working on my app MyVinyl, I eventually came to the point where I needed to start thinking about the icon. In this tutorial, I will share with you what I have learned and show you how to create an app icon. I will also show you how to set an icon for both iOS and Android projects. There are no prerequisites to follow this tutorial.
Let’s start by considering some of the options you have when looking to create an app icon.
Doing everything yourself
Doing the entire design by yourself might work for some, but in my case, this was never an option. I don’t know a lot about icon design, and I would rather use the time it would take me to learn it on developing the app.
The pros of doing it by yourself are that you have full creative freedom. Provided that you have an idea of what your icon should look like, and you know how to use a design tool, this might work for you.
Outsourcing
One option you have is outsourcing. You can use a service like Fiverr to find and pay someone to design and create an icon for you.
Outsourcing is great because you can give designers the task of designing the app icon. A lot of services also have quick delivery, a couple of days at maximum, so getting your icon is relatively fast.
One downside of outsourcing it is prone to communication errors. You have to be able to communicate your ideas about the icon, which can be hard, especially if you don’t have any well-defined ideas. You might end up paying $100+ on an icon that does not fit the app.
Another downside is the price. The prices range from a couple of bucks to hundreds of dollars, depending on how many revisions you get and how much effort is going to be put into the icon. And the ones that only cost a couple of bucks usually do not include essential vector files, so a normal price would be 30–100USD.
Initially, this was my plan for MyVinyl, but after looking into it I found another way that seemed better for me.
My recommendation: Buying an icon
This way is kind of like a hybrid between doing everything by yourself and outsourcing. There are plenty of services that sell icons for cheap, so the idea is that you find and buy an icon that you like, and turn that into an app icon. This might not work for you, but in my case, it seemed optimal.
It is cheap, super quick, and super easy. The only downside I can think of is that you are limited by what icons already exists.
Creating the icon
The first step to creating the app icon is to find a starter icon that you like. There are plenty of places you can find icons, I recommend thenounproject.
As you can see, there were 970 icons related to “vinyl”. The icons cost $2.99, so find one you like and buy it. Buying the icon will give you full access to use it commercially.
Now that you have your icon, it is time to make it app-friendly. To do this you are going to need an application that supports editing vector graphics. Since I have Create Cloud, I will be using Adobe Illustrator. There are plenty of free options you can use as well. Sketch has a free trial you can use, or you can even use an online editor like Vectr.
Create a new project with the width and height being 1024px.
Start by setting a background color. A lot of apps have gradient backgrounds, so feel free to do it as well if that’s your style. Then import the vector graphic you just bought, and change its color if needed. Lastly, apply a simple shadow effect to make it “pop” out.
And just like that, the app icon is finished!
Setting the icon
Before you set the icon, you need to get the icon in a lot of different sizes. You can use an application or a website like easyappicon.com, it is free and works just like you would expect.
Import your icon, remove any padding any hit download.
Setting the icon for iOS
In your (React) Native project, go to the following directory:
ios/{projectName}/Images.xcassets
Then, replace the existing AppIcon.appiconset folder with the one you downloaded.
If you open Xcode and navigate to the same directory, you can see that the icon has been applied with all the different sizes.
Setting the icon for Android
In your (React) Native project, navigate to the following directory:
android/app/src/main/res
Then, replace all the folders with the ones you downloaded.
And there we have it. You have now created and set your brand new app icon. If you are interested in checking out MyVinyl, you can do it here. I hope you have found this tutorial useful. Any feedback is greatly appreciated!
More content at plainenglish.io
