When you’re making an app, you’re probably not thinking about your app icon’s appearance until the very end. But when it comes time to advertise or entice app store-browsing users to click your app, it’s one of the most crucial assets. Just like a physical store’s sign or front window, your icon needs to explain your app’s core value and incentivize users to tap.
(Image Credit: Adobe)
If you get your app icon wrong, it doesn’t matter how great your app is. A large chunk of users won’t bother going further. Nail your app icon design at the beginning — and pick the right one with some scientific rigor.
We wrote this two-part guide to help you do both. First, let’s dive into the nitty-gritty of app icon design. (Watch our blog for part two: how to execute an A/B test and pick the best icon.)
Designing an App Store Winner
You probably have an app concept in mind. You might be approaching the end of your app’s development (if so, congrats!). Where your app is the product, your icon is the marketing. Making a great one is a crucial part of your app launch checklist. It’s time to put your (or, ideally, your creative team’s) design chops to the test and make an icon that screams “install ME!”
Here are some key steps to keep in mind when designing your app icon:
1. Big or Small, It Needs to Look Good (And Unique)
Your icon is going to be used on a variety of screens and menus. Some devices will have Retina screens, others won’t. When you’re designing your icon, it’s important to think about all the places it could appear and then think if a user could still discern that it’s your app.
Just a few of the sizes your app may render in, from 1024x1024px down to 10x10px. (Image Credit: AppIconTemplate.com)
AppIconTemplate.com has great pointers on things to keep in mind when designing your icon:
- Design (and test) the icon in multiple contexts and sizes.
- Think simple and focus on a single element or shape.
- Your icon should retain its recognizability when scaled.
As for which programs let you design with this scalability, we find most designers use Illustrator, Photoshop or Sketch. If this is your first rodeo, working with a template is probably the best approach. AppIconTemplate.com offers free ones for Photoshop.
2. Be Simple, Be Clear
Your app is one among millions in the app store. The icon is the first thing users see when searching on the app stores (assuming they read left-to-right), followed by your app’s title and preview images. You’re doing users a favor by having your icon portray what your app does.
(Image Credit: MacRumors)
You can’t always rely on app preview images (for example, if you enter the Top Charts, app preview images don’t show). Your icon should stand on its own.
Here are some rules of thumb:
- The best icon designs have a simple design and clear message. If you’re not a well-known brand like Facebook or Google, don’t rely on your logo.
- Your icon should represent the core brand values of your app, be it the primary function (e.g., couponing apps may use shopping carts), main character (if your app’s a game), and so on.
- The icon’s colors should pop but still reflect the in-app color scheme.
Some great examples of app icons that get the idea across are Gmail, Dropbox, and Mr. Jump. They get the message across and highlight the app’s unique selling point.
3. Stand Out in the Crowd
A user might download your app, lock their phone, and then actually open it a few hours later. If their phone’s already filled with apps, it’s going to be a pain locating yours. Do them a favor and make your app icon instantly recognizable and unique.
(Image Credit: The Verge)
Focus on a unique shape or object. Think Instagram’s old-fashioned camera or Snapchat’s ghost. Find something that both sticks out and highlights your app’s unique selling point (e.g., beautiful photos for Instagram and poof-it’s-gone snaps for Snapchat).
Shapes aren’t everything, though. You should also choose colors that contrast and pop. LINE and Evernote do this well — both pair green with a starkly contrasting color. The choice of green shading also help them stick out (just compare LINE’s green against FaceTime, for example).
4. Steer Clear of Text
Avoid using copy or text in your icon (if you can help it).
For one, it’s hard to read. See those smaller icon sizes up above? The text on your icon will be illegible on narrow menus.
Then consider the fact your app’s name will be written under (or next to) your app in the app store, on phone screens, and in menus. Using text — especially if it’s your app’s name — is redundant.
5. What’s Behind Matters Too
Not everyone uses default wallpapers. Some people will choose light backgrounds, some will choose dark, and a small percentage will choose rainbows. Your app is going to be on top of something, so when you’re testing your icon’s colors, make sure it retains its “pop” factor. Here’s what to check:
- App store backgrounds on platforms your app supports
- The ROYGBIV and B&W spectrum (red, orange, yellow, green, blue, indigo, violet, black, white and gray)
This might sound tedious, but you’re saving a lot of work not having to redesign your icon when you find out it doesn’t look good against, say, any background containing yellow.
The many, many backgrounds your app icon might live on.
Now you’re equipped with quick-start app icon templates and some key design fundamentals. Mock up a few concepts with different color schemes and designs, run them by your design-savvy friends, and then you’re ready to test. Just make sure you have a handful of designs ready to go.
In the next part of this series, we’ll get into how to pick a winner from your handful of concepts that’s going to drive the most downloads, and hopefully, revenue.
Want More? App Annie Has It
Don’t miss a single app-related update — subscribe to our blog to get more free app industry reports, conference updates and guides. We love hearing your opinions and ideas (hey, sometimes we overlook some key tips), so share your comments and questions below or on Twitter.
