Designing a tiny little app icon for a mobile device can really be a challenge. It seems like such a small thing and therefore should take mere minutes to create, right? Well, it’s not as easy as it would seem.
Designing an app icon reminds me of trying to create the little favicon for a website, which is just the tiny little thing next to the URL in your browser. Years ago that little favicon graphic was only 16 x 16 pixels, and it’s hard to get any sort of detail with that kind of resolution so the favicon had to be as simple as possible for it to be legible or recognizable as an image. The app icons on an iPhone are HUGE in comparison, but the same theory applies to their design.
The typical size for an app icon on an iPhone 3G or and iPad is 57 x 57 pixels. The iPhone 4s retina display’s app icons are 114 x 114 px. When you think about it, that 57 x 57 size doesn’t give you much more to work with than a favicon! Even though the app icon on the retina display is twice as big, any design you create has to work on the older phones and the smaller sizes. This is what makes designing an app icon a challenge.
The App Store is saturated with apps already, and if you’re just browsing through “What’s Hot” or a category, an app is more likely to get looked at if the icon is clean and simple, designed well and stands out. I find myself checking out apps just for the icon design to see if the rest of the app is designed as well. Chances are if it’s something I’m already in the market for anyway, I’ll download it or buy it just to play with it. It’s basic marketing tactics beginning with a simple eye-catching graphic.
I try to keep the design of an app icon as simple as possible. It’s the equivalent of a logo in the App Store world, and it’s the simple designs that are recognizable and memorable. Sometimes the nature of the app is difficult to define in a simple graphic and it ends up being more complex than I would like, and sometimes the developer wants to tell a story with this tiny little graphic, so I have do my best to include what’s necessary, what’s important, what’s requested, and still try to keep it clean.
As I was organizing my files yesterday I was looking at the number of app icons I’ve designed in the last year or two, and decided to put a little slideshow up here containing a few of the apps just to show the process in designing some of these app icons. Some are quick and painless, and some we revise and revisit numerous times before we arrive at the best option. Most of the designs in this slideshow are just comps and early versions or variations of icon designs. The final icons used in the apps can be seen in my portfolio.
* These images belong to clients and are copyright protected. Please do not download or copy any of the images in this gallery.
[wpdm_package id=2]