How to create a converting mobile app icon: professional tips

The first thing that creates an impression of a mobile application is the app icon in the store. When the user browses the App Store or Google Play Market, he sees dozens of colorful icons but will only tap on the one that grabs attention and seems relevant to his interests.

The mobile application icon is crucial for increasing the application’s recognition and visibility. It also has a big impact on conversions, i.e. the number of app downloads and interactions of a user and an app. If the icon is poorly designed, it will communicate the wrong idea and will harm the user’s perception of an application. Therefore, the creation of an app icon demands much attention and effort and knowledge of certain design trends and best practices.

An icon vs a logo: know the difference

Before getting down to the icon design, there is one important thing that requires clarification: the difference between the icon and the logo.

Many people tend to confuse these two or think that they mean the same thing. However, this is not true. An icon is a piece of branding and logo is a visual representation of a brand. The app icon and the logo serve different goals and thus have different requirements for their design.

Let’s have a look at the example. If there is a company that creates games, it will have a company logo. The logo will be used on all the company’s products, including the marketing materials. But if the company decides to create a mobile game, this game will have its own icon in the market and this icon will represent the game’s idea without necessarily featuring the logo. Even though some companies use their logo as an icon for the mobile application (LinkedIn or Twitter), usually this is not the case.

Here are the basic requirements for a good and user-friendly app icon:

• Scalability: the icon should look equally good on all the necessary devices and screen sizes. As well, watch for the image quality so the icon and its details do not seem blurry.
• Recognizable: the user should instantly understand the image and the main idea of an icon. A pitfall to avoid here: do not go for a primitive design in an attempt to make the icon more recognizable. Instead, add all the necessary details and design the icon with your brand in mind. 
• Uniqueness: with thousands of different applications in the App Store and Google Play Market, you would want to create something that stands out and translates the message of your brand. 
• Consistency: the icon should correspond to the brand in terms of design and style as it is part of the brand identity.

Now that the difference is clear, we can move on to the actual design practices and icon ideas.

Follow the official guidelines

Google and Apple care about the quality of their products a lot. To ensure the equally well performance and look of their applications, both companies have official guidelines for the application design. 

Note: it is especially important to consider them if you are building a cross-platform application as the icons will look different on the two platforms.

Apple requirements

For the full information on the requirements for iOS app icons, check out the official guidelines here. 

Apple provides a comprehensive and detailed guide on the creation of mobile application icons. Here are the main takeaways:

• Avoid background transparency
• Do not use photos or screenshots
• Keep the corners square as the system will automatically round them
• Make sure to create the icon in the needed format (PNG) and size

Google requirements

Same as Apple, Google cares about the quality and visual appeal of its products. You can read the official guidelines here. As for the key things to remember, they are the same as with iOS requirements and include the usage of a square shape, PNG format, use of relevant colors and attention to details in the icon design.

Watch for the icon’s performance

You never know what kind of device the user has but you want to make sure the icon looks equally good on all screens and on any device. Thus, you need to build a responsive icon so that it performs well on a variety of devices with different screen sizes.

As well, consider all the places where the icon may appear and how it will look. The icon should be recognizable and visually appealing both in large and small sizes. One more important thing to consider is how well the icon looks on different backgrounds: for example, on the dark and light ones. It may happen that an icon looks great on the white background but becomes completely unrecognizable on the dark one. 

Make good use of light, shadow, and perspective

You want your icon to stand out from the competition and get noticed. For that, do not hesitate to play with the light, shadow, and perspective.

Sometimes 3D dimension looks more appealing than 2D – and vice versa. Make a few versions of an icon and see which one causes a better response. As well, try using borders: for some icons, they work just great and make the image look better and more comprehensive.

Use colors wisely

The choice of colors in the app’s icon is one of the core aspects of its development.

First, it is recommended to use the colors that correspond to the brand’s logo and identity. In this way, you enhance the connection of the app with the brand and make the application more recognizable.

Second, do not ignore color psychology. Color has an enormous impact on the way people perceive the product so your application icon will create a certain impression the moment a user looks at it, without even interacting with the app.

To make sure you use the right colors, outline the main app’s idea and mission beforehand and see which color best represents them.

Always do A/B testing

Despite all the official guidelines, recommendations, and best practices, you can never be 100% sure the user will like the end product. To adjust the app icon to the users’ interests and needs, conduct A/B testing to identify the most converting option.

A/B testing presents two options of one product to the users and they choose the one they like the most. Though seemingly simple, this kind of testing works wonders as it often provides unexpected results and helps identify the tendencies in the users’ behavior and preferences. Thus, when creating an icon for your application, make several mockups and do testing to see which one causes the most response from your target audience.

Conclusion

When designing a mobile application icon, it is important to always keep your target audience in mind. So before starting any work on the design, first, identify the target audience and analyze the competition to see what attracts people and what kind of images get ignored.

Only after you have a detailed portrait of your potential user and a clear understanding of his needs and interests, you can begin working on the application icon. Otherwise, you might get a mismatch between your own preferences and the actual users’ likings.