Complete Guide to Mobile Icons: Technical Requirements, Best Practices and Tips

SplitMetrics guide to mobile icons

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.



app store screenshots splitmetrics

Download Your FREE Guide to Mobile Icons


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. 

App Store Requirements for Mobile Icons

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.

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.

Attribute Value
Format PNG
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.

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.

mobile icons testing with SplitMetrics

Music app icons contain musical notes, sound waves or equalizers. The cooking utilities, aprons, or chef’s hats appear on recipe apps icons respectively.

SplitMetrics icons guide

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.

SplitMetrics icons expriment

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.

SplitMetrics search tests

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.

target audience of icon

Colors

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.

using blue in mobile icons

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.
green app icons

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.

finess apps icons

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:

  1. 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.

  1. 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.

  1. 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.

experimenting with icon color

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.

using letters in app icons
  1. 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.

app store icons
  1. Add borders

Test borders for your app icon, it can make your icon outlined against any background and increase its visibility and appeal.

experimenting with icons
  1. 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 os 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 app icons in your category and think how to make yours stand out. Create a couple of alternatives based on your analysis and start testing.

researching icons of competitors

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.

testing icons withSplitMetrics

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.

icons a/b test

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.

testing icon background with SplitMetrics

Mobile Icons Optimization Checklist

Designing mobile icons 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.



app store screenshots splitmetrics

Download Your FREE Guide to App Store Screenshots


Sources:

  1. How to Design a Great App Icon for App Store Optimization? Apptamin
  2. Eye-Catching App Icon Design: How To Smashing Magazine
  3. ASO Case Study: How to Pick the Best App Icon Incipia
  4. How to Do ASO for Android Apps on Google Play Store – Ultimate Guide for 2018: Icon The Tool
  5. Human Interface Guidelines: App Icon Apple
  6. Graphic assets, screenshots, & video GooglePlay