Your app icon is the first information users will see about your app. It’s also the most important factor that will drive them to click your app.
Imagine someone scrolling through search results on an app store. Will your icon catch their eye? Or will it get lost in the masses?
Often people will scroll through 10 apps before one icon grabs their attention. This is why it’s essential to invest in a quality icon.
Make your icon… iconic
Try shrinking your full-resolution app icon from 1024×1024 to 128×128.
- If the icon is still recognizable, then it’s iconic.
- If it’s not recognizable, then you’re trying to fit in too much detail. You need to simplify the design for better scalability.
The ideal icon for a game would show off the “action” of the game in one iconic image. Jazz Smash shows a baseball bat smashing objects, which is exactly what players get to do in the app.
Limit your color palette and use vibrant colors
Icons are small. To maximize the impact in the space you have available, you should limit the number of colors in your icon. This will give each color a chance to pop.
Typically app icons use just 2-3 colors. Games are an exception, although even games tend to use 2-3 dominant colors. Consider the way Bowmasters emphasizes the blue on the shark and the orange on the gun and the background.
A limited color palette lets you push color saturation without giving people a headache. This is ideal, since saturated colors command attention. If you look through the App Store Top Charts, you’ll see that most top-ranking apps use this strategy: limit the color palette, use vibrant colors.
Follow new trends
Icon design trends change from year to year. You can get inspiration from the App Store Top Charts, iOS Icon Gallery, and Pinterest. I recommend sending your icon designer links to 3 icons you like, and sharing what you like about each one (such as the color, shape or design aesthetic).
Today a new design trend is neumorphism – an aesthetic that bridges old school skeuomorphic design and 2013-era flat design.
Use a consistent design aesthetic
If you own a collection of apps, ideally all your icons would have a similar aesthetic. (Ketchapp‘s consistent brand presence is a good example.) This way, if a user enjoys one app and they click on your company name, they’ll see an attractive portfolio of similar apps. This approach supports the popular sales strategy of bundling apps to increase sales volume.
It’s also important to design an icon that is consistent with your app interface. For example, if your app interface uses neumorphism, you should design a neumorphic icon for coherence. To make sure your icon and interface align, I recommend sharing a mockup of your app interface with your icon designers.
Find a unique concept
It’s important for people to be able to recognize your app icon. Countless developers have based their icons on popular apps in their niche – not realizing that many small companies in the same niche have done the same thing. This results in a deluge of apps that users see as low-quality, derivative garbage. Most users ignore them, and these apps get buried in App Store search results.
To get inspiration for unique design concepts, check out Will Paterson’s review of the his 5 favorite icons of 2020. (The video starts at 1:10. I recommend 1.5 playback speed.)
Work with at least 3 designers
Ask your app development company to work with 3 designers. This will give you multiple design concepts to choose from. I guarantee you, one variation will be better than the others. Your icon is too important to your app’s success to just hope that a single designer comes up with the best possible idea.
For a great example of how different icon concept can create dramatic improvements in app installs (and therefore, your revenue!), check out Roman Rudnik’s excellent article, “10 Case Studies That Show How an Application’s New Icon Increased Downloads.”
In my experience, higher priced designers don’t necessarily come up with better app icon ideas. Usually you can get a quality graphic-based icon for under $50 or a character-based icon for under $100.
If you’re planning on being one of the 3 designers, I recommend listening to designer Michael Flarup’s free 13-video tutorial, “Designing App Icons.”
Give your designers specific instructions
If you’re working with an agency, the agency should suggest a creative direction. If you’re working with designers, be prepared to give your designers some direction.
Your designers will usually ask you:
- What platforms you’re publishing on (iOS, Android, or others)
- What colors you prefer
- Whether you want a symbol-based, graphic-based or character-based icon
- Whether you want a flat, skeuomorphic or neumorphic (new skeuomorphic) aesthetic
- Whether you want source files (I usually pay extra to the winning designer to get this asset.)
App Icon Format Requirements
Apple allows you to create alternative versions of your app icon. If you decide to create variations, you can allow users to change the app icon from inside the app. All icon variations must follow the same image format.
Avoid these common mistakes
Apple and Google will automatically apply a mask to round the corners of your icon. It’s best to create a square icon with the artwork going all the way to the square’s corners rather than using a color or transparency to simulate rounded corners.
This is what the app title is for. On app stores, the app title is always displayed next to the app icon, so there is no need to repeat the text in your icon. However, you can design an icon with a letter-based symbol. The graphic design of the “f” in Facebook’s icon is an example of this approach.
Your goal is to maximize the visual impact of your icon. Adding a border inherently reduces your icon’s visibility and thus its impact. Google explicitly recommends against “scaling down” icon illustrations to accommodate a border.