Link

apple-touch-icon

Provides an icon that Apple devices can use when someone saves the site to their Home Screen or installs it as a web app.

Code examples

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

Provides a 180 by 180 pixel icon and declares its actual size.

<link rel="apple-touch-icon" sizes="180x180">

Has no href, so Safari has no icon to fetch.

01
Declare the real size
Set sizes to the bitmap icon's pixel dimensions. Safari can choose among multiple declared sizes for different contexts.
02
Keep the link for Safari
Safari may use apple-touch-icon when a web app manifest has no suitable high resolution icon. Do not hide the link with user agent detection.
03
Use a PNG file
Apple documents apple-touch-icon as a PNG image. Its documentation does not describe SVG icons for this link, so do not rely on an SVG file here.
04
Pick sizes for each device
Apple's examples use 180 by 180 pixels for iPhone, and 152 by 152 or 167 by 167 pixels for iPad. Add one link for each size you provide.
05
Know the root fallback
If the page declares no icon link, Safari looks for apple-touch-icon.png in the site root. The link element makes the file location explicit.