There's no single "app icon size" — browsers, iOS and Android all expect their own dimensions. Here's the full set, and the fastest way to export them all from one image.
Icon sizing is different from most resize guides on this site — instead of one target size, you need several exports of the same icon for different contexts: a tiny favicon in a browser tab, a larger one for an iPhone home screen, and Android/PWA sizes for installed web apps. The good news is you only need to design once, at the largest size, and resize down from there.
| Use | Size |
|---|---|
| Browser favicon | 32×32 |
| Browser favicon (retina) | 64×64 |
| Apple touch icon (iOS home screen) | 180×180 |
| Android/PWA icon | 192×192 |
| Android/PWA icon (large) | 512×512 |
Design or start with your largest icon at 512×512 — every other size is a straightforward downscale from here, so get this one right first.
Open Squeezr, drop in your 512×512 source, turn on Resize, lock the aspect ratio, and set width to 192 for the Android/PWA icon. Download.
Repeat with width set to 180 for the Apple touch icon.
Repeat again with width set to 32 (and optionally 64 for retina) for your browser favicon.
Reference each exported file in your site's HTML — a favicon and apple-touch-icon link tag, plus a web app manifest for the Android/PWA sizes.
Skip the manual math — open Squeezr with this preset already dialed in.
Open Squeezr with a 512×512 icon preset →Different platforms render icons at different physical sizes and pixel densities — a browser tab is tiny, while a home-screen app icon on a modern phone is shown much larger and needs more resolution to stay crisp. Rather than one image stretched awkwardly across all of them, each platform expects its own correctly-sized file.
Even your largest export is often displayed at a fraction of its size. Avoid fine detail, thin lines, or small text in the design itself — a bold, simple mark that reads clearly at 32×32 will look just as good scaled up as one designed only with the large size in mind.