Mac App Icon Design Guidelines

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.

Try the white icon style for a utility app

If you have a utility app, consider designing a logo-esque graphic. Make the logo white. Position it in the center of the canvas. Then paint a color gradient in the background. You can see this icon style on apps like Audible, Tik-Tok, and Instagram.

Try an action image for a game

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.

If someone wants to smash objects and then they see this icon showing object smashing, there's a good chance they'll download the app!

If someone wants to smash objects and then they see this icon showing object smashing, there's a good chance they'll download the app!

Focus on a unique element

In other cases, try focusing the icon on a unique element from your app. For a game, you might show a character's face or an important prop.

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

When you scroll through apps with the same icon concept, do you want to download any of these apps? Or do they blur together?

When you scroll through apps with the same icon concept, do you want to download any of these apps? Or do they blur together?

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.

Design a distinctive concept so your app doesn't get lost among derivative icons.

Design a distinctive concept so your app doesn't get lost among derivative icons.

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."

Distinct icon variations can help you find an icon that can increase downloads 10-200%, often around 30%.

Distinct icon variations can help you find an icon that can increase downloads 10-200%, often around 30%.

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

iOS App Icon Design

For an iOS app, prepare an icon at 1024×1024 image size, with 8-bit color palette, P3 wide-gamut color or sRGB, in PNG format with no transparency and a maximum file size of 1024 kb.

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.

Android App Icon Design

For an Android app, prepare an icon at 512×512 image size, with 32-bit color palette, in PNG format with no transparency and a maximum file size of 1024 kb.

Avoid these common mistakes

Don't crop the corners

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.

Never use words in an app icon

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.

Avoid using photos and interface elements

Also avoid using photos, screenshots, or interface elements, as per Apple's Human Interface Guidelines. (For some reason, Apple disregards their own advice, but that's another story.)

Don't use borders

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.