Apple Touch Icon Generator — Free, Fast & Private
The apple-touch-icon is the picture iOS uses when somebody saves your site to their home screen, and it is entirely separate from the favicon in your browser tab. Different file, different size, different markup, different rules about transparency. It has also collected more folklore than almost any other web asset — old tutorials list nine sizes, argue about a keyword called precomposed, and leave people copying tag soup they cannot evaluate. The short version is that one file at 180×180 with one link tag covers every device Apple currently ships, and the tool above produces exactly that file among the rest of the set it renders on your device.
Everything below is the reference the tool cannot give you: what each historical size was for, which of them are still worth serving, the markup verbatim, and the one design decision — transparency — that quietly ruins more home-screen icons than any wrong dimension ever has.
Apple touch icon size reference
| Size | Device | Status | Notes |
|---|---|---|---|
| 180 × 180 | iPhone at @3x | Ship this one | The current standard. Every modern device downscales from it cleanly. |
| 167 × 167 | iPad Pro at @2x | Optional | Only iPad Pro asks by name; it falls back to 180 without complaint. |
| 152 × 152 | iPad and iPad mini at @2x | Optional | Legacy iPad size, covered by the 180 fallback on anything current. |
| 120 × 120 | iPhone at @2x | Legacy | Pre-Plus iPhones. Safe to omit — iOS scales 180 down for these. |
| 76 × 76 | iPad at @1x | Legacy | Non-Retina iPad era. No current device requests it. |
| 57 × 57 | Original iPhone at @1x | Obsolete | The 2007 default size. Nothing in circulation asks for it now. |
Read that table as a history rather than a checklist. Each row was added when Apple shipped a screen density that did not exist before, and each older row stopped mattering when the devices using it left circulation. What survives is the top line. Serving the whole column is not wrong, merely pointless — you are asking every visitor's device to choose between six near-identical pictures when one would have done.
The markup, exactly
One tag in the <head> of every page, pointing at a file in your site root:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Three details in that line repay attention. The rel value is apple-touch-icon and nothing else — no vendor prefix, no -precomposed suffix. The sizes attribute takes the dimensions with a lowercase letter x between them, not the multiplication sign this page uses in prose, and it is what lets iOS choose between multiple declarations if you ever provide more than one. The href should be a root-relative path, because iOS also looks for /apple-touch-icon.png at the site root by convention when no tag is present at all. Putting the file exactly there means the convention and the declaration agree, and a page that somehow ships without the tag still works.
If you do decide to serve extra sizes, repeat the tag with a different sizes value and a different filename. Do not put multiple sizes in one attribute and do not rely on ordering; iOS reads the declarations and picks the nearest match at or above the density it needs.
Why 180×180 became the only number that matters
Home-screen icons are laid out at 60 points square, and points are a density-independent unit. On the original iPhone one point was one pixel, hence 57×57 with a little padding baked in. Retina doubled it to 120, and the @3x displays introduced with the iPhone 6 Plus tripled it to 180. Since the largest number in that progression covers every smaller one by downscaling, and since iOS resamples cleanly, 180 is simply the top of the ladder — anything below it is a picture iOS could have derived for itself.
The iPad numbers exist because iPad lays out at 76 points rather than 60, giving 152 at @2x and 167 for the iPad Pro. Both are close enough to 180 that a downscale is imperceptible on a screen at arm's length, which is why Apple's own guidance stopped insisting on them. If your site is a serious iPad web app and you want pixel-exact rendering, add the 167 and 152 declarations. Otherwise the one file is the whole job, and the honest answer to “what size should my apple touch icon be” is 180 by 180 pixels.
What “precomposed” meant, and why it is obsolete
Early iOS did not just place your icon on the home screen — it decorated it. The system applied rounded corners, a drop shadow, and a glossy highlight across the top half that made every icon look like a wet jellybean. Designers who had already drawn those effects into their artwork ended up with the treatment applied twice, so Apple added an opt-out: name the relationship apple-touch-icon-precomposed and iOS would take your image exactly as supplied, gloss-free. The word means “the effects are already composed into this file, leave it alone”.
iOS 7 removed the gloss entirely in 2013, and with it the reason for the opt-out. Modern iOS applies only the rounded-corner mask, and it applies that mask whether or not you use the precomposed spelling — you cannot opt out of the corner radius, and you should not try to fake it by rounding the corners of your PNG yourself, because the system mask has changed shape over the years and a hand-rounded icon eventually looks subtly wrong against its neighbours. Use the plain apple-touch-icon spelling, supply a full-bleed square, and let iOS crop it. Any tutorial still telling you to ship both spellings is more than a decade out of date.
Transparency is the mistake that actually costs you
Almost every logo file in existence is a transparent PNG, and handing that straight to iOS is the single most common way a home-screen icon goes wrong. Home-screen icons are not composited over the wallpaper — iOS flattens them onto an opaque backing first. Historically that backing has been black, and depending on version and context it can be white instead, so the same transparent icon can appear as a dark tile on one device and a pale one on another. A logo drawn in dark grey vanishes on the black variant; a white wordmark vanishes on the pale one. Neither failure shows up in your design tool, where the transparency simply reads as “no background”.
The fix is to decide the background yourself. Give the icon an opaque square of your brand colour, or white, or whatever the mark is designed to sit on, and fill the frame edge to edge — remember iOS rounds the corners, so anything you place in the outer few pixels gets clipped. Keep the mark centred with roughly ten percent breathing room, and treat the icon as a badge rather than a shrunken logo lockup: a home-screen tile is about the size of a fingertip, and a two-word wordmark is unreadable at that scale. If your source has an unwanted backdrop instead of the one you want, the background remover will clear it so you can place a deliberate colour behind it.
What iOS does with the icon once it has it
When a visitor taps Share and then Add to Home Screen, Safari fetches your apple-touch-icon, masks it with the system corner radius, and places it beside real applications with a label taken from your page title — worth keeping short, because iOS truncates it aggressively. Tapping the result opens your site, and if you have declared a web app manifest with a standalone display mode it opens without browser chrome, which is why the icon suddenly has to hold its own against native apps.
Two behaviours catch people out. The icon is cached hard, so replacing the file does not refresh a shortcut somebody already created — testing means deleting the shortcut and adding it again. And Android ignores this file completely: it reads the icons array in your web app manifest instead, which wants 192px and 512px PNGs. Covering both platforms means shipping the apple-touch-icon and the manifest pair, which is precisely the set the favicon generator writes in one pass along with the .ico and the head snippet.