Best Practices For iPhone App Icon Design

These days there are hundreds of thousands of iPhone, iPod touch and iPad apps in the iTunes App Store. With more apps being added every day your biggest goal is to get your app noticed, otherwise you’ll just fall back among the masses. A great icon design is one important way to stop people in their tracks and let them know your app is worth checking out.

Having designed a few apps myself and in general being an app fanatic, I’ve spent a lot of time on the iTunes Store and scoured through endless amounts of apps. Having seen the best and worst of them, I’ll take you through some best practices to follow. By putting in the same thought and care that went into the design of the app itself, you’ll have an icon that helps your app reach its target audience.

Keep It Simple

These apps are very clean, well designed objects that describe the app without extraneous clutter.

Focus on the purpose of the app itself. Figure out the concept of your app and find an object that can represent that best. The icon area is only 57 by 57 pixels, so you want to present it in the clearest, most easy to understand imagery possible. Don’t clutter it up with extraneous background objects or meaningless imagery that doesn’t help explain the app. Keep it simple and to the point. Now, don’t confuse simple with plain; the icon should be creative and use every aspect of the full canvas to pack a punch in small area.

Be Representative without Words

These apps use so many words I can barely read what it says.

The key to good icon design is finding a graphical representation that can function on it’s own. The design should refrain from using words within the icon unless it is absolutely necessary. If you need to use them make sure to use them sparingly. An abundance of text often becomes clutter and can be difficult to read at a small size. In fact if you have to use words to describe the app, you probably haven’t done a very good job with the icon design. One thing to keep in mind is that you have up to 13 characters for the label that will reside directly below the icon. This may help you decide what words are necessary and what may be redundant.

Don’t Be Standard

Here we can see using the standard gloss is too overwhelming and actually takes away from the design.

To make apps look uniform Apple originally mandated that app icons have a standard gloss appearance. Today, you have the option to add the standard gloss or leave it off when submitting your app to the app store. Oftentimes app icons look better without the gloss and the current trend is to not use the default effect. If you decide you want to add shine or dimension, add it manually and control the opacity of it so it doesn’t overwhelm the icon.

Stand Out from the Crowd

Creative shapes and details that are rich and imaginative make you just want to click on them.

While the icon area is constrained to 57 by 57 pixels, don’t feel limited in what can be done. The icon can be creative and conceptual and include texture and detail that make it stand out from the others. This is after all how people will be drawn to download your app in the first place and entice them to use it again once it’s downloaded. The sky’s the limit, so make sure your icon is memorable.

Linda Ellis

About Linda Ellis

Linda's title at MarketNet is Creative Director. She offers creative solutions for clients through strategy, design, functionality and usability. Using her critical eye and lengthy background in interactive she sees projects from the discovery phase to website launch, making sure websites promote and inspire success. View all posts by Linda Ellis
  • Atkonradi

    This blog is extremely helpful, but I can’t figure out where I am given the choice of “standard gloss.” When I upload my 512×512 icon (large icon), it doesn’t have the gloss. As soon as I finish all the description and then localizations, the gloss appears on my icon. Can you tell me where I have the choice?
    thanks!

  • http://www.brianbehrend.com Brian Behrend

    You need to edit a property value in the applications Info.plist file. The property name depends on which version of Xcode you are using. In older versions it is “UIPrerenderedIcon” and in Xcode 4 it has been  relabeled as “Icon already includes gloss and bevel effects”.

  • http://www.riptidegames.com/2011/12/riptide-team-meeting-december-13-mike-montgomery/ Riptide team meeting December 13: Mike Montgomery | Riptide Games
blog comments powered by Disqus