App icons are the first thing that your users notice as they stumble upon your app. With billions of apps fighting it out for attention in the app store, an app icon have become important differentiators that break the clutter and bring users to your app. They are indeed the first touch point your users come across. Hence, it is extremely important to leverage on this experience straight away.

In this post, I will suggest a few design hacks that can help you build cool app icons which can stand out in the app store and possibly highlight your app among other competing for installs.

Before I tell you the points, you must understand that an app icon’s fundamental purpose is to develop an immediate connection and create cognitive cues. Everything suggested in this post fundamentally goes back to attain that.

Here are some of the design hacks to create great app icons

The 70% rule

There is a consensus among designers about using 70% of the icon space to highlight the main object connected to the app. An object can be anything related to the app. If you are designing a photography app, the object may be a camera or a lens. For a game, it can be the face of a character and so on.

In other words, the object should occupy majority (70%) of the area of the icon. The idea is to develop instant cognition with the users and have them navigate to the app page for the description. Once they land on the app page which has a description, it becomes a lot easier for you to acquire the user.

However, only allowing larger space to the object is not enough. It must be free from clutter as well. Only then it can connect and create faster cognition, which brings us to the next point.

Cut the clutter till the basics start to fall apart

Keep cutting the clutter till the fundamental idea of the object within the icon starts to come out. In other words, strip down your icon upto a point where the object in the icon goes from being sensical to non-sensical. Cut down till the object retains its universal shape and identifiable by a majority of people.

For example, if you are making an app to hide pictures, you may come up with an app icon that has “keys and lock” as the primary object. Now, you may remove shadows or counters and go for a totally flat icon. After that is done, you may go minimalist on the design, playing entirely with colors to create 3D effects for the “lock and key” shape used in the icon.

Dull upon shiny and shiny upon dull

The next thing that makes an app icon stand out is appropriate usage of contrast. Designers often employ contrast between the object and the background of the app icon. If you can execute the two steps mentioned above, you might automatically land here.

Creating contrast has a lot to do with colors as well. Start off with a predetermined color palette in your mind and work your way through. Just remember, that the idea is to create vibrancy and contrast between the background color and the elements in the object. If you are a beginner into this, you may refer to a few designs on Dribbble and download colour palettes of your choice.

After you are done with the final cut, you can create 2-3 versions with more white or black to the colors. Now you may pick the one that feels right to your eyes. After iOS 7, a lot of emphasis in being paid on fresh colors with stronger tones of white into them.

Do not be deceived by your big Mac

Once installed on a device, your app icon gets displayed in various resolutions. For it to appear significant even in its tiniest avatar, one must design it keeping the proportions in mind. Often, designers work on big Mac screens in which even the tiniest details can also be figured out. However, when the same icon is tested on a smartphone with varied icon sizes, the details get lost.

If you are working on a Mac and making the icon app store first, you may easily afford to put in some tiny details. But keep in mind that the tiniest icon meant for the settings menu is a 29x29px image. Finer details such as small texts or other symbols will not be visible on that.

What you can best do is to keep the size in mind and employ fundamental shapes and patterns to get the job done. Embrace simplicity and focus on a single object. Preferably a unique shape or element that retains its contours and details despite scaling. This way, your icon would look appropriate across all the resolutions suggested on guidelines given by Apple and Android.

Try your icon against a myriad of wallpapers

Users have varied tastes and preferences that are reflected by the choice of wallpapers and themes in their smartphones. It means, your app icon will have to stand out against a myriad of colors. Hence, it is always a good idea to test your icon’s visibility against wallpapers of seven basic colors. You can increase or decrease the white/black saturation within the wallpapers you are using to conclude a satisfactory test.

There can be a few situations where the wallpaper would interfere with the visibility. Wallpapers such as selfies may lack uniform colors and may interfere with the visibility of the icon. You cannot do much in here but as I said, you can test them against the seven basic colors to get going.

Decide on abstraction and make iterations

Designers suffer from a constant dilemma between abstraction and real depiction of the prime object within the icon. With the emergence of flat icons and UIs, the weight age has shifted a lot towards abstraction but one cannot simply do away with a real depiction of an object. Real objects or skeuomorphic icons are still going strong in the app store and there are valid reasons for being so.

For example, if you make a sound enhancing app, you may draw a skeuomorphic amplifier in the app icon instead of flattening it or making a line icon. But given the fact that an amplifier is not a familiar commodity, its cognition would decrease if it is flattened. For things that are relatively common and enjoy universal familiarity among masses (a camera for a photography app), you may definitely come out with a flat icon. However, if the app is connected to something obscure, keeping it real or skeuomorphic will be better.

Another great way to arrive at a good icon design is to make several iterations with skeuomorphic and flat. You can keep the second point in mind while doing that. Make several iterations stripping a few details at a time. Stack all of them up side by side and decide which one you like the most and why.

For games, identify a character

Making game icons can be real fun as a lot of creative things can be accomplished by making one. In the middle of that, you must have noticed that games often have stories and characters. If we stick to the rule of building cognition with users then Faces of characters from the game itself can do a great job. In fact, this is the reason character faces are so common in icons for game apps.

If you are making a game, you need to find out the main character or a character which is common across all levels. Due to strong familiarity of the character with the players, the character can be used to create a strong recall for the game. And for the same reason it can become the app icon for your game app as well.

You may decide a color palette and construct your app icon around those. Frankly speaking, it becomes a lot easier if you go for a face. But as the same time, you might need to put some additional effects to make it stand out.

Consistent colour palettes and conventions for icons and UI

The UI of the app is going to have a specific theme and usage of certain colors. It is best to employ the same colors to design the icon as well. You can also do the same with certain elements that you have implemented within the User Interface and use them in the icon. Doing that makes your design more uniform and leads to a stronger recall and familiarity of your app amongst users.

Creativity saves the day

Run a search for “to do apps” on Google Play and you will stumble upon a grid full of check marks. Yes, most of the to-do apps designers could only come up with a check-mark as their app icon–a common icon for to-do. However, in midst of that noise, the Evernote icon stands out comfortably.

Search results for the term “to do apps”. Notice that the Evernote icon stands out among others.

The idea of the icon is derived from the fact that an Elephant never forgets. It is coupled with a brilliant execution of a folded elephant ear that denotes a notepad. It differentiates Evernote straight away from other to-do apps in the store and creates strong cognition.

Another example of great icon design can be attributed to Pocket. To start off, the idea of the app is unique. While bookmarking existed since a long time, it could not make users come back to read the content they saved.

Pocket on the other hand used thumbnails to create a clear visual memory. The app triggers a “save this content” emotion and it is clearly and cleverly depicted by the icon itself. The red shape refers to a “Pocket” while the down arrow depicts “download” without a doubt.

Do not use Photos or Images

Besides the above mentioned pointers, you can also avoid direct implementation of photos and images in the app icon. Even if you refer a photograph, you must create your own vectors in Illustrator or Photoshop. Only then it will look authentic and have a magnetic effect.

It might sound like a cliché but you need to keep your design clean. I’ve already mentioned about mixing more white or black to the colors to arrive at the perfect color tone you want. This comes really handy to declutter an icon. If some colors are made brighter or vice versa, the overall noise level does come down at various instances.

App icons must become like popular songs that anybody can recognize and the following design hacks will help you make a great app icon. I hope you found the points valuable. If you have something to add or suggest, drop in your comments below.