Appletouchicon

Appletouchicon refers to the Apple touch icon, a square image used by Apple’s iOS Safari to represent a webpage when a user saves the page to the home screen or adds it as a bookmark. The icon helps the page look like a native app when launched from the device’s home screen.

Implementation is done in the HTML head with a link element. The simplest form is: <link rel="apple-touch-icon" href="apple-touch-icon.png">. To support different devices, developers can provide multiple icons using the sizes attribute, for example: <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180.png">, along with 152x152, 167x167, 114x114, and 57x57 variants. Safari will select the best match for the device’s screen resolution. It is common to place these files in a web-visible directory and reference them with an absolute or relative path.

Historically there was a variant called apple-touch-icon-precomposed.png to disable the system gloss, but modern iOS renders the icon's appearance itself, and the precomposed form is rarely needed.

Best practices emphasize using square PNG images with transparent or solid backgrounds as appropriate, avoiding complex effects that may not render well at smaller sizes. Providing a set of sizes improves appearance across iPhone, iPad, and iPad Pro devices. Note that apple-touch-icon is primarily supported by iOS devices; other platforms may ignore these tags and rely on standard favicons or manifest files for home-screen shortcuts.