Greetings and Salutations friends, coders and fellow swifties.
I have seen that there are many questions regarding how to make an appIcon. I myself have asked the same question here and while you will get many good suggestions on what to use, you still have to sift through a plethora of documents to find out exactly what you need to do in order to get your appIcon into your app. If you are anything like me, then getting the icon to work is not something you want to spend time on, however the icon is as important as the quality of your code and final product as it is the “eye-candy” that must hook the user.
So without further ado or procrastination, here is, what I consider to be, a very easy guide to creating your appIcon. It should get you started.
First thing you need is an application to make your icon in. If you are like me then you are programming on a macbook and haven’t got or don’t know what a nice image creator and editor is. So go ahead and get EazyDraw. It was suggested in this group by someone (sorry can’t remember your name but props to you) when I originally asked about creating appIcons.
Install it and run. What you want to do is create a new image. Then set the page size by opening the File menu and selecting Page Setup.
- Left
- Center
- Right
Remove
Setting the page size
In the top right-hand corner is a little letter which you can click on. Click on it until it shows as a “p”. This has changed the units to points or pixels which is what most sizes for images will be discussed as.
- Left
- Center
- Right
Remove
Changing the units to points
Set the Width and Height to 1536 which is the suggested size that we will be using. You’ll see later.
With that done you can close the Page Setup screen and go on to creating your icon. You also want to make sure that your image is going to use the same units as your page so open the Format Menu and select the Scale option. Look for the units section and change to points.
- Left
- Center
- Right
Remove
click to add a caption
For this part I selected a square and drew it on my page and just filled it in with a gradient so that I know my whole icon will be one colour for the background. Then, with the square selected, click on the Uniform Scale - Interaction Level icon as shown in the image below. It is the 3rd icon to the right of the Lock check box. Set the Size and Lower Right as shown in the image and optionally set your scale to 25% so you can see the whole thing.
- Left
- Center
- Right
Remove
click to add a caption
That’s the background taken care of. I then just added a spiral. Remember this is just for testing and demo purposes so don’t go crazy. Get the basics down first then create your award winning icon 
Once you are happy go to the File Menu and select Export and then select PNG from the pop-out menu. You will be presented with a save dialog. I suggest for a start leaving all the defaults as is. Just select an easy place to get to the resulting file and give it a memorable name. I have called mine testing.png and saved it in Pictures. Click Save.
- Left
- Center
- Right
Remove
Export to PNG
- Left
- Center
- Right
Remove
Save the file
Now open your favourite internet browser and navigate to https://makeappicon.com
Upload the file you saved and let the website create your appIcon set for you. Now you see that MakeAppIcon suggests a size of 1536 x 1536.
- Left
- Center
- Right
Remove
Click Choose File to browse to the PNG file you exported above
When this is done you will get a screen that allows you to get your icons. Fill in your email address and UNCHECK the subscribe and other icons options directly below where you filled in your email address. Or don’t. Totally up to you. Press the download button. You also don’t have to tweet that you are using this. Just click the “No thanks…” button, or I am sure they will be appreciative of your support. Either way, you should receive an email with a zip file attached.
Save the zip file somewhere and extract it. You will see that the resulting structure contains 3 directories.
- Left
- Center
- Right
Remove
Directory structure after extracted from zip
Expand ios and then expand AppIcon.appiconset. Here you will find all your icons. Select everything except the Contents.json file and drag and drop in your appIcon set in XCode.
- Left
- Center
- Right
Remove
Selected PNG files
When you drag and drop into XCode, you will get something like below. The correct files will self populate and the rest will list themselves at the bottom with little yellow warning triangles
- Left
- Center
- Right
Remove
PNG files dropped into XCode appIcon
Drag select the images that are not used and press delete.
- Left
- Center
- Right
Remove
Select unused files to delete
So now we have some nice appIcons with all the correct sizes and they show up nicely.
- Left
- Center
- Right
Remove
Completed and deployed appIcon
Some pro tips. In one of Chris’ earlier vids he mentions some tools that he uses for icons. One of them was Prepo. While there is nothing wrong with using Prepo, it doesn’t supply all the sizes you need and I found that the icon that you would click on to launch your app doesn’t fully fill the space that is provided so I was ending up with tiny white edges around the icon. Using MakeAppIcon solved that problem. Oh yes, I did try different sizes for Prepo. Didn’t make a difference.
In conclusion, making a really good appIcon is important because it is basically the first part of your app that engages your user, but it shouldn’t be a headache and take more time than pumping out quality code. So hopefully this little doc will put you on the path to making great icons quickly.
Happy coding
Disclaimer: I am not affiliated with anything EazyDraw or MakeAppIcon. These are just 2 options that were suggested to me and I found worked. I am sure that there are many other free tools that can accomplish the same thing.
