Designing an app icon that converts

The humble app icon. So small yet so powerful.

Of all the factors that impact downloads on the app stores, your app icon is arguably one of the most important. Your icon is the first impression someone has of your app and unless you get it right, it’ll likely be their last.

Yes, that little square picture is often the difference between someone downloading your app or just scrolling past it. Even small differences and variations to an app icon’s design have been known to have a dramatic impact on downloads. 

It all comes down to three things – attention, recognition and interest/intrigue. Does your icon grab the user’s attention, does it accurately convey the purpose of the app, and does it pique the user’s interest enough to click and view more?

You see, the job of the app icon isn’t to sell the app. It’s job is to get the user to tap to find out more about the app. Then it’s up to your screenshots, marketing copy and reviews to finish the job and secure the download.

With so much resting on your icon’s ability to pull in potential customers, it goes without saying that your icon design should be very carefully considered and executed. More than that, it should be a constantly evolving asset. Experimentation and adaptation are key to the long term success of your app.

Ingredients of a good app icon design

According to renowned app icon designer Michael Flarup, there are five core aspects or best practices when it comes to app icon design:

• Scalability
• Recognizability
• Consistency
• Uniqueness
• Don’t use words

I think that pretty much sums it up from a goals perspective. Achieving these goals, however, is a little more complicated, especially for inexperienced app icon designers. Let’s take a look at some strategies you can follow to ensure your app icon is scalable, recognisable, consistent, unique and doesn’t contain words.

1. Just don’t use text.

Let’s start with the easiest one. Don’t use words. Just don’t do it. Take a look at the app icons you tap on a daily basis. How many of them contain text? Chances are, not very many. There are good reasons for this: 

• Your icon is always accompanied by the name of the app, so there is no need to include the name in the icon too.
• App icons are usually displayed at a small size, making text illegible. 
• Text on an icon can make it look messy and unprofessional
• By using text instead of an image you are missing a huge opportunity to sell potential customers on the benefits of your app

There are of course, some exceptions to this rule but if you are a startup, the exceptions won’t likely apply to you. For example, if your brand is a household name and your logo contains a small amount of text, it might be worth using your logo in your app icon for quick brand recognition.

Even for well known brands, its best to stick to just a few letters. Facebook’s ‘F’ icon or LinkedIn’s ‘in’ icon are good examples of when to do it. The Uber Eats icon really pushes the boundaries though and they only get away with it because it’s such an iconic brand.

For all the reasons stated above, startups are much better off with an image-based icon, even if you have a nice text logo. Keep your logo for your website and craft a simple geometric icon for the app stores. 

2. Be bold. Make a statement.

Other than not using text, this is probably the most important advice you can take away from this article. Bold design makes achieving all of the objectives of good app icon design so much easier.

A bold icon will, by nature, be more scalable than an icon that uses fine lines and details. Detail is lost at small scale, so icons that contain detail start to lose their relevance and structure when they are shrunk down.

Bold icons are almost always more attention-grabbing. This means users are more likely to stop and check your app out on the App Store and it also makes your icon easier to find on the user’s desktop once they’ve downloaded your app.

So what do I mean by ‘Bold’? There’s a few aspects to this:

• Bold use of colour and contrast
• Strong geometric shapes
• Simplicity

Here are some great examples of bold icons.

3. Let the picture tell the story of your app.

Yes, we all know a picture tells a thousand words and never more so than in app icon design. You essentially need to convey the entire purpose of your app in one shape, image or object.

This may seem difficult at first, but it’s not as hard as it seems. Forget trying to explain all of the features of your app with your icon. That’s only going to get messy, fast. At this point the features are almost irrelevant. Your icon only needs to convey the core purpose of your app. By focusing on the outcome for users, rather than the nuts and bolts of the app itself, you can really narrow down the icon concept.

Here’s an icon we designed for event food ordering app, Snackr. The outcome for users is food delivered to their seats at sporting events. So, the icon uses a bold, universally identifiable food icon, the burger and combines it with a location pin. It also uses bright orange and the contrast of the white burger to make it eye-catching and memorable.

Remember, most people browse the app stores with a purpose. They have a burning need that they hope an app can answer. Your icon should promise, or at least hint at the solution.

4. Design your icon in situ.

Designing an app icon in the isolation of a flat grey photoshop canvas can be somewhat misleading. App icons are rarely displayed that way to end users, so it pays to review yours in a more common setting.

There are three situations your icon will most often find itself displayed:

• App Store / Play Store search results / lists
• App store / Play Store shop fronts
• Device desktops

Search Results

Here, the key is to stand out from the pack. Grab a screenshot of some relevant app store search results and check how your icon looks placed among them. How does it hold up in this setting?

— A quick pointer regarding white icon backgrounds —

White is used quite commonly as an icon background by well known brands, due to its ability to stand out on device desktops. However, an icon with a white background will struggle to stand out against the white background of app stores. So you need to make a judgement call. What is more important to you – standing out on the app stores and attracting new users or standing out on the desktops of existing users? Bright yellows, greens and pinks have the uncanny ability to stand out on both light and dark backgrounds, so they may be a good background option for startups.

App store shop fronts

You have your shopfront all to yourself, so competing with other apps isn’t a big concern here. More important is consistency. Here, your icon needs to be consistent with your app screenshots and the tone of voice of your marketing copy. It needs to look like it fits in and not like it was an afterthought by a marketing agency trying to trick users into downloading your app with a flashy logo.

5. Experiment

Don’t stop at just one icon design. Design five or six and ten variations of each, then test them all in situ. You’ll be surprised at how often the icon you thought you loved the most, doesn’t perform as well as other variations out in the real world.

Don’t be afraid to try outlandish ideas. Even try breaking all of the established rules I’ve stated in this article. You never know if some weird and wild combination of elements might just give you the edge on the app stores.

On top of testing multiple icons in situ during the design process, try A/B testing different icon versions live on the app stores. Continuous experimentation will result in better conversion rates in the long run.

Here are some great tips on live A/B testing app icons by AppAnnie.

By following these best practices and using a bit of experimentation and creativity, your app icon can become a high performing asset to your business. Take the time to design it well and commit to your icon being an evolving entity for the best results.

– By DreamWalk Co-founder Joseph Russell