App Icon Design

All you need to know about catchy app icons and what Apmato does about it

You may wonder why you would have to spend time to design your app icon or launcher icon — as it is called in the Apple and Google jargon. You could just take a picture and use it as it is. Well, it’s not that simple.

The effect of a well-designed icon on your sales can be surprising.

This post brings together app graphic design tips, technical facts from Apple and Google and the approach we took with Apmato to make your app icon look great on most mobile devices.

First Impression

The app icon is the first thing one sees from an app. it represents your app when users search for it and download it from the app stores as well as on the home screen of the mobile device when users launch and use your app.

Using the app icon as a selling point or a teaser is a marketing technique that is spreading very fast.

Examples like Airbnb are striking. By changing their app icon and logo, Airbnb received huge criticism because of this new logo, what didn't really help the brand to continue its development.

Everyone should be aware that many people are judging an app on its app icon. Many studies show that a poorly-designed icon is making the potential customer run away.

Distinguish yourself

There are hundreds of thousands of apps in the app stores. It's therefore not easy to be recognizable among all these apps. Your app icon has to be unique. Some designers are specialized in the creation of app icons, and it may not be a bad idea to hire one to have the best possible app icon.

Your app icon must communicate a meaning

There are many benefits of a well-designed and unique app icon. First, Icons are fast to recognize, are part of the marketing, comparable to a shop-window. Then, your app doesn't need any translation unless you put text in it, what we strongly advise against (except for the name of the app obviously). It is therefore universal and can be used and recognized all over the world. That's part of the construction of your brand in the world.

Not too much

Be careful, your app icon doesn't have to be a description of your app. Keep it simple and schematic. Reduce the amount of graphic details by focusing on the basic characteristics of the object rather than creating a highly realistic image in order to speed up recognition — little details are difficult to distinguish at smaller sizes.

Your app icon should reflect the app's philosophy and create an image memorable to the user.

Take example

The best way to learn how to make the perfect app icon remains the fact of looking at the top 100 paid apps chart. Most of the app icons there are really well-designed and correspond to the apps philosophy. Here are some examples:

Strategy game

Foto editing

From left to right: Instant messaging app, Airplane tracker, fitness app

Tips for designing and testing the efficiency of your icon

To design your icon, be sure to check the following things:

• Give your app icon a discernible background: Icons with visible backgrounds look best on the home screen primarily because of the rounded corners iOS adds.
• Be sure your image completely fills the required area: If your image boundaries are smaller than the recommended sizes, or you use transparency to create “see-through” areas, your icon can appear to float on a black background with rounded corners.
• Test the icon for it's efficiency: Use the 5-second rule. If it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.
• Test the icons for it's recognizability: Ask people what they expect the icons to stand for.
• Test the icons for it's memorability: ask a repeat set of users if they can remember the icon’s meaning after being told what it represented a couple of weeks earlier.

A good overview with even more tipps can be found in this post: 6 tips on how to create better app icons.

Facts on app icon design

Apple masks all icons to become the same rounded corners. Be sure to design your icon artwork with rectangular corners and let Apple apply the roundness. The reasons are manifold:

• Apple may change the shape of the corners without notice. That happened with iOS 7.
• You need to upload a complete new app to the app store to change the app's icon.
• You can use the same icons for Android and iOS, because Android uses square cornered icons.

To anticipate the look of the app icon with rounded corners applied there are quite a variety of downloadable templates with masking layers.

Square

On iOS home screen

Android app icons

iOS vs Android

The Android system is available on many different smartphones. Big ones, small ones, slim ones, etc … So that the resolution of the screen and its size aren't always the same. For example the htc M8 comes with a full HD resolution of 1080 x 1920 screen pixels and requires the launcher icon to have the appropriate size to fit into the general appearance and be recognizable.

here are two lists with the sizes that are required for Android and iOS:

Apmato

When looking at the two lists, 1024 x 1024 stands out as the biggest size. Best practice to produce other image sizes so that they do not look fuzzy is to take the largest image possible and reduce it in size, than to enlarge a small image.

When you start a new app with Apmato you are asked in step 2 to upload your app icon. Upload a 1024 x 1024 pixel version of your app icon here, and our system will automatically create all the other dimensions for iOS as well as for Android.

When you upload your app icon here, Apmato automatically generates all necessary icon sizes out of this one.

There is a preview in Apmato that shows all icons the system has created. But you do not have to stick to the generated icons, you can change each icon individually whenever you want to.

You can check all icon sizes Apmato has created and are free to change each particular icon.