How to Design a Great App Icon to Stand Out
First impressions count, and your app’s icon will be the first thing a user sees when searching an app store. Does your icon pop out against a grid of other icons competing for attention? Does your icon excite the user enough to tap? Better yet, does your icon tell a story about your app?
If no one’s tapping, maybe it’s time to give your icon a facelift. Optimizing an app’s icon can transform an entire business, in some cases doubling the number of organic downloads or increasing installs by 40%.
Let’s look at how to make a truly iconic design for your app icon.
Your icon needs to tell your entire brand’s story
Above all, your icon should represent your entire business and its mission statement. If your app is a prescription refill service, your icon needs to make the user “feel” health and vitality. If your app is a mobile game, your icon needs to make the user “feel” your game’s personality and objective. Be sure to keep your app icon aligned with your other brand properties; use consistent styles and color schema throughout your apps, sites, and platforms!
Early on, we decided that Chartboost’s icon should exemplify our mission statement — simply, to boost charts — which is why the Chartboost icon is a chart-like swoosh that denotes growth and momentum. (Pro tip: Icons with shapes going up and to the right seem to test really well.)
Bottom line: Can your brand’s identity and mission statement be boiled down to a simple, identifiable, and easily recreatable icon? Can your business or game be distilled into one neat hieroglyph that stands out on a user’s device?
Your icon needs to describe your app’s function in a unique way
Obviously, it makes no sense for a gardening app to use a music icon. A visual designer for such an app would probably develop something floral or biological as an icon. But surely other gardening apps out there are using flowers and leaves as their icons, so how can yours stand out? In a previous blog, we wrote about how strategy game icons employed the same design elements to evoke a psychological response from users, resulting in many copycat icons.
Apple UX Evangelist Mike Stern advises to start with a unique shape that differentiates your icon from the usual pool, and only worry about colors after you’ve locked down a solid foundation. Stern also warns not to go overboard with colors; stick to a simplified, brand-consistent palette that cater to your target demographics. (Pro tip: Social media icons are usually blue and food-related icons are usually red.)
Here are some examples of great icons:
Your icon should be scalable
Your app icon can appear anywhere, in any size, against any background. Will your users immediately recognize it in any environment? Does icon maintain its legibility and uniqueness wherever it’s located? A classic design primer recommends drawing your icon on an index card and then viewing it from across the room. If your icon looks like an indistinguishable blob, you need to keep tweaking your design.
Image courtesy of Smashing Magazine
Another great way to test your icon, besides shrinking it, is making it monochrome. If your icon can still accomplish its mission without the advantages of size or color, you’ve designed it well.
Your icon should not have text
Don’t use text! Not only will the tiny print be a wrench in your scalability machine, but you’ll have to consider non-native speakers and localization. If someone can’t read the text you’ve added to your icon, then you’re wasting vital space that can be used to introduce captivating visual elements. An app icon may be small, but, used effectively, it can be the catalyst for massive conversion.