Call 911! Your App Icon Needs Help!

Call 911! Your app icon is a train wreck. People look at it and shudder, or worse, they don’t look at it at all. Many developers don’t think about their mobile app icon until they’re ready to deploy their app onto their device for testing, or even when they’re almost ready to send their app to the app stores. In this article I’d like to advocate that you think about your app icon much earlier, because it is a critical part of marketing your app. Let me explain why.

What is an app icon?

Pure and simple, the icon is a microcosm of your app. You have a finite square of pixels in which to encapsulate the overall style and color palette of your app as well as its functionality. It needs to act as a memory jog on a phone screen where it may be enclosed in a “drawer” of icon groups and thus be almost invisible. It needs to be a little visual reminder to the owner of the phone that it’s available to be reopened.

More importantly, the app icon is the first thing that visitors to app stores see when they are hunting for their next download. In the category view of the iOS app store, an array of icons marches down the screen.

appstore-category

When reading about an app on a device in preparation for downloading it, the eye is drawn first to the icon at the top left, and second to the first screenshot or video.

app-page

Only after those first impressions are made does the eye wander over to the second screenshot and then maybe up to the rating stars. On Google Play, the icon is similarly given top billing in category view. Your entire decision to download is heavily influenced by that little image.

Each app platform has its own opinion on what a good app icon is. Don’t risk an app rejection by violating their rules:

Who cares? It’s just a picture

As it turns out, simply swapping the app icon can make a big difference in downloads. A well-known case study involves a racing game by Tango called Road Riot. According to Mobile App Minute, Tango switched their icon intelligently and boosted their downloads by 90%. After user-based AB testing, they switched the backward-facing blue car to a front-facing red car that clearly emphasized the shooting aspect of the app, changing both color palette, messaging, and even the embedded logo size.

tango

Clearly, the downloads prove that this change was a great idea. The red car on the green draws attention to the game mechanics, as do the explosions and rockets. Putting the red against the green emphasizes the exciting nature of the race, and shrinking the logo and toning it down makes the car pop out at the user.

Icons matter. Why waste such a precious opportunity to grab audience? Let’s find a way to design something great for your app without making yourself crazy.

Icon Genres

First, you need to understand a little about icon genres.

Game Icons

If the game is a racing or shooting game, it is often gaudy and bright. Game icons tend to be complex and busy, with intensely colored patterned backgrounds and sophisticated graphics that pop.

racer

If the app is a puzzle game it might have a character featured in the icon.

mouse

If it’s a more abstract musical or color-oriented game, it might have a more abstract design.

dots

Kids games or cute tools might have kawaii characters and sugary designs.

unicorn

A lot of game icons seem to have 2D or 3D borders. Some indie games recently seem to have a very flat design. The diversity of the mobile game genre also drives a diversity of icon styles.

Business App Icons

Business app icons tend to be simpler and more logo oriented. There’s more use of flat design and often only two or three colors. Their purpose is to brand the app with their corporate identity and they tend to do that as directly as possible.

yelp

Yelp’s icon is simply a copy of its logo.

pocket

Pocket makes use of the pocket-shape of its logo and turns it into a call to action – the red pocket shows that there is good stuff inside, mirroring the behavior of the icon in the Pocket Chrome extension. 3D is used to good effect here, the colors showing the variety of goodies stuffed inside.

slack

Slack’s icon uses its familiar madras plaid, evoking the interwoven threads of a team brought together by the ‘S’ of the brand.

Fitness App Icons

Fitness apps seem to have particularly diverse styles. They can be either flat and corporate looking, abstract, or logo-oriented. It can be hard to pin down a particular style for this genre of app.

run

Runtastic and Runkeeper use the white silhouette of a running figure on blue.

loseit

LoseIt! goes in a different direction, creating a great icon that shows exactly what it’s for – to take pounds off that scale. This one is particularly well executed.

Utility or Artsy App Icons

Photo, sticker, or art application icons tend to be crammed with content and/or have some visual reference to the well-known Instagram icon.

kawaii

It must be a cute camera!

heartcamera

This one’s even cuter!

blingcamera

This one’s the cutest of all!

What Kind of App Are You Building

So, your first question before starting your app is: “What kind of app am I creating?” Do some searches of the app stores and find the trending apps in your genre. App Annie can help you find various apps’ icons across platforms. Look at their icons and try to find a pattern you can follow.

Color theory

