Apple touch icons and phone home screen icons

To control the icon on an iPhone or iPad home screen, supply a PNG file and name it in an apple-touch-icon link tag. Without one, the phone does something plainer. Wikipedia notes that if no custom icon is provided, a thumbnail of the web page is put on the home screen instead¹.

What you need first

• A square PNG image. Plain shapes work best at small sizes.
• Upload access to your site's root folder.
• Access to your page head, if you want to use link tags.
• A phone or tablet to test on, if you can borrow one.

The simplest method

Apple's documentation says to place a PNG icon file in the root document folder, called apple-touch-icon.png, to set an icon for the whole website². The root document folder is the top level of your site. That one file covers every page.

Here's what Apple calls these saved links: Web Clips, represented by an icon².

The link tag method

For a single page, Apple shows a link element like this². It replaces the website icon on that page:

<link rel="apple-touch-icon" href="/custom_icon.png">

Swap custom_icon.png for your own file name. Google also lists apple-touch-icon among the rel values it supports for favicons, describing it as an iOS-friendly icon that represents your site³.

Several sizes

Apple's page shows a sizes attribute on each link element when you want different icons for different devices². Its examples use 152x152 for iPad, 180x180 for iPhone with a retina screen, and 167x167 for iPad with a retina screen². A retina screen is one with a very high pixel density.

MDN says the sizes attribute indicates the icon size, and that size and type give the browser useful hints to choose the most appropriate icon⁴. Wikipedia lists 180×180 as a recommended size for iPhones¹. Apple points readers to its Human Interface Guidelines for the current sizes, so check those too².

If no icon matches the recommended size, Apple's page says the smallest icon larger than the recommended size is used. If none is larger, the largest icon is used². That means a single larger file can still be picked on a device with no exact match.

The title under the icon

On iOS you can set a title for the launch icon. By default the page's title tag is used². Apple's meta tag for a different title is apple-mobile-web-app-title.

What's different from a tab icon

• A tab favicon can be an ICO, PNG or SVG file. The home screen icon Apple describes is a PNG².
• It's a separate file and a separate tag. A favicon link tag doesn't set it. The tab icon guide cover the other kind.
• Apple's page says its extra iOS settings are ignored by other platforms².

Check it

Open your site on an iPhone or iPad in Safari and use the share menu to add it to the Home screen. The icon shown there should be yours. If the phone still shows an old icon, the same stored-copy logic applies as on the stale icon page.

For what a favicon is and where else it appears, see What a favicon is and where it shows up.