The importance of app icons and how to create icons that grab user’s attention

With the App Store becoming no less than a battleground, app developers need to create icons that not only stand out but also provide an overview of the key functionalities. Even though there are a dozen articles claiming to educate on the importance of app icons, it is important to revisit the basics as an app icon is perhaps the first thing potential consumer notices about the app. It must tell a story, create intrigue and make the user curious enough to find out more.

Icon designing is a critical phase that requires in-depth brainstorming even before the development process starts. Your app icon and app screenshot is what your user will see first before installing it. If your app icon takes more than 5 seconds to think what it means, then it perhaps needs to be reconsidered.

In this blog, we will discuss the importance of an app icon and how to create successful icons that rank higher in the App Store.

No Second Chance to Create a First Impression

The icon of your app is the first point of engagement for a user. A great icon can increase downloads up to 560%! With a ton of options available in the App Store, the pictorial representation of the app is important to catch your user’s attention and keep them away from meandering for other options.

One company that does a really good job at this is Slack. It has made a mark on users with its simple yet elegant design. The earlier logo of Slack had The simple “S” symbol with a soothing color palette that made it easy to spot the icon among the crowd. The color theme of the icon is nothing short of nostalgia of colored gels put over strips of solid colors. They recently changed their logo keeping the color palette same.

Image Source

Let the picture do the talking

In addition to creating a great first impression, a quality app icon should also explain the basic features of the app to the viewers. For instance, a food app should be able to convey the genre of the app by using icons related to food or delivery person.

Take for example Clear Todos – a to-do app. Even though an old app, it has an upbeat and catchy icon that suggests how life can be better by having a task organizer. What sets it apart from around a million such apps is the colors that are refreshingly new and how each color behind the tick mark represents different rows and columns.

Image Source

Following the success of Clear app, several apps including Microsoft To-Do have borrowed the concept using a tick mark to stand out on the digital shelf.

Yet the Clear app stands out for its use of colors and its unique brand identifier in the app icon itself.

Cut Through the Noise

It is difficult to find an attractive icon and it is even more difficult to make one. If you create an image that grabs the attention in seconds, then half your job is done. By making your app unique and exquisite, you can cut through the noise and make your app recognizable. It is the first thing that will connect with people both on functional and emotional levels. While the functionality of the app does play an important role in increasing the recall value, what really sticks in the mind is the picture you use as the icon. Speedtest by Ookla is a great intersection of unique yet simple design.

Image Source

While there are just two colors used in the icon, the contrast of the colors and the concept of the speedometer creates a striking impression on the viewers. It does its job of telling the audience that the app is about measuring speed.

Other apps that describe its functionality through images include:

Measure app from Apple and Scanner Pro by Readdle

Image Source And Source

Note: To begin, start with a brainstorming session and ask yourself – what do you want your icon to communicate? Then create an image that is unique with exquisite patterns and designs.

Importance of Icons for App Store Optimization

To generate more visibility and rank higher in the App Store, developers need to optimize apps as part of the ASO. If the icon is well designed and thought through, it will get more visibility and ultimately be downloaded by the user. To design eye-catching icons, it is advised to keep the design simple and appealing. Create an icon that is relatable to your business, grabs attention and looks good even when scaled to the smallest size. Also, the icon should look equally good when viewed in light and dark backgrounds.

Even before going on to the whiteboard, it is important to establish the purpose of the app icon. Decide if you’d want to create a functional or a branded icon. While using company names may work for branded apps like Uber and Facebook, functional icons can use objectives to describe the app. Once the purpose of the app is ascertained, you can then kickstart the creation of a successful app icon by having an exquisite design along with a cherry-picked color palette.

Small details go a long way to determine the success of app icons. When designing an app icon, keep in mind the minutest of details like image quality, the element’s creativity and the uniqueness. Even though there are no tried and tested ways for app icon designing, read the following tips that revolve around the three basic pillars: quality, design, and creativity.

