The app icon is the metadata element with the greatest exposure in the app stores. The reason is that it shows up in every conversion opportunity. While screenshots and videos only appear on SERPs and in some app store features, the app icon appears everywhere where your app shows up.
For these reasons, the app icon has enormous potential to contribute to your app’s conversion rate in the stores. And in addition, it is also omnipresent on the screens of users’ devices, so it can create brand awareness among your target audience. Whether the app icon can tap these potentials depends on how you design it.
TO DESIGN A GREAT APP ICON, FOLLOW THESE 5 RULES:
- Focus on relevance.
- Make the App Icon Unique.
- Keep it Simple.
- Pick the Right Colors.
- Create a Portfolio Branding.
Although the specs for icons on Google Play and the App Store differ slightly, these design rules are valid for both stores. Read on to learn more about them.
RULE 1: Focus on Relevance
It is important to keep in mind that the app icon will be visible to users who have never heard about your app before. Thus, it is important that you make it relevant. It must reflect your app’s purpose, the problems it solves, or the needs it fulfills. If you do it right, you can attract the attention of potential users and raise their interest in learning more about your app.
The easiest way to make your app icon relevant is to use a pictogram. Pictograms are very simple geometric forms or symbols. For most apps, you can easily find a pictogram that reflects its purpose. Here are some examples of relevant pictograms that are commonly used for app icons:
- Envelopes for mailing apps
- Speech balloons for chatting apps
- Hearts for dating apps
- Chef’s hats for cooking apps
- Airplanes for traveling apps
RULE 2: Make the Icon Unique
When you scan the dating apps category on the App Store or on Google Play, you will quickly realize that many app icons look similar to each other. It is hard to distinguish them and to keep in mind which icon belongs to which app. But without this distinguishability, it is impossible to build brand awareness.
Icons that contain only one pictogram often lack distinguishability. But by combining two or three pictograms, you can create app icons that are unique and recognizable. Have a look at the example below. The Takeaway.com icon combines a cutlery set that symbolizes food with a house that emphasizes that people eat at home. The combination of the two pictograms is highly relevant and makes the icon unique.
Another way to make an icon distinguishable from competitors is to add branding elements like your brand name or logo. The following example shows the icon of Fender, an educational app for learning to play the guitar. It shows a plectrum (a small piece of plastic that is used to pick guitar strings) which is a relevant motif for the app, and the Fender logo with a characteristic font type.
Alternatively, you can add your brand’s mascot. There is a requirement for this approach, though: Your mascot must be a recognizable character with not too many details. The green owl from Duolingo, an app for learning languages, is a good example. It contains only few details, but it is recognizable nevertheless.
RULE 3: Keep it Simple
Despite the necessity for uniqueness, try to keep your icon simple. App icons will be shown to users in many different placements and sizes. In Google Play, for instance, app icons appear in top charts at a much smaller scale than on product pages. If you add too many or too small elements, you will risk making your icon unrecognizable and destroying its relevance.
In general, try to follow these rules to keep your icon simple:
- Do not use more than two, maximum three components.
- Prefer components with few details over components with many details.
- Avoid text elements (except for the brand name, given it is not too long).
- Limit the number of colors in your icon. The more colors you use, the bigger is the risk to run into problems with contrast.
- Stay away from photos. They contain too many details and will be hard to recognize in an app icon.
Exceptions from these rules might apply to some games. If a game is hectic and action-packed, then an app icon with many detailed components that reflects this hectic might work. Also, characters with more details can be fine. Nevertheless, do not overload your icon. Using multiple characters with text elements on an unease background will most likely not work for games either.
RULE 4: Pick the Right Colors
I already mentioned that you should not use too many different colors. Besides, you should also make sure that the colors of your icon express the values that your app (or company) stands for.
In each society, colors stand for specific characteristics, values, and feelings. Using the right colors in your icon will connect your app to these characteristics, and position your app in a favorable way towards your users.
Here are the common meanings of colors in western societies like the United States, Australia, or Western Europe:
Blue stands for trust, authority, and masculinity. You can find blue in the icons of many apps in the finance sector such as Deutsche Bank or Paypal.
Green is the color of life, youth, and nature. Thus, it is used by many apps that deal with ecology, but also by apps for outdoor activities like hiking, biking, or camping. Check HomeCycle or AllTrails.
Red is an attention-grabbing color that signals danger, but it also stands for love and passion. So it makes sense that it is widely spread in the dating category. But tourism apps also use red to emphasize their customers’ passion for travel. These include HRS or Turkish Airlines.
Yellow is a joyful color that stimulates the nervous system and also affects hunger. Therefore, many app icons in the food industry contain yellow, for example, McDonald’s or Pizza.de.
Purple is the royal color that represents wealth, luxury, and exclusivity. But it also stands for femininity, so apps for women like Workout for Women or Pregnancy Tracker use it in their icons.
Be aware that colors also have negative meanings. Black, for instance, is the color of mourning in western societies. Also, the characteristics associated with colors are different in other parts of the world. So it can make sense to vary colors when localizing your product page. The following table gives you some examples of the meanings of colors in different cultures.
| Europe / USA | Asia | Middle East | Latin America | |
|---|---|---|---|---|
| Red | Love Passion Danger | Happiness Joy Celebration | Caution Danger Evil | Passion Religion Fire |
| Yellow | Warmth Happiness Caution | Sacred Royalty Courage | Happiness Strength Mourning | Sorrow Death Mourning |
| Blue | Trust Authority Masculinity | Strength Femininity Immortality | Holiness Spirituality Protection | Trust Religion Serenity |
| Green | Nature Luck Greed | Nature Youth Infidelity | Luck Fertility Strength | Nature Death Danger |
| Purple | Wealth Fame Royalty | Wealth Nobility Mourning | Wealth Virtue Omen | Sorrow Death Mourning |
Credits: Globalme.net
RULE 5: Create a Portfolio Branding
In case you own more than one app (or plan to create more apps in the future), consider a portfolio branding. By adding recognizable design elements to all of your app icons, you will raise the chance that users transfer their positive feelings towards one app to the rest of your portfolio. Thus, you will increase the chance that people who like one of your apps download the others, too.
You have three different options to create a portfolio branding:
Use a similar color scheme for all icons. Check out the app icons by Leap Fitness Group: They combine a red background with a character in grey and black. Although the characters and their poses are different, the color scheme is recognizable.
Use the same pictogram or geometric form in all icons. Many app icons by Amazon contain the curved arrow that is part of the Amazon logo. Although the icons have different colors and captions, this arrow creates a branding effect.
Add your company logo to each icon. Especially game studios like Electronic Arts use to add a small version of their logo to the bottom left or bottom right corner of their app icons. This approach only works with simple logos, though. If it has too many details, users will not be able to recognize it.
Conclusion
Although the app icon is a small metadata element, it is important for the success of your app, and you need to keep a lot of things in mind when designing it. Following this guide will help you avoid the biggest mistakes and create an icon that is relevant, recognizable, and beautiful.
To make the most out of your app icon, you should also align its design with the look of your app and other metadata elements on the product page (like your screenshots) to create a congruent experience for your users.
DO YOU WANT TO LEARN MORE ABOUT ASO?
Then you should check out the App Store Optimization Book.
On more than 300 pages, you will learn everything you know about ASO, including keyword research and implementation, writing app descriptions, designing screenshots and app icons, composing app preview videos, and localizing your product page.
The ASO book offers easy to understand step-by-step guides and more than 140 helpful figures and example graphics.
