What Makes a Great OS X Icon?

This post is part of a series that revisits some of our readers’ favorite articles from the past that still contain awesome and relevant information that you might find useful. This post was originally published on July 20th, 2011.

Over at iPad.AppStorm, Joel Bankhead wrote a fantastic article about what makes a great iPad app icon. It caught my attention, and really got me thinking about the differences between iOS and OS X app icons – Are the principles the same, or very different?

In this article, I’ll be having a look at what you should and should not do in order to make a wonderful OS X icon.

Like the article? You should subscribe and follow us on twitter.

How Important Is a Good Icon?

It is hard to express just how essential a great icon is, especially with the Mac App Store in play. Many people will go through the App Store and only find out more about an app if their eye is drawn to the icon. Others would argue that this is a foolish thing to do, as the quality of an app could be great, even if their icon is not. This is, of course, true, but an icon is a great representative of the quality of your app. If you’re willing to invest time and money in creating an awesome icon, there’s a good chance that you will have spent the same amount of effort with your app. If you drew a few colourful shapes in MS Paint for your logo, your app’s quality is likely to reflect the same type of effort and investment.

So What Makes a Great Icon?

There are, of course, a huge number of factors which determine just how good your icon is – I’ll touch on those which I think are most important, and give a few examples along the way.

Size

One interesting difference between Mac and iOS icons is that iOS icons are all a fixed size – They fit into that nice box with rounded corners. You can’t really go wrong. With Mac, however, it’s quite the opposite. The default icon size for Mac is 512×512 pixels, but if your icon stretches to the borders of that, your icon won’t look right.

Let’s take, as our first example, some square icons. First up, we have Mixtab, an app which started off on iPad, and whose icon is the exact same as the iPad version. Secondly, we have the Adobe CS4 icons, which, despite being a simple square, were undoubtedly focus-grouped to death. Looking at them side-by-side, the Mixtab icon is much bigger, and doesn’t fit in with the standard icon size in your dock. Adobe, on the other hand, have added a little bit of padding around the square, making the icon fit into your dock much more easily.

Secondly, here’s a screenshot of a whole load of great circular icons – You’ll notice that they are all the same size – It’s this level of consistency which makes the standard of design on OS X so wonderful.

Perspective

If you look at any icon in your dock that represents a real object, you will find that they have a certain perspective, and if you go with a flat icon, or an icon with a very different perspective, your icon will, quite frankly, look ridiculous. One of the most well-known examples of this is the Twitter for Mac app. It’s a great app, but it’s default icon is at an angle which is completely off. Your icon doesn’t have to be perfect, but if it is too conspicuous in your dock, it won’t work.

Number of Elements

When creating an app, it’s important to keep the number of elements to a minimum – One or two should work fine. I don’t care if your app has a billion features, it doesn’t need to have an icon which represents every single feature. The challenge for a designer is to find something which represents the app as a whole.

Something that represents this wonderfully is the icon made by SoftFacade for Eloqua. SoftFacade are an absolutely incredible team, and have made beautiful icons for apps such as Radium, Notificant, and much more. This client, however, requested that they include all kinds of elements in the icon, and it ended up as something of a mess. The elements are drawn to perfection, the perspective is great, but the number of elements just ruins everything.

Realism

There’s a certain level of realism that comes with making an OS X icon – You don’t want a cartoon drawing, or anything too two-dimensional. Icon designers are expected to make 3D icons that look almost like the real thing. “Almost” is an important word there. Your icon should not just be a photo (thought Preview’s icon does contain a photo). It should be slightly unrealistic, to keep with the overall look of the operating system.

One icon which I feel goes too realistic is the Yojimbo icon – It’s a great app, but the icon looks a bit too like a photo. Maybe it’s the texture, or the lighting – I’m not sure. Either way, for me, it just doesn’t work.

Conclusion

I’d like to say that I’m not an app developer, nor am I an icon designer, I’m just an app consumer who knows what he likes and doesn’t like in an OS X app. There are also tons of other factors which I didn’t touch on, such as not using too much text in the icon, illustrating what the app does in the icon, and much more. The elements I focused on are, in my opinion, the most important, and often where many icon designers fail.

There are loads of amazing apps with stunning icons, but unfortunately, as the Mac App Store means anyone can be a developer, we are also seeing more and more unprofessional icons, which is never a good thing. Leave a comment below and let us know what your favorite and least favorite app icons are. What do you think makes a Mac app icon great?