Apple touch icon

Apple calls these Home Screen shortcuts Web Clips. Without a touch icon, iOS makes one from a screenshot of your page, which rarely looks good at that size.

How to add an Apple touch icon in HTML

1. Make a square PNG, 180 × 180 pixels, with a background colour that fills the whole square. The generator below does this for you.
2. Name it apple-touch-icon.png and upload it to the root folder of your site, next to your home page.
3. Add this line inside the <head> of every page, or in the shared layout your pages use:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

1. Open your site in Safari on an iPhone, tap the share button and choose Add to Home Screen to check it.

Apple's guide also says iOS looks in your site's root folder for a file called apple-touch-icon.png when the page has no tag. So step 3 is a safety net rather than a must, but MDN recommends linking the icon anyway in case those conventions change.

Why the icon needs a solid background

Chrome's Lighthouse guidance lists three things for a good touch icon: 180 or 192 pixels, a valid path, and a background that isn't transparent. So the generator always draws the Apple touch icon as a full, solid square in your background colour, even if you made your other favicons transparent or round.

Which size to use

Use 180 × 180 pixels. Chrome's Lighthouse guidance suggests 180 or 192 pixels. Apple's own example lists three sizes: 152 pixels for iPad, 167 for iPad with a Retina screen and 180 for iPhone with a Retina screen.

You don't need all three. Apple says iOS uses the most appropriate size for the device. If none matches, it uses the smallest icon that's larger than that size, and if none is larger, it uses the biggest one there is. A single 180 pixel icon is larger than both iPad sizes, so it scales down cleanly everywhere.

If you do add several, give each its own sizes attribute:

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

What apple-touch-icon-precomposed means

Early versions of iOS added a glossy shine and shadow to Home Screen icons. Naming the file apple-touch-icon-precomposed.png, or using rel="apple-touch-icon-precomposed", told them to leave your icon alone. Apple notes that Safari on iOS 7 and later doesn't add those effects at all.

So precomposed has no job left. Chrome's documentation calls it obsolete since iOS 7 and says to use rel="apple-touch-icon" instead. If an old template still has the precomposed tag, you can replace it with the plain one. Google Search still reads both when it looks for your favicon, so nothing breaks either way.

"No apple-touch-icon is specified"

Site checkers show this warning, or Lighthouse's version, "Does not provide a valid apple-touch-icon", when your page's head has no rel="apple-touch-icon" tag. Fix it by adding the tag from the steps above.

Two things to know about the check:

• Lighthouse only looks for the tag. It doesn't check that the file exists or that it's the right size, so open the image's address in a browser to make sure it loads.
• A precomposed tag passes the check, but the plain apple-touch-icon is the one to use.

Where the icon shows up

The touch icon appears on the Home Screen when someone adds your site from Safari's share menu. Google Search also accepts apple-touch-icon and apple-touch-icon-precomposed links when it picks the favicon shown next to your site in results, alongside the usual rel="icon". MDN notes that iOS doesn't use rel="icon" for Web Clips, which is why sites need both kinds of tag.

The zip from the generator has the touch icon, favicon.ico and PNG favicons for browser tabs, and 192 and 512 pixel icons with a web app manifest for Android. It also has every tag you need for your head, ready to paste. For the full list of sizes, see favicon specs. To add all the tags at once, see how to add a site icon in HTML.