How to make an iPhone App – Part 7: The app icon

To publish your app to the app store it needs to have an icon, and it can not be the white one that you see by default in the simulator.

Lets create a new project. I’m going to create a View-Based Application and i’ll call it “iconApp”.

Creating icons is a simple task, but it used to be simpler.

Previously, when there was only one iPhone screen resolution you only had to create one version of the icon of the app. Today with the introduction of the iPad and the iPhone 4 the screen resolution has grown and you have to create a version of the icon for each device.

Older iPhones used to have a screen resolution of 320×480 pixels. Now iPhone 4 has 640×960 pixels.

The following are the sizes that must be used:

57×57 – for iPhones with the standard screen.
72×72 – for iPad.
114×114 – for the iPhone with Retina Display (iPhone 4).

To show you how to make an icon that works on any device i’m going to use the following icons: icon.png and iPhone4icon.png

Don’t worry about the rounded corners, or those shiny details of the iPhone icons, the iOS takes care of that.

The first for standard screen iPhone, the second for the iPad and the last for iPhone 4.

Drag this images to the resources folder of your xcode project.

Then it will ask you if you want to copy the files to the project folder, check “Copy items into destinations group’s folder (if needed)”.

Now go to the resources folder and find the iconApp-Info.plist, if you have a different name for your project then the file will be named [your project name].plist. Open it and locate the row “Icon file”.

There type the name of the icon for the standard screen.

Now we have to specify the alternative icons.

Click the plus (+) icon in the right to add a new row or right click the table and select Add Row.

In the key column select “Icon Files”. This kind of row is an array. If you click the arrow in the left you can see the contents.

Add two items just like we did with the plist from the Table View tutorial, the values are going to be the names of the icons: icon.png, iPadicon.png and iPhone4icon.png.

Now your plist should look like this:

And you are ready to go. Build and run the app using the iphone simulator, click the home button and you’ll see the icon.

To switch to iPhone 4 simulator select Hardware->Device->iPhone 4.

Then select the ipad simulator in the list above the “Overview” side of the Xcode window.

And build and run. Click the home button and you’ll see the iPad icon.

Notice that iOS rounded the corners and adds the lighting that makes the icon look even better.

Conclusion

This is the last tutorial of the “How to make an iPhone App” series.

At this point you have all the knowledge necessary to start developing your own iPhone applications.

I hope i see your cool apps in the appStore soon.

Good luck!