App Icon Design Guide: Sizes, Styles, and Best Practices

Your app icon is a marketing asset, not an afterthought

On the App Store and Google Play, your icon is the product. It is the first thing users see in search results, the thing they hunt for on their home screen, and — for most apps — the difference between a tap and a scroll-past. App icons are also ruthlessly small: most are viewed at 120px or less, in a crowded grid of competitors.

The good news: a great app icon follows rules you can learn in an afternoon, and you can design one from a logo you already have in minutes.

The sizes platforms actually use

In practice, design on a 1024px square, keep the core mark within the center 66% (the safe zone), and let the platform crop the rest.

The three-layer formula for a good app icon

• A bold background. A full-bleed gradient of your brand colors (or a solid brand color) is the highest-converting base — it reads instantly at small sizes. In the maker, set the background to a gradient of your primary → secondary colors.
• One strong focal element. Your logo's icon or monogram, sized to fill roughly 50–65% of the canvas. If your logo has both an icon and a wordmark, use only the icon for the app icon — wordmarks blur at 120px.
• Massive simplicity. One idea, two colors max, zero tiny details. Compare your icon at 60px with competitors and it should still be recognizable.

Designing an app icon from your logo

Adaptive icons on Android

Android masks your icon into circles, squircles and other shapes depending on the phone. To avoid being cropped badly:

• Keep the core mark inside the center 66% of the canvas.
• Do not rely on the outer 12% — it may be cut off.
• Export a separate foreground (mark only, transparent background) from the maker's transparent PNG at 1024px, then scale to 432px for the adaptive format.

Five app icon rules that separate pros from amateurs

• No tiny text. Anything smaller than ~20% of the icon width is unreadable at home-screen size. If text matters, make it the icon.
• No pure white backgrounds without a frame. A white icon on a white home screen disappears. Use a colored background or a visible border.
• No photos of tiny objects. Photographic details pixelate to mush. Vector shapes survive.
• No drop shadows. Platforms add their own; heavy shadows make icons look dated and "thick".
• No busy gradients. One smooth two-color gradient reads premium; rainbow gradients read 2012.

From app icon to full brand

Testing your icon before you submit

Submissions are a one-way door: once an icon is live on the App Store, every update and review cycle costs time. Test the icon properly before submitting:

• The 120px test. Shrink the export to 120 × 120px and open it on your phone. If you need to squint to recognize the mark, it fails. The most common fix is increasing the icon's size within the canvas — icons that look "big" win.
• The home-screen test. Put the icon next to your real competitors. A good icon survives a grid of similar apps; a bad one blends in.
• The white-and-dark test. View the icon on a white wallpaper and a dark wallpaper. Backgrounds bleed, shadows vanish, and edges get eaten — the mark itself must carry the design.
• The grayscale test. If the icon is unrecognizable without its color, the shape is too weak. Strong icons work in single color.
• The blind-friend test. Show it to someone for three seconds, then ask what they remember. If they describe the colors instead of the shape, redesign the shape.

Each test takes thirty seconds and catches the failures that reviewers and users notice immediately.

Your app icon and your website logo should be the same family — that is the definition of a brand. If you are also building a web presence, read how to extend one mark across a channel kit, and make sure you are shipping the right file formats (PNG vs SVG). The minimalism guide will also save you from the most common app-icon failure: designing something beautiful that cannot survive at 120 pixels.