After you have created your own mobile app, there is one important thing you have to do before you can publish it on an app store: you need to provide a high resolution app icon for the store to display your product. What may seem like a short and simple task, is actually an important process that requires time and effort.

That is because first impressions matter –  and your app icon will be the very first thing users see of your product when browsing through the app store. App icons play a huge role in generating lead and, ultimately, increasing your organic installs – depending on how informative and eye-catching your icon is, more people might stop scrolling and click on it. For other helpful tips on how to make your app more visible to your target group, see our article on app store optimization.

What makes an app icon perfect?

Now, before you create the perfect icon for your product, there are some important factors to keep in mind. In the following, we have compiled the most crucial aspects of app icon design. Follow these points and you will be well prepared to create an app icon that combines crucial design principles with relevant marketing strategies, while also adhering to the conditions placed by Google and Apple.

Want to learn more about icon design? Then feel free to check out our article on the principles of icon design, where we share the most important fundamentals to keep in mind.

Aim for uniqueness

In order to achieve uniqueness, you need to first analyze other developers in your branch. What services do they offer? How do they represent their product through their app icon? Utilize these findings when designing your own icon.

If you are searching the app store for an app that offers to-do lists, you will inevitably find dozens of apps that incorporate a check mark in their icons. With so many apps maintaining such a similar icon design, it is difficult to stand out. Therefore, it would be wise to think of a different approach to present your to-do-list app, or to add a twist to the conventional design pattern.

Further, you would also want to choose vibrant colors for your icon. That way, your app will for one thing, stand out against other apps the user has installed. And for another, it will be more visible on your users’ backgrounds, as well.

Make your icon recognizable

On top of making your app icon unique, you should also aim for recognizability. Through the icon, the user should immediately be able to tell what services your app offers. For example, most e-mail applications incorporate an envelope in their icon, indicating that you can send digital letters to other people via this app. Go for a design that is engaging and stunning, while also properly representing the services your app offers.

The user should also be able to connect your app icon to your brand, be it by using your brand’s logo, or by adding its corporate colors. For example, during its last bigger visual update, Google changed the icons of its work apps so that they all share the same minimalistic design and color palette, making them more recognizable for users.

Simplicity is key

While you want your app icon to be unique and to stand out against others, you should always keep in mind that less is sometimes more – especially in app icon design. Using too many shapes and colors will clutter your icon and confuse users, making it harder for them to understand what your app is about. On top of that, refrain from putting photos or words in your icon – icons are to small for the users to make out the complex details of a photo, or to properly read words on their surface.

Instead, focus on one distinct symbol to represent your app, place it on a simple background, and limit yourself to only a few colors – depending on the type of app, two colors often are enough. These colors could very well be the colors of your brand or company.

And to bypass the word-problem from earlier, try using only one letter for your icon, such as the first letter of your brand or product. That way, you can put this one letter in the center and give it a recognizable design – take for example the simplistic Goodreads app icon, which encompasses a small „g“ on a paper-like background.

The proper sizing

When you design your app icon, make sure that it looks good and sharp in different sizes. Google as well as Apple require you to submit your icon in different sizes as to properly portray it in different contexts – in the app store, the built-in Settings app, in notifications.

Additionally, for Apple you need to provide different sizes for its different devices. As an example, for the iPhone, your icon size needs to be 60×60 pt, while the iPad Pro requires a size of 83.5×83.5 pt.

On the topic of requirements, you should also keep your icon shape square at all times, as both, Google and Apple, will automatically apply a mask that rounds icon corners in order to achieve consistency throughout the app store.

Keyline shapes as a guideline

While only functioning as guidelines, implementing app icon keylines into your grid can help you maintain consistent visual proportions when designing your app icon. By choosing one core shape (e.g. square, circle, horizontal or vertical rectangle), you have a baseline, which you can orientate yourself by when creating your icon’s symbol.

The Google app icon, for example, has a rounded „G“ in the center, orienting itself on the circle. The Youtube icon, on the other hand, is shaped like a horizontal rectangle. Note, how both of their logos don’t fill out the entire surface area, but instead are placed at the center of the icon space. That is because filling out the entire space would clutter the icon space, making your icon confusing. Therefore, implementing your app’s logo according to keylines, as well as designing a simple background will ensure that your icon retains simplicity and consistent visual proportions.

Exempt from this are icons containing illustrated artworks that involve e.g. a character in front of a landscape, which is often the case with game app icons. Here, it is better to utilize the whole space so that your artwork occupies the entire icon.

Shadows and highlights

The addition of shadows and highlights serves to give your icon more depth and definition. But here, too, it is important to adhere the specific conditions made by the Google Play Store and the App Store by Apple.

For instance, Google Play will automatically add a drop shadow to your icon once you submit it, so don’t add it manually. Further, before you add interior shadows, consider following the guidelines from Material in order to uphold the Play Store’s visual consistency.

A/B test your app icons

Lastly, it will do good to design and test different variations of your app icon. A good way to do this is by collection user reactions via measuring tools like UsabilityHub’s five second tests. If you have already published your app, but want to try out different icon variations, you can make use of the Google Play Console, which allows you to run A/B tests with up to three variants, view the test results, and apply changes.

With the release of the new IOS 15 update, you are now also able to do native A/B testings in the Apple App Store through Product Page Optimization. Same as the Google Play Console, you can select a maximum of three variants.

Conclusion

With these crucial aspects in mind, you are equipped with the knowledge to create a fantastic app icon. Though, if you still have questions regarding, for example, the proper sizing, or if you feel that your icon does not accurately represent your app’s services and may need some tweaks, do not hesitate to contact us. We are happy to support you in designing the perfect icon for your product.