Other than being a self proclaimed iPhone geek, how do i get the nerve to post about ’best practises’ on this fairly new platform? Well first off, app icon design on the iPhone and iPod touch doesn’t differ that much from the general principles of universal icon design, which i’ve been involved with for a few years now. Secondly, over the past year i’ve been working on iPhone interface projects left and right. I’ve consulted a handful of companies and crafted several commercial and free app icons.
I maintain a minimalistic app review site called appweek.ly that lovingly forces me to spend my good share of money in the app store and generally keeps me on my toes. Now that we’ve got that aside, let’s start with one of my pet peeves.
Don’t include words
An icon is a graphical representation of a word, concept, object or operation. Words are in themselves an abstraction of a concept, object or operation – don’t mix these two representational tools as it will ultimately make your message more cluttered and harder to decode.
Infact, as a rule, I would refrain from using any form of typographical property in an icon. If you have to retreat to another tool of abstraction (the written word) I’d say you’re not using the full force of your pictorial arsenal. Rethink your analogy; is there really no better way to visualize the application than with dry words?Perhaps the only exception to this is single letter representations. They can in themselves become iconic enough to loose their wordly capabilities and transcend into the purely symbolic sphere. Also note that your app icon will always be presented with the name of the application. So people, please get those words out of your icons.
There’s quite a few icons in the app store that has words in them. *gosh*
Don’t standard gloss
Apple gives you the option to add their standard gloss to your icon when submitting it to the app store. This is said to give a uniformity to the App store and give your icon that glossy apple look. Im baffled that so many developers choose to apply this standardization to their precious custom icon. If you must add gloss, why not be able to control every aspect of it yourself? Besides, note that not every single native Apple icon comes with gloss, let’s tone it down a bit guys.
In my oppinion each of these respective icons would have looked better had they not included the standard app store gloss
Simple is good. Simple is clear.
One of the most important rules in icon design is to keep your motif simple and to the point. Icon design is all about expressing yourself clearly in a confined amount of visual space – your 57×57 pixel app icon is certainly no exception! So figure out your analogy, boil down (or trace back) your app to a purely conceptual plane. What is your app really all about? If you could only show people one thing that would represent your entire app, what would it be?
Selecting a single object can work for some apps. If you must have several objects interacting with eachother make sure each and everyone of them is clearly defined and that the interaction is unmistakingly clear. To be precise you have 3249 pixels at your disposal (57×57), don’t clutter them up with unnecessary noise. As with all design, the more you take away from it while still keeping your message, the more clear that message will be.
It’s all about finding that one good illustration for your icon and making sure that its presented in a clear and simple manner
Details
Don’t confuse simple with plain looking. When you’ve found your conceptual masterpiece don’t hesitate to put it over the top. Slave over that 57×57 icon, add details that perhaps only yourself will notice. Use an array of gradients, highligts and reflections, anything to emphasize the pure awesomeness of exactly your app. This is the first and most important encounter with your product, don’t hold your horses – make it something to remember.
Here’s a selection of enticely detailed icons. It’s important that the details don’t take anything away from the icon - it shouldn’t clutter up your image but strengthen your analogy.
Icon/App consistency
There’s an argument to be made about the experience of pressing your icon and then using your app. You’ll create a much higher level of trust and fidelity if those two events aren’t too dissimilar. The anticipation you create by having a great icon should be reinforced when your application itself is well designed and vice versa.
These highly stylized icons are reinforced by the experience of using their apps interfaces.
Stand out from the crowd
Scrolling through the grey rows of the App store, your first point of contact with the customer is more than often your application icon. All the thought and labor you’ve put into your app should shine through your icon and convince the user that he or she simply cannot live without this excellent piece of software. Take steps to stand out from the hordes of other icons out there, make design decisions that will take you away from ’standard’ and swing you over to ’unique’.
Here’s a handful of unique icons that all bring something new to the table and stands out from the crowd.
So what now?
There’s more than 70.000 apps in the app store. Make sure that your wonderful app doesn’t drown in the mundane. If you think this sounds like a daunting task, or you’d just like to spend your time actually developing your app, hire a professional. We’re not that expensive and it’s usually money really well spend. Send me an email if you want to talk icon design.
On the other hand, if you feel like mastering your own app icon I’ve put together a simple-to-use PSD file template that will help you get started on your 57×57 pixel gem. Download it below.
If you liked this article why not comment, or tweet about it. 
Copyright 2009 Michael Flarup All Rights Reserved
Great work and thank you for the templates.
Thank you for this lesson. Now I know which Icons are best. I hope for more.
Lars
Very interesting read, despite the fact that iPhone development isn’t at all one of my things
I’m surprised about the “gloss” story, and must admit that I love the three examples you posted of icons with detail in them (especially the first).
great article. i’m curious to see a page full of the icons of the most successful apps and be able to compare what they have in common.
Thanks for putting up together this great article.
Great article. The first 2 parts in particular “dont include words” and “dont use standard gloss” were very insightful, examples really drove home the points. Great work.
I really am with you with this article, we share a lot of the same views. The only thing I have a fuss with is the uniqueness of the round “P” icon, doesn’t really fit it with the 57×57 icons on the iPhone.
Great post!
I don’t think icons need to “stand out from the crowd”. For example, the Peggle icon. It doesn’t fit with the other iPhone icons. Maybe it stands out, but it confuses the user.
Thank you for the tips. Nice website by the way! & Thank you for the template.
Great article thanks.
I think that the icon is very important,it reflects the application itself.
I really would appreciate to have a 512×512 PSD
This is a pretty nice article for many including myself. Thanks for the freebie as well.
Nice job. I think you covered most of my iPhone App icon pet peeves and how to avoid them for great App icon design.
how cute they are.. I wish I have iPhone..
Great post! Though I don’t agree with the text part. Especially when the text is part of a trade mark like Origin or Wolfenstein. This is how we “recognize” the product from the crowd. All depends on how it is used in my opinion. Thanks for the very interesting post!
This is great!!! thx!
Very helpful, thanks!
Very Nice Sir Michael
Once again you demonstrate excellent skills
A very helpful tutorial for making icons for iPhone OS!
Thanks a lot for this tutorial and help!
Great for making unique, beautiful and attractive icons…
I hope the iphone switches to the verizon network because it is better than AT&T. AT&T is worest cell company in the world because of the signal drops and the so called best 3g network in the world.
Words of truth - In depth and also very compact info on broad topic. ThankYou
Great article!
I wished I read it before I submitted my app ‘Stolen Suns’ (first original graphic novel for the iPhone.
Doh!
Hi,
Your points on icon design are right on. The gloss on the icons should absolutely be left off.
The Twitterific icons is still one of my favourites, though.
A colleague of mine just made an icon set for iPhone toolbars that everyone is free to use.
Take a look if you’re making an app: http://blog.twg.ca/2009/09/free-iphone-toolbar-icons
ps. I love the live comment preview
georges
thank you for the template & advice
This is what I always tell people and look at designs to find,that is ’simplicity’.Simple designs are so catchy as they are easy to understand and are remembered by people who see them.
Many people try making the designs as unique as possible and in that they end up making a rather complicated design.
I commend the writer that the very basic thing has been pointed out very clearly along with the examples.
This is the mark of a good demonstrator
great
i like it
Great post. Thanks for the info.
Hey,
Lovely post, very insightful and those examples really helped us to see and compare.
Thanks a ton.
Cheers!
thanks
@Words in the logo, that might be nice on the design side, but when you’re dealing with search and ranking listings you only have three controllable things at launch- icon, price, and title.
You have to get across why your app is better with those three things and sometimes it helps to ram home the point of an app with text, even if it’s got to be tiny.
Plus, when dealing with a long list of apps, it’s better to stand out- the fact is, most folks don’t have text, for the reasons you said. But, the simple act of having text draws the eye to the outlier, increasing clicks, and offering more opportunities for conversions.
Totally agreed on the other points though
Anyone knows if the icon can be saved with 24bit transparency? the apple UI guidelines says you can’t, but if you cant so what background color should you use?
and what about the 512×512 icon?
Thanks
Wonderful little topic here, thanks a lot for the templates and keep up the great work (and I’ll keep reading).
G’night
Great article, Michael. Thanks for the freebies
Great Lesson. You should really make your template 512×512 though. Apple requires a 512×512 version of the icon for the iTunes store.
Thanks for this very interesting article!
When I have to do an iPhone icon for a client, in which size should the icon be? In the iTunes Store/ App Store the icon is diplayed bigger than 57×57
Nice article for iphone icon design.
With so many apps on App Store, a good icon is the first thing that makes an app stands out.