App icons for iOS, Android and the web without a design tool

Every platform wants the same picture at a different size, in a different shape, with a different amount of breathing room. Getting that wrong is why an icon looks fine in the design file and cropped on a phone.

Start with one oversized square

Export a single 1024×1024 PNG with no rounded corners, no drop shadow and no transparency in the background layer for iOS. Every other asset is a downscale of that master. Draw the artwork on a grid where the meaningful shape sits inside the middle 80 percent — that margin is what saves you on every platform below.

iOS

iOS applies its own rounded-rectangle mask, so ship a full-bleed square. Transparency is rejected for the App Store icon: flatten it onto a solid colour. Modern Xcode projects accept the single 1024 asset and derive the rest, but older asset catalogues still expect the full ladder from 20pt to 1024pt across @1x, @2x and @3x.

Android

Adaptive icons are two layers — foreground and background — each 108dp, of which only the central 72dp is guaranteed visible. Launchers mask the result into a circle, squircle, rounded square or teardrop depending on the device. If your logo fills the whole square, a circular mask will slice it. Keep the mark inside that inner safe circle and let the background layer bleed to the edges.

The legacy mipmap set still matters for older devices: 48, 72, 96, 144 and 192 pixels for mdpi through xxxhdpi.

The web

Two rules cover most cases. A 180×180 apple-touch-icon for iOS home screens, and a 512×512 maskable PWA icon with roughly 20 percent padding so Android can crop it into any shape. Add a 192×192 for the manifest and a classic multi-size favicon.ico for browser tabs and bookmarks.

Generate the browser set with the Favicon Generator and the mobile ladders with the App Icon Generator — both run in the browser, so unreleased branding never leaves your machine.

Details that ruin an otherwise good icon

• Text. At 48 pixels a word is a smudge. Use a mark, not a wordmark.
• Thin strokes. A one-pixel line at 1024 disappears entirely at 48. Test the smallest size first.
• Near-white backgrounds. They vanish against light wallpapers and light-mode tab bars.
• Colour profiles. Export sRGB; a P3 export can shift noticeably once the OS re-encodes it.

Design once at 1024, respect each platform's safe area, and the export step becomes mechanical.