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.

Icons in the Mac App Store

Icons in the Mac App Store

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.

Mixtab and Adobe Illustrator

Mixtab and Adobe Illustrator

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.

Circular OS X icons

Circular OS X icons

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.

Twitter for Mac

Twitter for Mac

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.

Eloqua Icon

Eloqua Icon

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.

Yojimbo Icon

Yojimbo Icon

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?


  • http://clarencechanxy.posterous.com Clarence Chan

    Nice post! Never stopped to take a deeper look into icons, so this post is great and an eye opener indeed. Thanks! Keep em coming! Cheers from Singapore

  • http://clarencechanxy.posterous.com Clarence Chan

    Nice post! Never stopped to take a deeper look into icons, so this post is great and an eye opener indeed. Thanks! Keep em coming! Cheers from Singapore (@clarencechanxy)

  • Pavel G

    I agree with this article. I myself first look at the app icon whether it’s on the Mac App store or the iOS App store. For me a well designed icon means that the app is probably just as well designed and great as well. This has proved true many times. I’m one of those people who judges a book by it’s cover mainly because I’m such a visual person. It always pains me when I actually find a very useful app but hate its icon or the design of the app itself. Thank you for writing this article Conor. I wished that it was longer because I liked it so much but I understand why it wasn’t. Thanks again!

    • Tuomas Hämäläinen

      I do this a lot too. Twitter is certainly one of the apps that have incredible details UI-wise whereas their icons seem like an afterthought (which hasn’t been thought through).

      As for the Yojimbo icon, I don’t think it’s too photorealistic. It’s well within the boundaries set by Apple’s default icons like Front Row, GarageBand or Preview, which also sport an incredibly photorealistic design.

  • Artyom
  • http://www.ffeld.com.br ffeld

    Great post. Creating icons is quite challenging!
    Sometimes is hard to “resume” the essence of an app or software into a visual answer.

    8-)

  • Dave

    iTunes is an example of a great circular icon? People might have gotten used to it by now, but it’s still a hideous icon…

    Other than that, good post.

  • Darrell

    Great article, missing links to recommended icon websites, as for myself, I change most of my icons to match my wallpaper if I can, best Icons I have found so far,

    https://ohmyicons.com/index.php?main_page=index

    http://cryo64.com/

    Anyone find any other great sites, please commit. Kind regards Darrell

  • http://www.jucdmpad.info jucdma

    Great post. Creating icons is quite challenging!
    Sometimes is hard to “resume” the essence of an app or software into a visual answer.

  • Bryan Gibson

    I’d imagine that the author of MyPhoneDesktop app needs to read a few of these design articles. WTF were they thinking???

    http://a2.mzstatic.com/us/r1000/112/Purple/v4/42/97/be/4297be07-ec69-8ded-8673-9f30729f5dfe/mzl.nmgkhezb.175×175-75.jpg

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow