App Icon Design: 5 Tips To Optimize For Better Visibility

What makes you choose one app over another when shopping around? Is it the app icon design? The colour? The logo? The reviews? Have you ever stopped to think about how many apps you actually have on your phone? If you’re like me, you probably have a few on there that you don’t even remember what they do, or when you downloaded them in the first place. 

Now stop and think about how many apps you don’t have downloaded. What makes the difference between a downloaded app and one that gets put back on the shelf, so to speak?

As a matter of fact, there are 2.2 million apps available through the Apple Store, and 2.8 on Google Play. While there is obviously a lot of crossover between the two platforms, that’s still a staggering amount of apps!

And if you’re creating your own to put out on the market, the logo you choose can make a huge difference in your success.

How to Create Eye-Catching App Icons

Creating an app logo isn’t exactly the same process as creating a business logo. While you can still use a lot of the same basic tools and materials as you would when creating a logo for your company, app icons have a different purpose, and the design should fit different criteria.

Much like with a company logo, however, your app icon requires thought about the point and purpose of the app, as well as the overall “personality” as expressed through the aesthetics.

There are also certain requirements for sizing, and recommendations for grids and layouts, depending on the platform you’re designing for.

However, there are certain aspects that can really enhance the optimization of your app icon. And an optimized logo is eye-catching and much more likely to lead the viewer to check out your app and, hopefully, click the download button.

So here are some top tips for optimizing your app logo, regardless of the platform.

1. Research the Competition

This is a basic tip for logos of any kind, but it’s incredibly important. Don’t rush into creating your app logo without regard for what app logos are already out there. 

The odds are fairly high that, without proper attention to existing logos, you might end up with a product that looks just a little too much like something else.

There’s a lot of potential dangers with creating an app that looks like a copycat.

For one thing, it doesn’t at all give your app the chance to establish itself or its personality. It makes your app logo blend in with the crowd.

For another, even if your app is the best in your niche, there’s a good chance that app store users might download the competition by mistake unless your app logo is clearly differentiated from all the others.

This is commonly seen with certain niches, and can especially be a problem with generic, bland app logos, which can be easily duplicated.

For instance, it’s been noted in more than one place that the productivity app niche is apparently obsessed with checkmarks, with nearly all of the app icons in this market featuring a checkmark as their main graphic. Few of them even have noticeable modifications, and most have a flat one-color background. A survey of this market looks like a sea of duplicates.

That can’t be good for anyone.

So take the time to do your research, and make sure your app icon has a unique symbol that stands out from the crowd. Find out if there is a bandwagon in your particular niche, and then make sure to stay away from it.

2. Remember To Simplify

App icons, like other logos, really benefit from a simplified approach. Concepts and art that are too complex are more difficult to understand and remember. And in a limited small space like an app icon, details can be hard to make out.

Simplification is often a process of removing elements from your app icon, boiling it down to its most important parts. That often renders the icon easier to comprehend, as well as differentiate from others.

In this tutorial, for example, a simple social media app icon with the right color and design can be made distinctive. 

Video Credit: LogoDesign.net

One of the elements that should definitely be removed, according to app icon designer Michael Flarup is the text content. Your app doesn’t need its name spelt out; it will probably be included via the interface of the app store. And relying on text content may not only be a poor creative use of the limited space, but it can actually be a distraction for the viewer, as they’re trying to read the small icon and understand the graphic along with it.

Simplification can also mean reducing the number of colors within your graphic, as well as in the app icon itself. How many colors you use depends on the style of graphic and the market you’re in, but it’s easier to comprehend and retain the important information from the icon if the color palette is limited to four or five main colors.

The background is another issue, so we’ll talk about that next.

3. Optimize Your Background

You really want the individual elements of your icon to stand out. Apart from (and in addition to) carefully choosing those elements, the background factor is a big help here.

Of course, there are a number of options to choose from, and what you use in your design will depend on the focal graphic element. But what it comes down to is what really makes the focal point pop.

Four possible background choices include:

• Flat color
• Gradient
• Color block
• Pattern

The most optimal background for your app icon will depend on the colors and complexity of your focal graphic. One or two colors in the focal graphic means more room for colors or patterns in the background. More colors in the focal graphic means only one or two in the background.

A quick look at some of the most popular app icons on the Apple store and Google Play tells us that one color backgrounds are the go-to for most icons, followed by color gradients. These are often the best way to make your app icon really pop.

Color choice for the background is also a consideration. A fairly high contrast between background and focal graphic is a good idea, but make sure not to choose colors that are so opposed to each other that it makes the graphic difficult to look at.

Another way to keep opposing colors away from each other is to use a border, so let’s discuss that visibility tip.

4. Add a Border

Borders are one of the best ways to up the visibility of your app icon, regardless of the platform, according to designer Michael Flarup. 

Why?

The reason is simply that there’s no way of knowing what background someone will have on their phone — colors, patterns, a photo of their kids or their dog. By adding in a border to your app icon, it gives it a built-in bevel, a neutral zone between the background of a mobile device and your app.

Borders are like picture frames, in that they really set off what they’re framing. So apart from the practical consideration of including a border, it can also help your app design to be more visible from a purely aesthetic point of view.

Borders are actually not as common as you might think with apps, though some app icons use borders on some platforms or sizes and not others. White and black borders are the most often seen, and they are usually very thin, fine point lines. 

Try your app with a few different variations to see what works the best for the overall look.

5. Scalability And Sizing

A final important aspect of app icon optimization that we will cover here is the sizing and scalability. This is important because it isn’t just a case of one size fits all. Even if you’re only designing for an Apple device, your app icon will still show up in multiple places across the device it’s loaded on to — and what looks good on an iPhone may not look exactly the same on an iPad.

So it’s important that you have all the necessary sizes for your icon, to cover all your bases.

And your icon should also scale well. It should present the same, regardless of where it is being used. Whether it’s on the home screen or on the settings panel, it needs to be just as crisp and legible as a full-size app icon.

If you aren’t going to include a border in your design, then definitely consider colors here as part of the scalability. Because your icon will be used against different backgrounds, try your icon background on a variety of colors to make sure that it is still viewable. 

For more information on proper sizing and requirements by platform, you may find this blog post helpful.

The Upshot Of Optimizing App Icons

As I mentioned previously, statistics indicate that there are well over two million available apps, regardless of which platform you choose to use.

And there are more than 2.7 billion smartphone users and 1.35 billion tablet users worldwide. And those numbers are ever-growing!

On top of all that, the average smartphone or tablet user spends about 90% of their device time using downloaded applications.

So your audience is definitely out there. The question is, will you be able to optimize your app icon enough to catch their attention?

With these five tips for app icon visibility, your chances of app success are better than ever.