Avoid Text

Keeping in mind the scalability of the app icon, it is never a good idea to have text on the icon. People will definitely have a tough time reading the text which you squeeze into such a small area. But in case you decide to have it, then Apple guidelines advise to emphasize words that relate to the actual content your app offers.

‘’Use words only when they’re essential or part of a logo. An app’s name appears below its icon on the Home screen. Don’t include nonessential words that repeat the name or tell people what to do with your app, like “Watch” or “Play.” If your design includes any text, emphasize words that relate to the actual content your app offers.’’ – From Apple’s App Icons guidelines.

Take for example Line social media app and Grab. Line App is a clear winner for its legible font and idea even though both the apps use the same color (green and white). Since Grab is a transportation app, it uses a font that also tries to signify roads. But this creativity also makes it hard for the users to read the name. Either way, refrain from using text in the app icon. Even if you have discovered the perfect word that will influence users’ actions, it is better to have it where it belongs – in the description.

Image Source

Choose Colors Wisely

Your color palette can create a lasting impression and get inside your user’s head. To choose the perfect palette, look at what your competitors are using and select a completely different color scheme. In other cases, if your brand has certain color guidelines, then stick to those. In some cases, you can even use the logo of the company as Facebook does.

If you’d like to take some color inspiration, then turn to the Strata app. The icon appears to be simple patterns. But what separates it from thousands of puzzle games is the color combination along with attention to details – whether it is subtle shadows, pastel palette or faint textures. The icon simply feels at home on the App Store!

Image Source

Pro tip: it is a good practice to have a background color in the icon so that it doesn’t blend with any background when users download it on their devices.

Keep It Simple

Make more with less if you want your app icon to be successful. Mixing more graphics in such a small space can lead to confusion. Remember that simplicity will underscore the theme of your app. To make your icon stand out, try using only one symbol but in a creative way! The language learning app, Duolingo’s cartoonish approach is very creative and comparatively offbeat from the boring flags and corporate icons. It insinuates that language learning doesn’t have to be serious with its icon, which looks like a hypnotic owl!

Image Source

Consider the App Store Sizes

There are so many handheld devices in the market with different screen sizes and display. Luckily, both platforms – Google and Apple – have detailed guidelines that can help designers clarify their doubts. Android API Guides for Launcher Icons is the Bible of all Android Developers while iOS Human Interface Guidelines For App icon is used by iOS programmers.

Follow their best practices and advice when you develop an icon. These manuals have all the necessary information required for adjusting icon to the different screen sizes. Below are some of the pixel recommendations and attributes by both Apple and Google based on the devices:

App Store

• iPhone 6s Plus and iPhone 6 Plus: 180 x 180 px
• iPhone 6s, iPhone 6 and iPhone 5: 120 x 120 px
• iPhone 4s: 120 x 120 px
• iPad and iPad mini: 152 x 152 px
• iPad 2 and iPad mini: 76 x 76 px
• iPad Pro: 167 x 167 px

Google Play

• 32-Bit PNG (with alpha)
• 512 x 512 Pixels Dimension
• 1.024KB maximum file size

Don’t Forget A/B Testing

Since no one has the answer on how to develop the perfect app icon, A/B testing is the way to figure out what works best for your app. According to a study, testing app icons can increase app page performance by up to 26%. Conduct the test on specific elements like background, colors and small pictures. You can also test different letters or numbers placed on the image to see how it performs.

Conclusion

App icons have come a long way from being just the visual expression of the app. With millions of app available on the App Store, icons need to draw the attention of the viewer and compel them to download it. With so much riding on the looks of your icon, it is not surprising that so much time is spent on brainstorming on the icon design.

Designing an app icon is one of the most daunting tasks. But with an understanding of common aesthetic rules, you can make this as swift as a breeze and flourish on the digital shelf. Just remember, whatever you design, always provide a high-resolution image and keep it simple yet bold and friendly.