App Icons — iOS and Android Sizes, Rules and Mistakes

An app icon is the smallest brand carrier and, at the same time, the most loaded. People find your app on the screen by it, among fifty neighbors. People decide to install by it in the store, where competitors sit right beside it. And all of this on a couple of square centimeters. From that single fact — tiny size under huge load — follows literally every rule below, including the fact that Apple's and Google's requirements are in places directly opposite.

One master file that everything is built from

Let's start with the good news, because it removes the main fear. You don't need to hand‑cut dozens of sizes for each screen: Xcode, Android Studio and cross‑platform builders (Expo, Flutter) generate the whole set from one source. Your job isn't sizes — it's the right master.

Since everything grows from one file, you need to understand how each platform wants to see it — and they want different things, not on a whim.

iOS rules: the system does it for you

iOS assumes that a uniform look of icons on the screen is the system's job, not the developer's. Hence all the bans, each logical if you remember the OS applies the final trim itself:

• Don't round the corners yourself. The system applies its signature superellipse mask automatically. Send it pre‑rounded and you get double rounding with corner artifacts.
• No transparency. The background must be filled: the App Store will either reject transparent areas or fill them black.
• No text — except when the text is the mark. Small captions in an icon are unreadable and look amateur.
• Dark and tinted versions (iOS 18+). The system needs dark‑mode variants, so think in advance about how the mark lives on a dark background.

Android starts from the exact opposite idea — and therefore demands a different master.

Android rules: an icon of two layers

If iOS decides for itself how to crop the icon, Android since version 8 goes further: it doesn't just crop, it splits the icon into two layers — background and foreground — and applies the mask itself: a circle, a rounded square, a "teardrop," plus it animates the layers with parallax. The developer doesn't know in advance which shape a user's device will pick, and from that ignorance follow three rules:

• The mark goes in the safe zone only. Of a 108 dp canvas, the central 66 dp is guaranteed visible. Keep everything important inside that circle, or the mask clips the edge.
• The background is a separate layer. A solid color or simple gradient; a patterned background looks restless and jittery under parallax.
• Don't rely on shape. Since the mask is unpredictable, the mark must work in any of them — circle and square alike.

For all their difference, both platforms converge on one requirement for the mark itself — it must be extremely simple. Hence the approach to making an icon from a logo.

How to make an icon from a logo

The process is a relative of the favicon (covered in a separate article), but the requirements are stricter: the icon is larger and competes for attention harder. Five steps, each a direct consequence of the "recognizable at 48 pixels" test:

1. Take the mark, not the full logo. A horizontal logo with text turns into an unreadable strip inside a square. What goes into the icon is the symbol: a letter, a mark, a simplified shape.
2. Scale it bigger than seems right. The mark should fill 60–75% of the canvas. A timid little icon in the middle of an empty field simply gets lost on screen.
3. Minimum detail. The check is simple: shrink to 48×48 — still recognizable? Then the gradients are simple, the lines thick, the elements one or two.
4. Contrasting background. The icon lives on unknown wallpaper, so its own background is mandatory. A white mark on the brand color is a classic that works.
5. Check it next to competitors. Screenshot a home screen, drop your icon into the grid, and look honestly: does the eye find it in a second?

When one of the steps is skipped, the result is predictable — and predictably the same.

Icon, favicon and avatar — one system

Notice the "survives at small size" test holds not only for the icon. A brand has three "small carriers," and making them separately means solving one task three times. It's smarter to do it once: the same mark, the same background color, the same simplification logic. The app icon is the most detailed of the three, the favicon the most ascetic, the avatar in between (and cropped to a circle, as covered in the article on sizes). If the mark is designed from the start on the "survives at 16 pixels" principle, all three carriers come out of one source in half an hour.

The icon as a storefront: why it moves installs

So far we've discussed the icon as navigation. But it has a second job, and it explains why the icon is worth the effort. In store results the user sees the icon, the name and the rating — and by this trio decides whether to tap. So the icon is also a storefront, and storefronts get optimized. Hence ASO (store optimization) practices:

• A/B testing icons. Both platforms offer built‑in tools (console experiments). Teams regularly get ±10–30% to install conversion from a simple icon swap — the cheapest gain in mobile marketing.
• What to test. Background color, mark size, presence of a border. Fine details aren't tested — they're invisible in results anyway.
• Seasonality. Big apps swap the icon for events (New Year, sales): an event icon stands out in a row of ordinary ones. But it's important to return to the base version — perpetual carnival blurs recognition.
• Icon = promise. The store punishes mismatch: a "casino" icon on a Sudoku app brings the wrong users, they uninstall at once, retention drops, ranking sags.

From this same "the icon is a face you answer for" logic grow the formal reasons for review rejections.

Store‑submission mistakes and how they end

A separate Android subtlety follows from the mask's unpredictability: manufacturers differ — a circle on Pixel, a rounded square on Samsung, a "teardrop" on some Chinese shells. So the adaptive icon is tested in at least two masks; the Android Studio emulator can do this.

Technical checklist before submitting

1. Master 1024×1024, PNG, no alpha channel, square corners.
2. Android: background + foreground layers, mark in the 66 dp safe zone.
3. Test at 48 px and on light/dark wallpapers.
4. Dark version for iOS 18+.
5. The source is vector: the next redesign will thank you. Why vector is a mandatory base is covered in the article on vector and raster.
6. Check in two Android masks (circle and rounded square).
7. Icon aligned with the favicon and avatar — one mark, one color, one system.

The bottom line

It all reduces to one chain: one vector mark → a 1024×1024 master with room to spare on simplicity → auto‑generated sets. iOS rounds itself and forbids transparency, Android wants two layers and a safe zone — but both platforms serve one and the same test: is the icon recognizable at 48 pixels on busy wallpaper among fifty neighbors? Pass that test and you pass review and the store storefront alike.

To see how strong brands solve their marks at small sizes, browse our logo catalog — many companies there have both full logos and separate icon‑marks in vector.