What is apple-touch-icon, and what size should it be?
The apple-touch-icon is the picture iPhones and iPads use when someone adds your site to the home screen. ICON by Zaweba writes it at 180 by 180 pixels.
The apple-touch-icon is a PNG that an iPhone or iPad shows when someone adds your website to their home screen, so it is your site's app-style icon on Apple devices. The size to make is 180 by 180 pixels. ICON by Zaweba writes it for you as apple-touch-icon.png at exactly that size, as part of a full favicon set, together with the HTML tag that tells browsers where it is.
It is one of the files people forget, because desktop browsers get along fine with favicon.ico. Then someone saves the site to their phone and gets a blurry screenshot of the page, or a plain letter, instead of the logo.
Why the touch icon exists
A browser tab icon is tiny. A home screen icon sits alongside apps and is shown much bigger, so a 16 or 32 pixel favicon scaled up looks poor. Apple devices therefore look for a separate, larger picture, and the convention is a file named apple-touch-icon.png, pointed to by a link tag in the page's head.
Android has its own equivalent, which comes from the web manifest rather than from this tag, and Windows has tiles. A complete favicon set covers all three, and that is the approach ICON takes.
Making one with ICON by Zaweba
Load your picture into ICON. A square PNG of 512 pixels or more is the best start, so the large icons stay crisp. If the picture is not square, choose Contain to pad it or Cover to fill the square and crop the centre.
Go to the website favicon set and choose a folder. ICON writes the standard set into it: favicon.ico holding 16, 32 and 48 pixels, favicon PNGs at 16, 32, 48 and 96, apple-touch-icon.png at 180, android-chrome icons at 192 and 512, mstile-150x150 for Windows, site.webmanifest, browserconfig.xml and head-tags.html. You can tick which outputs you want, so if you only need the Apple icon you can have just that, although the full set is what most sites should use.
The head tags are the other half. ICON shows a snippet of <link> and <meta> tags on screen with a Copy button, and saves the same in head-tags.html. Paste it into the head of your pages and upload the files to the root of your site, and the touch icon is in place.
Getting a good touch icon
A home screen icon is shown fairly large, so detail that vanished in the browser tab is visible again. That is good news for a logo with fine lines, and bad news for a picture that was already soft. Start big.
Think about the background too. On a home screen the icon sits among other app icons, and a transparent logo floating on nothing can look lost. A logo on a solid colour square often looks more at home there. If your picture has transparency and you want a coloured square for the touch icon, make that version of the artwork first and load it, since ICON fits the picture you give it rather than adding a background.
After uploading, test on a real device if you can. Open the site, add it to the home screen, and look at the result. Devices can hold on to an old icon for a while, so if you are replacing one, give it time or try from a different device.
How it fits the rest of the set
The touch icon is one file among several, and they all come from the same loaded picture in one go, so they match. The theme and background colours you give for the web manifest and browserconfig do not change the touch icon itself, but they do colour the surroundings on Android and Windows. Everything is made on your PC, offline, with no upload and no account.
So, in short: 180 by 180, PNG, named apple-touch-icon.png, with a link tag in the head. ICON by Zaweba does all four parts for you.