Next you need to think about your color palette. It’s worth taking a quick look at color theory. Pay special attention to color meaning. While the meaning of color differs depending on the cultural context of the audience, I’m going to assume a Western audience for the purposes of this article. This excellent article describes the meaning of various colors for Western audiences:

Color Meaning
red passion
orange warmth
yellow attention-getting, sunny
green money, health, life
blue depending on the hue, can be either depressed, refreshed or calm
purple mystique, luxury, royalty
white cleanliness
black death

Let’s take a look at some apps that use color to great effect.

yearwalk

A brilliant mix of simple black and white is used for the innovative storytelling app, Year Walk. The app’s palette is black, white and gray, and the horror elements within the game are sometimes emphasized with a black and white strobe. The app and its companion app hint at its spooky moments with a beautifully minimalist design.

lumosity

Lumosity uses color well in its icon where the warm orange offsets the animated, lively brain activity that the app promises.

poshmark

Poshmark uses a somewhat unusual color – a dark burgundy – for its icon and app palette but the effect is that of luxury with a hint of red wine. The logo is intelligently designed as well, with interlinking P’s that evoke links in a piece of jewelry.

Depending on your mixture of colors, you can create an entire atmosphere within your app simply by picking the right color palette. For color inspiration, visit coolors, Colour Lovers or mix your own palette with Adobe’s kuler tool.

Your app icon should use the same color palette as your app and vice versa. Try creating the app icon’s colors and then translating them to your UI as you are building. What atmosphere can you create? Beta test your palette with your friends and colleagues. If you’re going to deploy the app cross-platform, make sure to test the palette on a good sample of devices – colors can look brighter and more saturated on some Androids.

Imagery

Once you have a palette, you can decide what type of image you want to feature on your icon. For business reasons, you may need to have a logo, but if you can, avoid words on your icon so as to not annoy international users.

mbta

Boston’s MBTA commuter rail app does a great job of showing the T in a circle, a symbol local people recognize at subway stops, on the same purple color that is used to delineate commuter rail lines on the MBTA maps.

jelly

The Jelly icon uses both color and imagery to give a hint of the ‘bouncy’ interface that users enjoy.

directr

Directr uses a simple Director’s chair on a bright purple that signals creative movie-making in this app.

picmusic

PicMusic combines music and a full color palette to show how music and pictures merge in this app.

Crafting your icon

“But wait!” you say, “I’m a developer! I can’t do art. I don’t even remember how to write cursive!” Fear not. Neither am I, and neither do I. You can still create an icon relatively easily using a simple graphics program like Preview, Gimp, or my favorite, Fireworks.

Working with vector graphics, my typical workflow is to create a 1024px x 1024px square canvas in the color of my choice, and paste in a graphic that I buy from VectorStock. If you get a good set of vectors you can reuse them for your app’s UI, splash screens, icons, and screenshots.

  1. Start with a group of vector art
    vector-small
  2. Tweak the colors and design using the pen tool
    giftler-pen
  3. Reuse this creation for the splash screen, so that when the icon is touched, the effect is that it is expanded when the app opens
  4. The final creation
    giftler-icon
  5. Make sure to test your icon idea with users. You might consider posting it on PreApps to get quick user feedback before the app hits the stores.

Alternately, you can work with an artist to have your icon crafted, but of course this is a budget item. With a bit of effort and thought, you can make a nice icon yourself.

Manage your icon

Once your icon is created, you need to create a number of versions using the proper naming conventions for use by the different app stores and on various-sized devices. To resize the icon for use in your app, you have a few options.

If you are using a build tool such as Telerik AppBuilder, you can use the in-browser client to upload your app icons, one at a time. If you reuse the large icon you just created, AppBuilder will resize it automatically. You can also use AppBuilder’s command line interface to import your properly-sized icon set.

If you need to manually resize the icons, a good tool to use is this icon generator or MakeAppIcon. As long as you start with a large, high-resolution image, resizing them using these tools is easy.

For Android, you will need a nine-patch icon. I use the nine-patch generator tool to create it.

Let’s play a game!

I hope I have convinced you that giving a little TLC to your app icon can be really beneficial. Paired with a good ASO strategy (good keywords and a descriptive title), nice screenshots, localization and, of course, making sure that your app functions well a good icon can really make your app take off. Let’s test some apps that are in the wild! An app icon should be easily matchable with its name. How many can you guess? Can any of these benefit from a redesign?

Comments