Apple touch icon size
An Apple touch icon should be 180 × 180 pixels, saved as a PNG with a solid background. Make yours here: the zip has apple-touch-icon.png plus every other favicon size.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
At a glance
- Sizes in Apple's example
- 152 × 152 (iPad), 167 × 167 (iPad Retina) and 180 × 180 (iPhone Retina)
- Source: developer.apple.com, checked 2026-11
- When a size is missing
- iOS uses the smallest icon larger than the one it wants, or else the largest one there is
- Source: developer.apple.com, checked 2026-11
- Without any icon
- iOS makes one from a screenshot of the page
- Source: developer.chrome.com, checked 2026-11
Give your page its own icon
An uploaded site at yourname.liite.site can use these files as they are: drop them in your site's folder next to index.html. Liite pages come with a share image and a QR code of their own.
Apple touch icon size: what to know
This page starts the favicon generator for this case. For every option and how to use it, see the favicon generator.
Why one 180 px icon is enough
Apple's documentation shows separate 152, 167 and 180 px icons, but it also says iOS picks the smallest icon that's larger than the size it needs. A single 180 px file is larger than both iPad sizes, so iOS scales it down and it still looks sharp.
This tool draws the Apple touch icon as a full, solid square in your background colour, whatever shape you pick for the other icons, because Chrome's guidance says its background shouldn't be transparent.
Questions
How do I add the Apple touch icon to my site?
Put apple-touch-icon.png in your site's root folder and add <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> to the head of your pages. The tool gives you that tag with the others.
Can an Apple touch icon be transparent?
It shouldn't be. Chrome's Lighthouse guidance says to use a solid background, so this tool fills it with your background colour even when the other icons are transparent.