Make Your App Icon Stand Out on the App Store in 10 Steps

Evaldo Rossi
App Store Optimization (ASO)
6 min readSep 19, 2014

--

Don’t overlook your App Icon: it’s still part of Conversion Rate Optimization (CRO).

This article was originally published on the WordData Blog.

After the distant iOS 6 update, the search results page changed from an app list to a card-based interface. Besides killing traffic for apps located beyond the 10th position, thanks to its slow card-by-card scroll (soon to be changed on iOS 8), it made the app icon to be overlooked by most app developers.

The fact is that icon design was more important before iOS 6 came out. Yet, it is still part of the Conversion Rate Optimization (CRO) process. A user still takes it into consideration when deciding whether he will download the app or not. And that’s on the Search Results Page — the iOS top charts and Android still don’t show screenshots, so icons are extremely important there.

When 31 percent of smartphone owners are downloading less than one app a month, you would want to make sure that this app is yours, and a great app icon will help you on that. Some developers go as far as A/B testing dozens of App Icons to discover the one with the highest conversion rate.

Luckily, you don’t have to spend days crafting the perfect download-inducing icon. Here are a few tips to help you to make a decent-looking one that will attract users.

1. Don’t use words on the App Icon

No one will be able to read it, and it’s a lazy solution. Your app icon will always be followed by the app name, so you absolutely have no reason to put it in your icon.

2. Work with simple forms

Complex looking icons will be hard to understand. A good practice is using a single asset as the absolute center of attention, and letting its silhouette clear against the background.

You could use more elements, of course, but see if you can identify them all in the 114x114 pixel icon that will be featured on the home screen and store. Use contrast to your favor or your app icon will look like a surrealist art piece; unless, of course, your app is about surrealism, in which case it may be the best approach.

3. Use details

Simple is better, yes, but it doesn’t mean that you don’t add any details on your icon. When you use a keyword with lots of competition and with all kinds of icons competing for the user’s attention, the details will make the difference. Things like a great border, a well-made skeuomorphism or the creative use of colors will convince the user that your app is not made by amateurs.

4. Use vibrant colors when possible

In my testing experience, the common smartphone user associates colorful with beautiful. Designers know that desaturation and pastel colors can impress, but when the user compares them to the eye-candy high-saturated primary and secondary colors of some other apps, he’ll be more compelled to download the latter.

5. Don’t make promises your app does not fulfill

Your app’s marketing material creates certain expectations on the user. If your app doesn’t fulfill them, you’re in trouble. Expect lots of 1-star reviews and a good number of uninstalls. The icon should represent what your app is about. That’s why you should…

6. Keep the visual language and art style from the app

You might be tempted to embark on the flat design hype train and do the most minimalistic and modern icon possible. Apple used it on iOS 7 and Google will use it on Android L, so it might be the best approach, right?

No. I mean, yes, if your app follows that visual language. Otherwise, always follow your own. In fact, a research presented on the 2013 Tokyo’s International Design Congress pointed out that users still find skeuomorphism icons a lot more attractive, the exception being music apps.

7. Test design with and without borders

To use or not to use borders, that is the question. The answer? Test with both. The reason why people use borders in their icons is that they help the icon to contrast with the phone’s wallpaper. There are a lot of apps today though that do fine without borders, especially after the iOS 7 update.

Another common use of borders is branding: big publishers (usually game publishers) use them to unify all of their apps on the App Store. In Gameloft’s case, for example, each of their apps use the same border featuring a small logo on the tip, so that the user associates the border and logo with quality apps, if that user had used other apps from the same publisher before.

Evaluate your situation and test both possibilities. Your apps (and marketing strategy) will decide if you need a border or not.

8. Get creative, do something your competitors didn’t

Check out your competition, round up their icons, and try to do something that would draw more attention than all of them, or at least be competitive in that matter. Maybe you can use a color none of them have used, or maybe thinking in a better visual metaphor for your app’s functionality would make the difference.

9. Choose a small SpringBoard name

SpringBoard is a nice name for the iDevices home screen; it’s the app that manages that part of the interface, much like the launchers for Android. For some weird reason, designers at Apple thought it would be nice to have giant names shortened out with an ellipsis. It looks horrible. If you have a big app name, that’s fine, but don’t use it on the bundle display name. Shorten it.

10. Test the icon

Testing the icon should be part of your app testing schedule. Observe it on iPads and iPhones. Look for any artifacts and see if you can understand the icon’s elements. Put your icon randomly on a screen filled with other apps and check if your app is easily identified.

Tools like MakeAppIcon.com might help you to test faster, exporting your icon to all iOS and Android formats quickly.

If you’re serious about it, you could show your icons to family and friends and ask them which they are more liable to click. Bigger studios even run some mobile ad campaigns to A/B test the icons and discover which of them has the highest click-through rate.

11. Bonus: Working with a big brand? Capitalize on it

If you are working with a big brand, don’t think twice about placing that brand in your icon. That’s a rare opportunity for most developers, and if you are in this situation, use the brand in your favor.

Conclusion

The icon is one of the first contacts the user will have with your app, and most users judge books by their covers. So why not make a beautiful icon? Don’t forget they will look at your icon every time they open your app. Good icons, therefore, could even help with user retention, since users tend to click icons they like.

Take some time to make a decent-looking icon. There isn’t a single universal approach for making one: you can follow the trend or break the mold, either way could produce great icons. Just make sure to test your designs and discover which works best for your app.

Learn more about App Store Optimization (ASO) on the WordData blog.

Enjoyed the post? Hit the ‘Recommend’ button below and spread the knowledge!

--

--

Evaldo Rossi
App Store Optimization (ASO)

ASO (App Store Optimization) Expert & Mobile Game Developer. I write about Mobile Gaming, Mobile SEO and App Marketing. I blog at www.WordData.com