How to create an app icon: Essential insights and best practices
Your app’s icon is often the first chance you have to make an impression on potential users, so it is essential to get it right. Every app needs an icon that users find easy to remember and aesthetically pleasing. Not only will this help your brand get noticed in the app store and drive organic installs, but your app icon will be placed on the user’s home screen and must be instantly recognizable. In this guide, we share how to design an app icon, how to A/B test your design, and share best practices for optimal results.
What is an app icon?
An app icon is a unique image used to represent an app on a user’s device. It also appears in Settings and Search and will first be seen by users on the App Store and Google Play store. Because users will see your app icon in various places, your icon’s design must serve multiple purposes. No matter what, your app icon is critical to the user journey. Several online resources will help you create your app icons, such as Apple’s human interface guidelines and Android’s guide to creating an icon with image asset studio.
App icons in the app store
There are several ways users will see your app icon in app stores. It will be shown in search results and on featured pages and in charts, category pages, personalized recommendations, and other discovery channels. When appearing in the app store, the icon must catch the user’s attention and be as memorable as possible. Its purpose within the app store is to encourage the user to install your app. For the App Store, the median potential conversion rate (CVR) resulting from icon optimization is 18%.
Your app icon’s design needs to represent brand values. For example, a fintech app may prioritize a design that indicates a safe and secure experience, while mobile games are more likely to prioritize the entertainment on offer. Some mobile games will use the image of a popular character for immediate recognition.
While having a quality app icon can drive installs and be great for brand recognition, a poorly designed icon can discourage users from installing. Issues with the design can also lead to confused or misled users and negative brand awareness.
App icons on a user’s device
Once installed, your app icon serves a different yet equally important purpose. It is the image that appears on the home screen, in settings and when searching for a new app. It can also appear on shortcut tabs featuring a user’s favorite apps. This means that you must consider how the app icon will appear within the user’s device. For example, a simplified logo representing your app’s function will make it easier for users to remember why they have your app installed.
Examples of app icon rebrands
In 2020, Google rebranded the app icons for its business productivity suite – now known as Google Workspace. This rebrand included new app icons for Gmail, Drive, Docs, Calendar, and Meet. A statement by Google explained, "Our new Google Workspace brand reflects this more connected, helpful, and flexible experience, and our icons will reflect the same."
YouTube requires that youin order to watch this video.
Instagram updated its app icon in 2016 with a simplified and more colorful image. A blog post by Instagram's Head of Design, Ian Spalter, shared insights into the redesign. Ian wrote, "a group of us started digging into how we could support this evolution while staying true to Instagram’s heritage and spirit. We wanted to create a look that would represent the community’s full range of expression — past, present, and future." He outlines the entire process, adding, “If the lens is a bridge into the bolder, simpler glyph, the rainbow is a bridge into the colorful gradient. Color has always been a huge part of Instagram — you see it in the classic app icon, filters, and the community’s photos and videos.” At the time, the designs for Instagram’s other apps – Layout, Boomerang and Hyperlapse – were also updated with images in continuity with the rebrand.
This year, Amazon updated its app icon, removing the long-standing shopping trolley and updating it with the iconic “Amazon smile.” However, many users thought the new design had unfortunate connotations, leading to a minor update to the rebranded app icon. The brand also received credit for listening to customer feedback when developing its new app icon: Studio LWD founder, Laura Weldon, said, "Brands change and tweak their logos all the time. It reflects well on Amazon that they listened to their customers. It's clear they care about what their customers say and put the customer at the heart of what they do.”
Tripadvisor updated its company logo and app icon last year as a result of a year-long rebranding effort. Mother Design, the firm responsible for the update, described the change as “an exercise both in reduction of complexity and amplification of character” due to the redesigned mascot, Ollie the Owl. The company’s rebranding also included a subtle name change from TripAdvisor to Tripadvisor.
How to A/B test app icons for best results
As with any design element critical to the user journey, marketers should test their app icons and optimize for success. This includes testing how your app serves users in the app store and post-install. A/B testing is one of the most effective ways to get data-driven insights and ensure your app icon delivers the desired results.
How to perform an A/B test
A/B testing is an ongoing method of testing the user experience. It requires you to create similar audience groups and expose them to variants of whatever you want to test (in this case, two variants of your app icon). You can use these tests to identify how changes affect your Key Performance Indicators (KPIs). There are five stages of A/B testing, which in some cases can be used as a continuous cycle to optimize fully.
- Develop your hypothesis
The first question you must answer is what you want your app icon to achieve. Determining the answer will inform your KPIs, such as Click-Through Rate (CTR), conversion rate and churn. Your hypothesis should be developed based on this, with a clear plan on how you expect a variant to impact your KPIs.
- Create variants with your design team
Once you have a strong hypothesis about improving key metrics, you should assign your designer or design team to create each variant. You should only have one difference between app icons to avoid having too many variables in your test.
- Create your audience groups
You will now need to create two audience groups that show the same behavior. This is essential to proving your hypothesis, eliminating behavioral variables that could lead you to make a false conclusion. The closer these groups resemble each other, the more confidence you can have in your findings further down the line.
- Run your A/B test campaigns
With your hypothesis, design variants and audience groups ready, you can begin running your test. Depending on your theory, they can either focus on paid campaigns or changes for (App Store Optimization (ASO).
After a set period, you can be analyzing the result of your A/B test. Compare how each variant affected your KPIs and how this aligns with your company goals.
For best results, you should repeat this process. For example, you may have identified the best color palette for your app icon, but you can still test other elements, such as different fonts.
What makes a good app icon? Five best practices
In addition to A/B testing, marketers and designers can follow a few best practices to land on their brand’s best possible app icon.
- Analyze how your app icon will appear in every placement
Even if your app icon delivers the desired results in the app store, you still need to analyze how your app will appear on a user’s device – and vice versa. You should also be aware of changes in users’ settings on their devices and on the web, such as how dark mode will affect your design.
- Minimalist designs can be the most effective
From car manufacturers like BMW to entertainment companies such as Netflix, many industry-leading brands simplify their logo designs so that they are more adaptable for different purposes. There is also a noticeable trend whereby brands are avoiding 3D designs. The new and old Instagram app icon is a prime example. When choosing a minimalist design for your app icon, it can be wise to use instantly recognizable objects within your design. For example, Facebook Messenger and WhatsApp both use a speech bubble in their design. This is especially important if you are not already a recognizable brand.
Even if you decide against a minimalist design, you should still be aware of how a more detailed image will appear as an app icon. It may be too difficult to see many details given the size of the image on mobile apps. This point is particularly relevant if you have a mobile game and want to feature a character. Ensure that they are recognizable from a small, pixelated image.
- Ensure your app icon has a singular focus
Your design should have a singular point of focus that is eye-catching and recognizable to users. Netflix does this well, with its iconic red “N” as its app icon. The singular letter is recognizable but easier to identify than the full name of the brand. It is best to avoid overcomplicating your app icon with unnecessary words. Keep wording to a minimum, even if you do decide to include your brand name.
- Avoid detailed and patterned backgrounds
The best way to ensure your app will not clash with a user’s home screen and wallpaper is to avoid detailed and patterned backgrounds. You will notice that the vast majority of popular mobile apps have a block-colored background during market research. Not only is this eye-catching, but it is also more likely to be universally well-received by users and avoids becoming hard to identify when searching through the home screen.
- Don’t use your app icon within your mobile app’s interface
Users may find it confusing to see your app icon used within your mobile app. It should be recognizable as an icon that can be tapped to access your app, so using this for other purposes may overcomplicate the user experience. However, your app icon should inform design elements used throughout your app. For example, you can use your app icon’s color palette throughout your app to strengthen brand association with this theme.
If you found this article useful, you may also be interested in our guide to ASO and tips for improving ASO during the COVID-19 pandemic. We also have resources for developing a paid user acquisition strategy