Favicon and app icon sizes
Cropped in your browser · your image is never uploaded
A website needs four files: 32 × 32 for the tab, a 180 × 180 Apple touch icon, and 192 and 512 for Android and PWA installs. An app adds a 1024 × 1024 master for the App Store and a 512 PNG for Google Play.
How to use the favicon and app icon sizes
The historical advice to ship a multi-resolution .ico file is largely obsolete: modern browsers happily take a PNG, and an SVG favicon works in most of them and scales perfectly. What has not changed is that 16 and 32 pixels are genuinely tiny: a full logo will not survive, and the icons that work are a single letter, a single shape or a strong silhouette. Design at 32 first and scale up, rather than shrinking a logo down and hoping. Apple is the platform with the traps. A touch icon must not have transparency, because iOS composites it onto black and turns a transparent PNG into a dark square, and an App Store icon must not have rounded corners already applied, because iOS adds its own mask and you get a doubled radius. Android’s trap is the opposite shape of problem: an adaptive icon is masked into a circle, squircle, rounded square or teardrop depending on the device, and only the central 66 percent of the canvas is guaranteed to survive — 72dp of Android’s 108dp square — so the outer sixth on each edge has to be treated as bleed rather than as content. One 1024 master exported down covers all of it.
What people use it for
- Shipping the four favicon files a site actually needs
- Exporting an iOS and Google Play icon set from one 1024 master
- Checking an Android adaptive icon against the central-66-percent mask
- Fixing an Apple touch icon that renders as a black square on the home screen
- Testing whether a wordmark still reads at 16 pixels
Questions
32 × 32 for the tab, 180 × 180 for Apple touch, and 192 and 512 for Android and PWA.
Rarely. Modern browsers accept PNG, and SVG works in most and scales perfectly.
Design one master at 1024 × 1024. iOS takes that directly; Google Play wants a 512 PNG with alpha, under 1 MB.
iOS composites transparency onto black rather than honouring it. Export with the background you actually want.
No, it is rejected at submission. Use a solid background.
No. iOS applies its own mask, and pre-rounding gives a visibly double-rounded icon.
An Android icon the launcher masks into a different shape per device. Only the central 66 percent of the canvas is guaranteed visible.
The adaptive mask. Keep the design inside the central two-thirds and treat the outer quarter as bleed.
Usually not. At 16 pixels a logo becomes a smudge. Use a single letter or shape.
The site root works by convention, but any path referenced from a link tag in the head is fine.
A link tag with rel="apple-touch-icon" in the head, pointing at the PNG.
180 × 180, as a PNG with a solid background. One file is enough now: iOS downscales it for older devices, so the 152 is only worth shipping if you still support them.