The Apple Touch icon is what shows up when a visitor adds your site to their iPhone home screen. iOS ignores the web manifest for this particular case and applies its own rules. They fit in three points.
One size only: 180×180
180×180 pixels is what recent iPhones expect, and it is also the largest size ever requested. Since iOS knows how to scale down, a single 180×180 icon covers every device, iPads included.
Older recommendations listed eight files, from 57×57 to 152×152, each with its own sizes attribute. Those variants no longer serve a purpose: they bloat your HTML and trigger extra requests for an identical result.
The file must be a PNG. iOS reads neither SVG nor WebP for this icon, and a JPEG ruins the crisp edges of flat artwork.
No transparency, ever
This is the most common and most visible mistake. iOS does not keep the alpha channel of a home screen icon: it fills every transparent area with black. A dark logo on a transparent background therefore becomes a black square on black.
The fix is to flatten the icon onto an opaque background before exporting. Pick a brand color, or plain white if your symbol is colorful, and leave roughly 10% padding around the artwork so it can breathe.
Do not round the corners yourself, though: iOS applies its own rounded mask on top. An already-rounded file gives you a double radius, with ugly corners.
The tag to paste
One line in the head of your pages is enough: link rel="apple-touch-icon" href="/apple-touch-icon.png". The sizes attribute is optional when you ship a single file.
Optionally add meta name="apple-mobile-web-app-title" content="Your brand" to control the label shown under the icon. Without that tag iOS falls back to the page title, which is usually too long and gets truncated.
Also drop a copy of the file at the root as apple-touch-icon.png: like favicon.ico, iOS looks for it at that address when no tag is found.
Why your icon refuses to update
iOS caches the icon aggressively, and a shortcut already sitting on the home screen never changes by itself. To test a new version, delete the shortcut, clear Safari's data, then add the site again.
If the icon stays missing, check three things: the file answers 200 and not 404, it is served with the image/png content type, and it is not blocked by a robots.txt rule or by authentication.
The LFFavicon checker tests exactly these cases against any public URL and shows the icon it actually fetched.