How to create an app icon: Insights and best practices
Adjust, Content Team, Adjust, Oct 17, 2022.
Your app’s icon is often the first chance you have to make an impression on potential users, so it’s business-critical 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 catch users’ eyes in the app store to drive organic installs, but your app icon will more likely be placed on the user’s home screen. In this guide, we share how to design a modern app icon and how to A/B test your design for optimal results.
What is an app icon?
An application icon—or an app logo—is a unique image used to represent an app on a user’s device. It also appears in a smartphone’s settings and search bar in addition to users’ introductory glance within the App Store and Google Play Store.
Why app icons are important
An app icon is typically the first thing someone sees when they encounter your app. It provides the first impression of your brand and serves to build brand awareness. When done well, an elevated app icon can increase conversion. However, as you’ll learn in the next two sections, your app icon serves multiple purposes, each of which must be taken into consideration.
App icons in the app store
A user can come across your app in the app stores by several methods. Your icon can be shown in search results, on featured pages, and in charts, category pages, personalized recommendations, and other discovery channels.
When appearing in the app store, the icon must be sized appropriately, 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.
Check out the following links to see platform-specific guidelines for app icons:
Your application’s icon design must represent your 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 may use the image of a popular character for immediate recognition.
While having a quality app icon can promote brand recognition and drive installs, a poorly designed icon can discourage users from installing it, particularly if it confuses or misleads them.
App icons on a user’s device
Post-install, your app icon serves a different yet equally important purpose. It’s the image that appears on home screen pages, in settings, and when searching for a new app. It can also appear on shortcut tabs featuring a user’s favorite apps. When designing your app’s icon or rebranding, consider how the app icon will appear on a smartphone screen. 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
Below we’ll dive into recent app icon rebrands—the good, the bad, and the ugly. While not all app icon rebrands are successful, all are opportunities to learn.
Google Play Store: Aligning with overall branding
To celebrate Google Play Store’s tenth anniversary, Google unveiled a new brand logo for the Android app store. The difference between the former icon and the new one is quite subtle. You’ll note the corners of the new icon are more rounded and the colors are no longer gradients but uniform colors.
The aim of this rebranding was to align with Google’s recent design changes, such as with Chrome’s logo, which opts for a flatter and simpler appearance. Although the slight changes to the app icon are far from provocative, they were important for Google to possess unified branding across its products.
Instagram: Evolving to meet needs
2010-2016: Representing the purpose
In reviewing Instagram’s icon evolution over the last 12 years, we observe excellent reasoning and iteration at play. Before the social media app launched in 2010, the icon was essentially a stylized rendering of a real Polaroid OneStep instant camera because the platform was created for users to share pictures they’d taken. Due to trademarking, the design couldn’t be applied to Instagram’s app icon. The company quickly pivoted to create its own unique camera icon. However, you’ll note the version from 2011-2016 enjoys an overhead lighting effect and a reflection in the camera lens, almost as though inviting users to take selfies for the ‘Gram.
2016: Reflecting the community
The world almost stopped when Instagram introduced a completely new logo in 2016. The New York Times dubbed it The Great Instagram Logo Freakout of 2016. However, as we can see, six years later, Instagram is still alive and well and was, arguably, ahead of its time with this rebrand. The rendered camera was brighter and flatter, aiming to better reflect Instagram’s communities. Instagram’s Head of Design at the time, Ian Spater, said they had employees draw the Instagram icon from memory in a period of five seconds and noticed most of them drew the rainbow, lens, and viewfinder. They kept these elements but utilized the colors purple, pink, and yellow to represent the diverse and colorful platform it had become.
2022: Imbuing a feeling
The 2022 rendition of Instagram’s app icon saw an updated gradient, brightened it, and added more fluidity to the colors. In the blog post announcing the change, Instagram writes, “The gradient is reimagined with vibrant colors to make it feel illuminated and alive, and to signal moments of discovery.” Users did not initially appreciate the new look, many claiming the app icon was too bright and that they’d need to dim their screens. However, the fuss soon blew over, and from a marketing perspective, making your app brighter than other apps on a user’s home screen is a strategic move. Now, users are more likely to notice the Instagram app compared to other apps.
Yubo: Standing out from the competition
Founded in 2015, Yubo is a live-stream video app that boasts 40 million users worldwide. The app’s target audience is a young demographic, between the ages of 12 and 25. In 2021, Yubo revealed its new icon for a friendlier, cleaner appearance. You’ll note the app’s primary shade of yellow has been warmed to be more aligned with Yobu’s inclusive values and also serves to differentiate them from the acidic yellow of one of their major competitors, Snapchat.
Remind: Showcasing expanded platform
School communication app, Remind, had a “brain cloud” as its icon for almost a decade. Remind began as a texting service for students, teachers, and caregivers and has since expanded to offer translation services, voice and video calls, and support services with tutors throughout different communities.
In its rebrand, the company opted for the letter “R” as its new logo, with the font offering a nod to writing in school. The brand team desired to showcase Remind’s evolved identity as a communication platform for learning. The new icon also sets it apart from many other apps that have thought or messaging bubbles.
How to A/B test app icons for best results
As with all design elements critical to the user journey, marketers should test their app icons and optimize them for success. Testing will reveal 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—group A and group B—and expose one of them to a new variant to see how the variant affects the audience’s action.
In this case, you will test 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, as we’ve listed below.
1. Develop your hypothesis
The first question you must answer is what would you like your app icon to achieve? Determining the answer will inform which KPIs you will monitor during the testing, such as click-through rate (CTR), installs, conversion rate, and churn. Your hypothesis should offer a clear plan on how you expect a variant to impact your KPIs. For example, you might build a hypothesis that changing the color of your app icon will attract more installs, or perhaps adding an action symbol specific to your mobile gaming app will attract more high-valuee users.
2. Create variants with your design team
Once you have a strong hypothesis to improve a selected KPI, you should assign your designer or design team the task of creating each variant. You should only have one difference between app icons to avoid having too many variables in your test.
3. Create your audience groups
Next, you will 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. For instance, testing users in Japan and users in Brazil or users over 40 and users under 20 will likely lead to different results The closer these groups resemble each other, the more confidence you can have in the results of your A/B test.
4. 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). It’s important that you have a set time period in which to run your A/B test. The time frame should be long enough to get enough data to test your hypothesis, but it should also have a defined date for stopping the testing.
5. Analysis
After a set period, you can analyze the results of your A/B test and compare how the changed variant affected your KPIs and how this aligns with your company goals.
For best results, you should iterate. 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. For more on A/B testing, check out our guide covering Everything you need to know about A/B testing for mobile apps.