Designing iPhone Icons

With its ability to run all kinds of applications and games, the iPhone OS is the icon and interface designer’s dream come true.
In this article I’ll discuss the process of creating icons for this platform, showing you the full workflow from the initial handdrawn sketch to the final icon in all the required sizes.

The finished icon

To illustrate the design process I created the icon for a fictitious iPhone app named “Kitchen Range”. It’s a search engine for recipes with additional social functionalities: you can turn the ingredient list into a shopping list, share pictures of your dish and suggest modifications to the cooking process. The icon depicts a typical gas range, a graphic metaphor that fits both the app and the rounded square format.
Kitchen Range finished icon

If you’d like to know how I created the icon I wrote a tutorial to share my workflow.

Disclaimer/Call To Action

To my knowledge there is no “Kitchen Range” app out there.
I came up with this concept in order to have a fictitious app to design for.
If you think I’ve stolen the idea from someone please let me know. If you’re a developer and would like to turn the idea into a real iPhone app please contact me and we’ll talk about it.

Foreword: Icon or Logo?

Before we start designing I’d like to make a few points regarding the terminology associated with the icon design business and the misunderstanding that ensues when dealing with clients.

Generally speaking an icon is a small illustration that represents an object, an action, a computer file or a program. Icons have been an essential element of operating systems since 1984 when the first commercial computer operated through a graphic interface, the Macintosh, appeared on the market.
Operating systems have extensive icon sets that represent all kinds of elements: files, file types, folders, common actions, applications. These icons usually employ recognizable graphic metaphors to convey their function for immediate understanding.
Computer programs also feature a number of icons in their interface as graphic companions to typical actions like open, close, save, create new document etc. These icons are akin to the OS icons and very often they are the same. This is because users learn to recognize the OS icons for all common purposes therefore it’s advisable for programs to stick to similar icons for a better user experience.
In the case of software, the main icon is the illustration that sits on the desktop, providing an easy way to launch the program. Usually this type of icon depicts the logo of that particular program. Here comes the point I wanted to make.
Computer applications, especially the commercial ones, need logos to help them stand out in a competitive marketplace, just like companies.
A logo is the single most important visual asset for an application, therefore the same tenets of logo design applicable to companies hold true for software.

An application’s main icon is a full-fledged logo.

Nowadays we have three basic types of computer applications to design logos for: OS apps, web apps and mobile apps. These apps need logos to stand out from the ever increasing crowd of competitors.
Mobile apps, especially, need outstanding logos since the default view of the marketplaces only lists the app’s logo. I’ll repeat that because it’s important.

The only thing potential buyers see of your app is the logo.

Take a look at the App Store screenshot below.
App Store default list view
Do you think it makes sense to invest money in a professionally designed logo? Or will any cheap design suffice?

When a developer asks a designer for an application icon what he/she really needs is an application logo. The icon is merely the computer file that depicts that logo, be it a 72×72 pixel (Android, iPad) or 57×57 pixel (iPhone) PNG.

The sketch

Let’s assume we have done our homework already (infomation exchange with the client, brainstorming sessions, search for reference images) and we’ve decided upon the graphic metaphor: a gas range.
When you design an icon you should make it immediately understandable and attractive.
In fact let’s reword a joke from the great late Bill Hicks:

Designing icons is like making porno movies: there’s no need to be coy.

Let’s spend some time sketching until we find a viable design.
Kitchen Range sketch

Clients should expect rough sketches like this in the early design phases. While the shading and details are still approximate, the graphic metaphor and the composition are clear. The sketch is fine-tuned through a series of reviews and then the final icon is created.

The iTunes artwork

When you browse your installed applications in iTunes using Cover Flow, the icons are displayed at a very big size, up to 512 pixels. That’s why every iPhone/iPod Touch/iPad app should ship with a 512×512 pixel version of the logo.
Here’s a screenshot of my installed apps viewed in Cover Flow (click for full size).
Apps viewed in Cover Flow

This icon must be slightly richer and more detailed than the main icon so designers always start from this size. Here’s the iTunes artwork for “Kitchen Range”.
Kitchen Range iTunes artwork

The application icon

The main application icon must be created as a 57×57 pixel square PNG. It sits on the Home Screen of your iPhone and puts the app only one tap away. The rounded corners, bevel and shine are added automatically by the iPhone OS (I believe the bevel and the shine can be turned off).
Having already created the 512 px icon we must now resize it. This is a crucial part of icon design. In fact it is said that an icon is only as good as its smallest size. In our case the smallest size is of secondary importance and we’ll deal with it in the next paragraph.

When you resize the image to 57×57 pixels the result is likely to be messy. That’s because Photoshop shrinks down everything proportionally and many elements end up being blurry.
Kitchen Range 57px icon automatically resized

The designer needs to manually adjust each vector shape and snap the points to the grid to make sure no edge lies across the pixels. This is the only way to avoid antialiasing (blurring). Some elements become unreadable when shrunk and must therefore be modified, redrawn or eliminated altogether to reduce the visual noise. And layer styles and effects need to have their settings adjusted to the smaller size. Again this assessment is done by the designer, not by a software.
Compare the automatically resized icon with the hand-optimized one:
57px icon comparison

While Photoshop did a good job at keeping the icon crisp (L), the designer was able to salvage more details from the original design, keeping the icon three-dimensional (R).
It’s interesting to note that the left icon has been considerably sharpened after being resized, with a positive impact on its crispness and legibility. When the right icon was sharpened, however, very little changed: a sign the designer has done a good job.

