Apple Touch Icon Generator

Apple Touch Icon: the icon iOS uses on the home screen

The Apple Touch Icon is the image iOS Safari (and now Chrome and other iOS browsers) uses when the user taps Share > Add to Home Screen. It was introduced in iOS 1 in 2007 — back when there were no PWAs, no manifest.json, and Apple needed a way to let websites behave like apps when bookmarked. Without an Apple Touch Icon, iOS generates a thumbnail from the page screenshot, which is almost always blurry, off-center, and useless as a brand mark. Adding a single 180×180 PNG fixes 95% of the cases on modern iPhones.

Sizes through history

Apple has shipped many resolutions as screens evolved. You do not have to provide all of them — iOS scales any provided icon — but knowing the chronology helps decide how many variants to ship:

• 57×57 — original iPhone (2007), non-retina.
• 72×72 — original iPad (2010).
• 114×114 — iPhone 4 retina (2010).
• 120×120 — iPhone 5 / 5S / SE (1st gen).
• 144×144 — iPad retina (3rd gen).
• 152×152 — iPad Air / mini retina.
• 167×167 — iPad Pro.
• 180×180 — iPhone 6 Plus retina and all iPhones from 6s onward — the current default.

In 2026 the pragmatic choice is shipping a single 180×180 PNG. It downscales cleanly to the smaller resolutions and iOS handles the rest. Only enterprise sites with strict pixel-perfect branding bother shipping all variants.

HTML markup

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">

iOS also automatically requests /apple-touch-icon.png and /apple-touch-icon-precomposed.png at the site root, so placing the file there is a useful fallback even if you forget the <link>.

Apple applies the visual treatment for you

iOS automatically clips the icon to a rounded square with roughly 20% corner radius, the same shape used by every native app icon. You should ship a full square image edge to edge — do not pre-round the corners yourself, or iOS will round them again and you will see a visible inner square. In iOS versions before 7, Apple also added a glossy shine overlay on top; rel="apple-touch-icon-precomposed" was the workaround to disable it. Both the shine and the precomposed flag are deprecated since iOS 7 (2013), so just use plain apple-touch-icon.

Apple does not support transparency well. PNG alpha channels render against an opaque black background on the home screen, which usually looks broken. Always export with a solid background color that matches your brand, even if your favicon and PWA icons are transparent.

Apple Touch Icon vs favicon vs PWA icon

• Favicon — 16×16 to 32×32, shown in the browser tab and URL bar. Supports SVG and transparency. Optimized for tiny rendering.
• Apple Touch Icon — 180×180 PNG, shown on the iOS home screen. Opaque background, no transparency, no SVG.
• PWA icon (manifest) — 192×192 and 512×512 PNG, used by Android, ChromeOS, and Windows when the PWA is installed. Supports maskable purpose.

These three are not interchangeable. Each operating system reads its own slot. A complete site ships all three.

File format and compression

Use PNG-24 for solid backgrounds with crisp text or geometric shapes, or JPEG if the icon is a photograph (rare). SVG is not supported — Apple only renders PNG and JPEG in the apple-touch-icon slot. After export, run the file through oxipng or pngquant to shave 60 to 80% off the file size with no visible quality loss. A well-compressed 180×180 PNG should fit in 6 to 15 KB.

FAQ

Do I really need every size? No. Shipping a single 180×180 PNG covers about 95% of devices in use today, including every iPhone since 2014. The smaller sizes are downscaled automatically with acceptable quality.

Can I use an SVG? No. Apple's home screen only accepts raster images (PNG or JPEG) for the apple-touch-icon slot. SVG works for favicons, not for this.

Does it change in iOS dark mode? No. The home screen icon is the same in light and dark mode — iOS does not swap apple-touch-icon variants. Only the favicon, via the prefers-color-scheme media query inside an SVG, can adapt to dark mode in the browser tab.

Why does Apple add black borders to my transparent PNG? Because apple-touch-icon does not honor alpha properly. Re-export with a solid background color matching your brand.

Is apple-touch-icon-precomposed still needed? No. It was a workaround for the iOS 6 gloss effect, which Apple removed in iOS 7 (2013). Plain apple-touch-icon is sufficient on every modern device.