Blog
Apple touch icons and maskable icons, explained
An Apple touch icon is a 180x180 opaque PNG iOS uses for home-screen shortcuts, with no rounded corners because iOS adds its own mask. A maskable icon is a 512x512 PWA icon with a safe zone so Android's adaptive launchers can crop it into any shape without clipping your logo. They solve different cropping problems.
By Nico Jaroszewski · 22 March 2026 · 6 min read
An Apple touch icon is a 180x180 opaque PNG iOS uses for home-screen shortcuts - with no rounded corners, because iOS applies its own mask. A maskable iconis a 512x512 PWA icon built with a safe zone so Android's adaptive launchers can crop it into a circle, squircle, or rounded square without clipping your logo. They solve two different cropping problems, and most sites need both.
The Apple touch icon
When someone taps "Add to Home Screen" in Safari, iOS uses the icon declared with rel="apple-touch-icon". The current recommendation is a single 180x180 PNG. Two rules matter most:
- No transparency. iOS fills transparent pixels with black. Use a solid background - white or a brand color.
- No pre-rounded corners. iOS rounds the icon itself; pre-rounding causes a double-rounded, clipped look. Ship a full-bleed square.
One 180x180 covers every current device. See the Apple touch icon page for the exact link tag and a one-click generator.
The maskable icon
Android's adaptive icons crop your PWA icon into different shapes per device. A normal icon gets its corners or edges chopped off. A maskable icon avoids that by keeping the important artwork inside a central safe zone - roughly the inner 80% of the canvas - with the background filling the rest. You declare it in the manifest with "purpose": "maskable".
- Size: 512x512.
- Safe zone: keep the logo within the central circle (about an 80px margin on a 512 canvas).
- Filled background: a transparent canvas leaves a gap when masked; use a solid color.
Generate a correct one on the maskable icon page.
You usually need both, plus a standard icon
Keep a standard "any" purpose 192 and 512 for surfaces that do not mask, add the maskable 512 for Android, and the 180 Apple touch icon for iOS. That trio covers home screens on both platforms. The Logo2Favicon generator outputs all of them - opaque Apple icon, safe-zone maskable icon, standard PWA icons, and the manifest - from one logo. For sizes at a glance, keep the icon size cheatsheet handy.
Generate your full icon set free
Drop one logo into the generator and download favicon.ico, every PNG size, the Apple touch icon, Android, PWA, and maskable icons, plus the manifest and HTML snippet - all in your browser, nothing uploaded.
Open the generator