Brief Introduction to iOS Development - Part 9 - Setting iPhone Icons

In this session, we will be continue to work on the previous project named "Intro8n9". This session is quite simple, we will be looking into setting up icons.

Icon Size

Before we start working on icons, we need to briefly mentioned that  as Apple emphasizes on user experience, the design and quality of app icon is important. The detail guide of such design can be found at Apple iOS Human Interface Guidelines. 

In this session, we will be focusing on a very narrow aspect of setting up the icons. If we are only developing app for iPhone, it is best to design an icon with 512x512 px. If we are designing a universal app which could also be run on iPad Pro then, we should design a bigger icon with 1024x1024px.

If we check the Human Interface Guidelines, we will notice that we need to create many different icons with different resolution. Fortunately,  there are many free apps available on the web and app store which could help us create many different icon size at one go.

Preparing Icon

In the following session, we will be using an app called "Prepo" to generate multiple icon. This app can be found at the Mac App Store.

First we must design an icon with 1024x1024px. Alternatively, we can scout the web for free image with 1024x1024px. For demonstration purpose, we are using the open source mascot as the icon image.

Once the image is ready, download and open the app Prepo.

 

Once we open the app, the following screen will appear. 

Now, we need to drag and drop our icon image to the app. The system will automatically generate various type of icons with different resolution.

If we only need icon for iPhone or iPad, we can change from Universal to iPhone or iPad.

Now, click Export. This allow us to export the various images into a separate folder.

Let's continue with the previous project named Intro8n9. Open the project Intro8n9.

Go to Appicon as show below.

On the main page, we can see various icon box as shown below. We need to drop various size of icons into the appropriate box. 

The first box shows that its initial size should be 29px. However the size is 2x. Therefore, we should be looking for an icon that is 58x58.

We can do that on our folder by turning on the show item info option. To do that simply go to finder, select View -> Show view option and checked Show item info.

Once we find the correct icon, we need to drop them to the appropriate box.

Please continue to fill the rest of the boxes. At the same time be aware of any additional error. If an icon with wrong resolution is dropped into the wrong box, additional error will appear.

Once all the icons has been dropped, make sure that we only have one warning error about the provisioning profile.

Try to run our app on iPhone. Now icon will appear.

Please remember to update the Github page if you have a remote site setup.

Note:

Please note that if we need to distribute an app over Apple ecosystem, more has to be done instead of just dropping any image to the icon box. Please refer to Apple's Human Interface Guidelines for details.

A copy of this project is stored at Github at https://github.com/SwiftiCode/Intro8n9

*** End ***