Learn how you can Unlock Limitless Customer Lifetime Value with CleverTap’s All-in-One Customer Engagement Platform.
It’s like searching for a set of keys: that moment when a user can’t find the app icon they’re looking for.
Scrolling through every page of the home screen multiple times until, finally, they give up and close the phone even though the app was in plain sight…
That’s a mobile marketing nightmare if ever there was one.
App icons may seem like a small part of your mobile app (180×180 pixels to be precise), but they are a huge component of your app store optimization, user engagement, and retention strategies. How can your brand stand out from dozens of apps on the crowded screen of an average device?
In this article, we cover some design best practices for app icons. Keep reading to learn more or view our full infographic summarizing the tips below.
So you’ve got the company logo designed and you’re about to scale it down into your mobile app icon, right?
Not so fast.
Your app icon is not a logo. It should stand out as being simple, sweet, and well, iconic. Think about the Google logo you probably just saw before landing on this page.
Depending on whether you’re using a mobile or desktop browser, you saw completely different designs. And although the user experience should be consistent across platforms, they are different products, requiring different icons.
The Google search app icon is completely different than the logo. Then consider the app icons of Google’s suite including Maps, Chrome, Gmail, Drive—the list goes on and on.
Not many companies get away with repurposing their logotype as their app icon. Some who have successfully done so include Yelp!, Lyft, and Uber.
But, even if you don’t have the brand recognition of a Google or an Uber, you can still win the attention of users by using the following best practices.
When it comes to designing app icons that users can’t help but click, it’s about understanding the user experience. What will immediately stand out to the user as they scroll through their screens deciding which app to open?
These best practices are compiled using the most recognizable app icons from companies such as Apple, Google, Instagram, Snap, Spotify, and more.
Albert Einstein once said: “Everything should be made as simple as possible, but not simpler.”
Minimalism in design can be very beautiful, and in the case of app icons, quite necessary. The canvas for app icons is quite limited in size, but presents a welcome challenge to keep things simple.
Keep the background simple by avoiding images or detailed illustrations. Apple takes simplicity very seriously when designing app icons that come preinstalled on every iPhone. The phone, iMessage, and Health apps are great examples of their minimalism.
The discussion of simplicity is the perfect segue into our next app icon best practice: scalability.
Although the standard app icon is 180×180 pixels, you must consider how the icon can scale to various sizes, both larger and smaller.
Mobile app landing pages, for example, will require a favicon—that small icon in the browser tab (for reference, ours is the CleverTap “C” on a blue background). The favicon is a 16×16 pixel image so you can understand why it’s important to consider scalability.
In the other direction, your app icon could be featured in digital or print press releases and news coverage, which will require an app icon much larger than 180×180 pixels. See that it maintains the same aesthetic appeal even at larger sizes.
Uniqueness can be a difficult aspiration depending on what vertical you’re in. It’s interesting to see how companies in the same or related industries follow a similar design style, as if there were strict guidelines on how different design assets can be.
If you have a productivity app, for example, don’t just use a checkmark like all the hundreds of other to-do apps have done.
Follow Apple founder Steve Jobs’ credo and be different when creating your app icons to make sure you stand out from the rest of the App Store crowd.
When considering app icons and the user experience, think deeply about wallpaper. There are an infinite number of wallpaper images that users set as their background images.
If your icon is solid black with small gray text, and the user has a dark or solid black background, your icon will be invisible. This is why you should use at least two colors with stark contrast.
Headspace does a good job of following this last point.1 Their background, or border if you will, is white and their simple orange circle in the center does a great job of providing contrast. The simplicity of the Headspace app icon also subtly conveys the goal of the app’s user experience.
When considering what colors to use for your app icon, it’s best to choose bold colors that will stand out. We already discussed using colors that contrast, but also consider how rich, bright, and vibrant your colors are.
Most app icons on the App Store and Google Play use primary colors. To stand out, take these primary colors and add to their intensity. You can also experiment with gradients.
Instagram’s latest app icon design supports this thesis. Their bright hues and yellow to purple gradient are bold and unique.
Famous paintings do a good job of guiding your eye through the narrative. Typically, this is achieved by honoring the rule of thirds, which argues that the main elements in a design should take up one-third of the image.
Only slightly different in theory from a Monet or Picasso, app icons should have a focal point in the center that draws the eye to focus on your app icon.
Slack’s new app icon does a great job of this. The four separate right angles, if you will, all converge in the center, which guides the eye inward like an arrow piercing a bullseye.
When building brand recognition and creating a sense of familiarity with your users, you should aim to keep your branding consistent and recognizable across platforms.
One thing that derails brand recognition is app icon redesigns. Although, if your app has a high engagement and retention rate, then your users should quickly become comfortable with your new logo and app icon.
Uber, for example, has undergone a number of logo and app icon changes over the last few years, while Lyft has remained consistent.
Unless essential to your branding, do not include any text.
There are many companies who have a very distinct logotype and a separate app icon design. Netflix is a great example. For a long time, they used their logotype in their app icon. Recently, however, the company released a new single letter logomark as their app icon.
A large, single letter to represent the company name seems to be the exception to this rule. Google, for example, uses a big “G” for its Google search mobile app icon.
One strategy is to include context around what the app does within the elements making up the letter. The Gmail app icon has a large highlighted section on the back of an envelope that forms a big “M,” which works well to convey what the app does.
You might like to read: What are App Icon Badges? How are They Used?
As you can see, mobile app icons are more important to the overall user experience of your mobile app than you may have initially thought.
Like an ancient Egyptian scrolling through a tablet of hieroglyphics, your users must be able to quickly decipher what your app does and why they should use it. If you want to stand out from the competition and understand what appeals to your audience, consider A/B testing different visuals. In fact, the average app undergoes 7.5 creative updates per year to leverage these tests.
If you want to learn more about mobile marketing best practices, including mobile app design, follow our guides, whitepapers, webinars, and more on our resources page.
Industry Benchmark Reports
