What an Apple touch icon is
When a visitor taps Share and then Add to Home Screen in Safari, iOS uses a special icon for your site. That icon is the Apple touch icon. Without one, the system takes a small screenshot of the page, which rarely looks good.
The rules
- Size: 180 by 180 pixels is the size to supply. Devices scale it down for older screens, so one file is enough.
- No transparency: iOS fills transparent areas with black. This tool therefore always gives the icon a solid background, white by default, and you can choose another color.
- Square corners: do not round the corners yourself. iOS cuts the rounded shape, so the icon is kept square.
- Padding: leave a little space around your logo, so that the rounded corners do not cut into it.
The preview shows the icon with the corners rounded the way iOS shows it.
How to add it
Save the file as apple-touch-icon.png in the root of your site. Safari looks for that name by itself, but it is best to add the link tag to the head of your pages as well:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Other sizes
If you tick Also make 120, 152 and 167 pixel sizes, you also get files for older iPhones and for iPads, in a ZIP together with the 180 pixel icon. Most sites do not need them.
Nothing is uploaded, because the icon is drawn in your browser. For the rest of the icons your site needs, use the favicon generator or favicon from image. See how the icon looks on a phone with the favicon preview, and read the favicon size guide for what each file is for.