The small icon

When a user performs a Spotlight search the iPhone displays a small icon next to each result. The icon designer must therefore scale down the application icon to about 29×29 pixels.
Automatically resizing the 57px icon gives us this result:
29px icon autoresized

We can improve on that by hand-optimizing the shapes and by eliminating those elements that are unreadable at this size.
29px icon comparison

I think it’s obvious that the second icon is much cleaner and crisper, therefore more readable.
I believe some developers omit this last optimization to save some money. While I understand their motives I cannot recommend leaving your graphics in the hands of automatic filters. Italians Humans do it better.

The launch image

When you tap on the main icon the app starts to load. Since users switch among applications frequently and quickly it’s important to make the launch time as short as possible.
Every iPhone app and game should ship with a launch image which mimicks the interface using a static image. Apple’s guidelines clearly state that this is not a splash page and should not be used to display your illustrative skills. On the contrary the launch image should be as small a file as possible to ensure immediate loading.

A quick way to create the launch image is to duplicate the app’s interface minus the dynamic elements (tab bar icons, text etc.). Make the image 320×480 pixels in landscape mode and make sure the PNG is as small as possible (use Smush.it to compress it).

[I didn't design an interface and a launch image for Kitchen Range.]

Deliverables

In the end the client receives four files from the designer:

  • the iTunes Artwork (iTunesArtwork)
  • the Application Icon (Icon.png)
  • the Small Icon (Icon-Small.png)
  • the Launch Image (Default.png)

Are you interested in working with me on your next project? Tell me all about it!

Conclusion

I believe I’ve proven that designing icons for the iPhone operating system is no small undertaking.
From the conception of a unique and eye-catching logo to the creation of pixel-perfect, hand-optimized icons at sizes ranging from the very big to the very small, the icon designer has a complex job. The usual representational, compositional and chromatic skills must be accompanied by technical proficiency to ensure the icons are crisp at all sizes.
This is true of all icons.

This small guide is intended for both iPhone designers and developers alike.
Besides discussing Apple’s guidelines I’ve created the logo and the icons for a fictitious app (Kitchen Range) to show my own design approach and workflow.
I’ll surely be referring potential clients to this article from now own just as I do with my other icon guide Designing Android Icons.

Next time you need an icon for your application take a look at this article: you will know what to expect from the designer and you will be ready for a successful collaboration.
Good luck and if you’re ready to discuss business with me get in touch ;-)

Share this post with the world!

separator

22 Very Welcome Comments:

  • Awesome Guy, can’t be more clear, I love this tut..

    BTW, you’ve done a great post about the android icon design guidelines, but now they have added new guidelines with 2D icons, now it’s pretty good!

    What about a new awesome post??

  • Great work Andrea – just what I needed :-)

  • Nice post Andrea :)

    and as for the part: ” If you’re a developer and would like to turn the idea into a real iPhone app please contact me and we’ll talk about it.” : Am planning to learn iPhone development in the near future, may be we can create a “Kitchen Range” App haha!

  • Alan says:

    Great work Andrea, love the icon.

  • Łukasz says:

    You have a lots of helpful stuff on your website! I really like your work. All this characters and icons are great. I’m just beginner but I learn something new every day :) What can I say ? All I can do is add your blog to favorites .
    P.S. When I saw that you are living in Krakow I was so surprised ;)

    Pozdrowienia z Bydgoszczy ;)

  • natanela says:

    thank you very much! you made it so much easier. been searching the web for this simple, but yet so nessecery information for too long. tnx.

  • Robin says:

    Hi, just to point it, there is a very similar application – http://cookmateapp.com/
    However yours would have had a nicer icon, er, logo :)

  • Don’t forget to use larger images for the iPhone 4 (keyword: …@2x.png) so you’ll need 7 images. :)

    iTunesArtwork
    Icon.png
    Icon-Small.png
    Default.png
    Icon@2x.png
    Icon-Small@2x.png
    Default@2x.png

    And you should mention that Apple has a reference file for iPhone developers that lists all the different images and their conventions. :-)

  • Brooke says:

    Great article, thank you!!

  • Dennis says:

    Hi

    I love this post :) we are currently looking to develop an app for the iPhone, could you email me with a price for the app screen and icon design?

    Thanks

  • Max says:

    Great tutorial. Thanks.

  • Darren says:

    Nice tutorial, only thing I would say, is the left icon actually renders more clearly then the right. If you look at them both, the right looks more of a mess for trying to be sharp at this pixel rate. It’s far easier on the eye to allow rendering blur when resizing an image to anything smaller then its parent size.

    Most or all phone devices don’t have a high pixel rate and it would be impossible to make something look as good as illustrator for rendering on a device like this. The smaller you get the less of a pixel area you have to play with, so try using this effect to soften the edges and you will come out with a nicer looking icon.

  • Ariett says:

    Great tutorial! Love it! Thanks!

    Krakow is such a lovely place btw :)

  • Alexis says:

    Thanks for taking the time to create this tutorial.. very helpful and easy to understand. Appreciate it!

  • Ross says:

    Thanks for the info, I’ve just started creating our icons and didnt realise it would be so hard! There was I thinking I could just re-size and job done, but having seen the finished icon on an iphone, it looks rubbish, so I must go in and re-do it… booo hisss : )

  • Hello
    Your blog post on Designing iPhone Icons | Cute Little Factory is interesting and also thought provoking.

    I want to come back to review your posts

    Here is my web-site: Golf Score Genius

Speak Your Mind