calculator apps

The Art of App Store Icons

Your icon is the face of your app. All your hard work and all your GitHub hours boil down to a little 1024 x 1024 square. Creating a great icon is pretty well recognized as one of the best things you can do for app store optimization (ASO). Translation? Your icon is the last thing between developers and above-the-poverty-line riches. So we’re going to go through some best practices that you can apply to make your icon design (metaphorically) shine.

Why it’s important

this is very important bench

Image via Flickr

Before we get into what Apple says about icons (not much) and what other people say about icons (lots and lots), why is icon design so important? It’s fair question.

First, a picture tells a thousand words, and if a user scrolling through dozens or hundreds of apps at a time, then your icon needs to stand out. That much is pretty obvious. This challenge has become even more pertinent since Apple released their iOS 8 update back in 2014. The change to continuous scrolling means that users can move through apps an awful lot quicker than they used to.

The result? Less time per app, so you really need to nail your pictures and screenshots.

What Apple’s got to say

So what’s Apple got to say on the subject? A quick look at the iOS Dev Library and they’ve got a whole section on app icons. Most of it is about making the icon look good once it’s on the device, rather than in the App Store, but they do offer some very high level advice like:

  • “Create an abstract interpretation of your app’s main idea”
  • “If you want to portray real substances, do it accurately”

So Apple’s not exactly doling out actionable advice, but it’s a good place to start  – essentially, don’t use a picture, and make your icon tangibly related to what you want users to see your app as.

For example, Desk (which I talked about last week) has a great icon. It’s a tiny typewriter, and without knowing anything about the product, I’d say most people would guess it has something to do with typing or word processing. See? Tangibly related.

At the end of the day, Apple’s bit tight lipped on what makes good icon.

App icon best practices (with examples!)

So what should you be doing to help convey all of your apps awesomeness to the outside world?

General design

While there are lots of tricks to really stand out, like adding a ‘free’ tag or using a main character (more on those later) there are also some basic design guidelines that you should follow. Naturally, these can all be broken with superb results, but for the most part:

  • Consider having a border, so once your app is downloaded it’ll look nice no matter what the background is
  • Don’t make your logo transparent. It’ll reduce legibility
  • Don’t use words – they’ll jut get lost at smaller sizes
  • Don’t make your icon glossy – it’ll make a lot of it invisible
  • Keep it simple – app icons are small and details get lost

Stand out

Easier said than done, I know. Regardless, it remains one of the core functions of your icon – to differentiate yourself and get the user to tap your app over all the others.

Think about it this way. There are 1.2 million(ish) apps in the app store – it’s unlikely that you’re going to be the only one offering your product. So how do people know that you have the best calculator app compared to others? Your icon, that’s how.

For example, here’s a screenshot of the calculator apps search results for iPhone.

calculator apps

You know what stands out to me? The ‘free’ tag on the calculator app.

calculator screenshot edited

It’s more than a little ridiculous, since the vast majority of apps in the app store are free, but still – by putting that little tag on it, it automatically makes me think that if they’re tagged as free, then the rest must not be. And that split-second different is really all you the edge you need in the app store.

Change it up

Splashy FishNot too much, but changing your app icon just a little bit is a great way to reinvigorate downloads. Seasonal icons are the best example of this.

Last Halloween, for example, Splashy Fish changed their icon to be more Halloween-y. It’s a small change but if you’re the owner of a well-known app, then it might be just the thing to boost your downloads.

Branding

If you have a strong brand value then simple branding is a great way to go. But remember: keep it really simple. Nike, for example, goes a really good job of this – this is what happens when you search them:

Nike Apps

It makes it pretty much instantly recognizable which apps are theirs, so if I’m looking for something by Nike, then it’s nice and fast. Also, since they’re an incredibly well-trusted brand  branding for them makes a lot of sense.

Another point about branding is that if that’s the path you’re going to go down (hopefully) in the future, pick something that can be adapted to lots of different settings. The Nike swoosh, for example, neatly fits into lots of different app icons.

clash of clans iconThe Clash of Clans icon, for contrast, isn’t nearly as flexible, and while there might be an exception for game icons that feature main characters, I’d say err on the side of caution when it comes to highly stylized character icons.

 

Brand piggy-backing

This is a fun way to get better recognition with your audience. (NB: I am not advocating that you break the law, mislead your users, so do this with caution).

So we’re clear on what I mean, let’s look at an example. Hipstamatic is a digital photo app that increases the functionality of your camera phone exponentially. Basically, it’s a really nice version of Instagram. Knowing that, icon designer Aravind Kaimal came up with this:

hipstamatic icon

Image via Dribbble

It’s pretty clear where his insta-ration came from, if you know what I mean. But that’s not a bad thing! Instagram has built this amazing brand and their iconography is synonymous with filtered pictures – which is exactly what Hipstamatic does. So why not capitalize on other brand’s recognition?

If brand piggy-backing is done well, as if similar enough to get recognition and forge the link, but different enough there are not accidental ‘oh I thought this was this’ clicks, then it’s a really excellent strategy.

Google Android

Lastly, I wanted to give a nod towards the Play store, who is so often neglected in app-chat, and I think unfairly so.

Google actually has an Roman Nurik made a nifty icon generator, to presumably help you make your icon better and more focused for the Google Play Store. It seems to me that while it’s not that useful a tool for app creation, it’s be a great tool to test and iterate your app icon really fast (especially if you don’t have a designer on staff/design skills). So that’s one thing.

Second, most of what applies to the App Store will apply to the Play Store as well.

We’re not really dealing in different software, we’re dealing with the psychology of what makes people see something and think ‘yes, that is the app for me.’

In a hyper-saturated market, that is absolutely golden. (that said there are of course some technical differences – there’s a nice breakdown here.)

Wrap up

Your App Store/Play Store icon is rally important. It’s a tiny window of opportunity you have to snag the attention of App Store browsers and convince them that your screenshots, your promo video, your description and eventually downloading your app are all worth it to them. Unfortunately, there’s not willing formula for what makes a good or a bad App Store icon. It’s more about what is going to separate you enough to stand out, but still be recognizable enough that your audience knows instantaneously what your product does.

That’s a lot do do, and not a lot of space to do it in, so you’d best get cracking.

Bonus resources – how exciting


Don't Tell People About Your App; Show Them

Choosing the right icon is an important step in your marketing campaign. Promotion will also require demo images of your app. At Placeit you can easily make mockups showing your app in diverse devices: iPhones, iPads, Android phones and combinations of these. It won't require you to take photoshop classes, all you need is a screenshot from your app: upload it and let Placeit handle the rest!

 

Make Your Mockup Now
"Can’t mention this enough: For web/UI designers, Placeit is a great online tool"
5/5