Imagine that you are opening App Store seeking out new apps you may like – some keywords in a search bar, quick scanning – and the choice is made – you are on the selected app page deciding whether to download it or not. What caught your eye and determined your choice?
Considering the fact that human brain processes visual information much faster than text, the way mobile icons look must be a governing factor for ASO. In this article, we will give you a brief overview of what requirements a “good” mobile icon must meet. We’ll also share best practices, discuss variations of styles and offer a couple of handy icon optimization tips to start with.
Mobile icons give us the first impression and therefore they are the gateway to the app. Being one of the most impactful app store product page elements, icons help you grow an app organically.
On average, mobile icons have 10-25% potential for conversion increase, and in some cases, your “tap through rate” may skyrocket.
That is why an optimized app icon is of crucial importance for app store optimization.
Requirements for App Store Icon Sizes
No matter how well-thought-out your icon is, it has to meet the technical requirements posed by Apple or Google. Both companies provide detailed descriptions of what they expect from a right mobile icon from size to the overall user experience. Below you will find app store icon size requirements.
App Icon Sizes
Each app is supposed to have a set of small icons for the Home screen and a larger icon for the App Store itself.
Here’s the App Store icons size table for different Apple devices:
|Device or Context||Icon Size|
|iPhone||180px × 180px (60pt × 60pt @3x)|
120px × 120px (60pt × 60pt @2x)
|iPad Pro||167px × 167px (83.5pt × 83.5pt @2x)|
|iPad, iPad mini||152px × 152px (76pt × 76pt @2x)|
|App Store||1024px × 1024px (1024pt × 1024pt @1x)|
App Icon Attributes
All app icons should adhere to the following specifications.
|Color space||sRGB or P3 (see Color Management)|
|Layers||Flattened with no transparency|
|Resolution||Varies (see Image Size and Resolution|
|Shape||Square with no rounded corners|
To publish your Store Listing in Google Play store, a high-resolution icon is required. The high-res icon does not replace your app’s launcher icon but should be a higher-fidelity, higher-resolution version that follows these design guidelines:
Google Play Requirements
- 32-bit PNG (with alpha)
- Dimensions: 512px by 512px
- Maximum file size: 1024KB
The App Store and Google Play have different requirements and recommendations for a mobile icon design. Regardless of the OS for which you are creating the application, a good icon does not just grab the attention of app store visitors instantly, it also communicates your app’s quality and purpose.
Getting Started with Mobile Icons Optimization
How do we make sure we use an app icon that drives results?
Core elements of converting mobile icons are simplicity, lack of excess visual components, ability to stand out among competitors without losing touch with the conventional principles of your store category.
Learn all the latest App Store Optimization trends for icons (colors, styles, best art ideas) in the App Store and Google Play Store in “ASO Benchmarks & Trends 2020. Mobile Games.”
How can you make sure that you observe all of the above principles? The right place to look for the answer is A/B testing. The most difficult part of it is generating variations.
For a start, you can simply review some of the top performing apps across your categories to find the styles you could try in the design of your mobile app icon. But before you start you should ask yourself:
- Does your icon tell the story and sell the unique features of your app?
It’s essential to ensure that the users understand the message behind your mobile icons. For example, if we look at selfie app icons, we’ll see that the vast majority feature camera, lens or a lens-like visual.
Music app icons contain musical notes, sound waves or equalizers. The cooking utilities, aprons, or chef’s hats appear on recipe apps icons respectively.
These associations may look banal but using the wrong ones can pose a real threat to conversions. For instance, Darby (an app with DIY videos) discovered that their icon misled their customers. A “play” sign in the icon made the audience believe Darby was a video editing app. A/B tests helped solve this problem and the icon was corrected.
Each app also has its strong points. Identifying and highlighting them is essential. So when developing an app store optimization strategy, you should make sure the app stands out.
If your brand is already visible in your target market, using it in the icon is a must. It will give the app credibility and increase the trust of users.
For example, if you search for “racing”, you will notice that the results contain some icons having a big publisher’s logo in the corner. You can find a few examples below.
- Do your mobile icons stand the competition in search?
Using your target and related keywords you can help you see your app’s position in search. Look at its main competitors. Do their icons look the same? What makes yours stand out?
Speaking about optimization, it’s important to keep in mind that mobile icons play crucial role first and foremost at the app discovery stage. As soon as app store visitors get to the product page, they stop paying so much attention to the icon.
That’s why the easiest way to improve an icon is to run a series of category tests on an App store and choose the version that performs best in the tough competitive environment.
Colors and Styles of Mobile Icons
Choosing your icon style and color is close to a full-scale branding decision. The thing is mobile icons actually represent your company in app stores and serious discrepancies between the app design and your corporate identity can discourage even loyal customers.
When you create an app, you definitely know who you are creating it for. Age, gender, location, language, and other characteristics of your prospects impact the app design.
The same rule applies to mobile icons, and the more precise your targeting is the more installs you can expect. It seems obvious that the icon style of a kids game will be drastically different from an icon of an accounting app in terms of colors and composition.
Many companies are recognized by colors. The same works for apps. That is why choosing the color for your mobile icon is so important. What colors work best? Unfortunately, there is no right answer. Though most colors have meanings or at least associations, and these may guide your decision.
Blue is a popular color with many big companies (Facebook, Twitter, Visa, etc.). It has literally become a representation of trust, honesty, loyalty, security, and tranquility. This color is often used on logos and icons of the products intended for international use as it hasn’t got any negative cultural interpretations.
Green is mainly associated with money and nature that is why it is preferred by the developers of 2 app categories:
- financial services;
- eco-friendly behavior promoters.
Purple is more of a female color (that’s why it is so popular with selfie app designers). Red is bold and energetic, orange is cheerful, yellow is warm, and green is peaceful, so you can pick red for a sports app, and green for some health tracker.
However, it’s important to be careful and account all possible associations and cultural interpretations that go with the chosen color (except blue, as you can guess).
Mobile Icon Optimization: Best Practices
Even a well-designed icon based on your branding rules can’t guarantee that you’ll win millions of apps in an app store. Only data-driven approach, testing and optimizing different elements of an icon (colors, backgrounds, graphics, compositions etc.), allow you to boost the downloads of your apps and make the most of your mobile icons.
Be sure that the selected test variations have significant differences.
Minor changes like a shade or a different angle of the graphics won’t fit for a split test, as they are not likely to show any serious difference in conversion.
Here are some basic optimization tips:
- Keep it simple
It’s no doubt you have loads of ideas of what to place on your icon. Try variations with the basic concepts keeping the number of graphical elements to a minimum. Or better, stick to one and check if a lighter design really converts better.
1024 × 1024-pixel canvas is a challenge in itself. So try the design out on the device in multiple contexts and sizes. Make sure your mobile icons look good against a variety of backgrounds.
- Try different colors
There are lots of nice color combinations in the world and your designer surely knows them well. The difficult question is, which of these nice combinations drive installs. Test and see if a mild pastel background can highlight the main icon element and boost conversions better than a bold contrast one.
- Let your graphics speak for you
There’s a strange tendency among app developers – quite many of them tend to place the app’s name or some other text on the mobile icon. Why? There’s a plenty of space in the app’s title and description areas.
Of course, many apps successfully use words or letters (sometimes branded, sometimes not) in their mobile icons. If you would like to join the ‘literal’ club, don’t forget to test if extra letters on the icon convert better than the graphic language.
If you choose to use just one meaningful letter associated with your brand it can become a good app icon. Though using it in the context as a logo is still not recommended.
- Logo/No logo?
Logo and mobile icons have some similarities but they are also different in many aspects. So, it’s very important to understand that an app icon is not a logo. Logos are vector images and icons are raster ones, logos don’t have to be square but they need to look good on letterheads, etc.
The approach, the tools, and the process of creating these images are absolutely different and so are their success criteria. If you still believe that your logo can become a mobile icon be sure to test it and guarantee it delivers the value apart from the brand message.
- Add borders
Test borders for your app icon, it can make your icon outlined against any background and increase its visibility and appeal.
- Rely on benchmarks
History repeats itself, so analyze your competitors and do something different. Emulating the leaders is a safe but a tricky route to go down. Your uniqueness is one of the keys to success. Start with the colors as they do make the difference but don’t neglect the research not to end up in a hole.
Pick out 10 best icons for mobile apps in your category and think how to make yours stand out. Create a couple of alternatives based on your analysis and start testing.
As mentioned above it’s a good idea to start with competitors research and determine the best practices. If you study the icons of the top games, you’ll notice that the overwhelming majority use the same pattern: an icon depicts characters with their mouths open. It may seem silly, but the trick works. You can use this layout to design one of your variations.
It is also highly advisable to test different characters for your mobile icon against each other. MyTona company launched a series of icon experiments for one of their games, Seekers Notes: Hidden Mystery. First, they made a human character compete against a pumpkin head. The pumpkin won with a 9.3% advantage.
In the next series of tests, the pumpkin beat a mysterious man in a top hat with just 3.5%. And the last icon variation featuring a joyful witch defeated the previous two with a 9.1% conversion increase. The results of the experiment have proved the advantages of both ‘open mouth’ concept strategy and the importance of A/B testing.
You’d be surprised to know that even changing small details of your mobile icons, let’s say, background color may bring about some serious growth. Hobnob app suffered from a strong decline in conversions after changing its mobile icon but they managed to remedy the situation based on a series of A/B experiments.
Split-tests helped to find the icon that demonstrated 64% better performance compared to the rebranded one. The fun fact is that the only difference between the winning the losing variations was the gradient background.
Mobile Icons Optimization Checklist
Designing icons for mobile apps that will pass the App Store and Google review and at the same time attract users’ attention is a complicated multi-level process that starts long before you launch your app. However, if you manage to succeed at all optimization stages you’ll get your precious installs on a silver platter.
Here are the main points you should always keep in mind:
- Try to meet your audience’s expectations in terms of style and brand consistency as the users’ visual perception often determines their choices;
- Follow App Store’s and Google’s recommendations or they won’t let you appear in search results;
- Make the graphics represent your app and let the design do the magic. Leave the text for the app’s description and the logos for your letterheads;
- Experiment with colors and add borders to place the accent on the main elements of your mobile icons;
- Learn from the best practices but be original to make your icon stand out.
Above all, test everything you can to make sure you are moving in the right direction. With these recommendations, you have every chance of increasing conversions massively.
[form hubspot-form-name="iconsGuide" title="Download Complete Guide to Mobile Icons" img="https://splitmetrics.com/wp-content/uploads/2018/08/12334.png"][/form]
- How to Design a Great App Icon for App Store Optimization? Apptamin
- Eye-Catching App Icon Design: How To Smashing Magazine
- ASO Case Study: How to Pick the Best App Icon Incipia
- How to Do ASO for Android Apps on Google Play Store – Ultimate Guide for 2018: Icon The Tool
- Human Interface Guidelines: App Icon Apple
- Graphic assets, screenshots, & video GooglePlay