Zero byte apple-touch-icon markup
Tags: webdev, performance, webperf, html
Published: 2023-01-30 18:20:40

*This is part of a series of pieces about code you can safely remove from the `<head>` tags of your website. 

You can read the rest here: [getoutofmyhead.dev](https://getoutofmyhead.dev/)*

---

An `apple-touch-icon` is an image used on `iOS` devices when a website is added to the homescreen. 

Different `iOS` devices display icons at different sizes, and so it's common to see something like this:


```html
<link rel="apple-touch-icon" sizes="152x152" href="https://assets.guim.co.uk/images/favicons/fee5e2d638d1c35f6d501fa397e53329/152x152.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="https://assets.guim.co.uk/images/favicons/1fe70b29879674433702d5266abcb0d4/144x144.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="https://assets.guim.co.uk/images/favicons/c58143bd2a5b5426b6256cd90ba6eb47/120x120.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="https://assets.guim.co.uk/images/favicons/68cbd5cf267598abd6a026f229ef6b45/114x114.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="https://assets.guim.co.uk/images/favicons/873381bf11d58e20f551905d51575117/72x72.png"/>
<link rel="apple-touch-icon-precomposed" href="https://assets.guim.co.uk/images/favicons/6a2aa0ea5b4b6183e92d0eac49e2f58b/57x57.png"/>
// 830 bytes - from theguardian.co.uk
```

---

## You can remove all this code from your site's `<head>`!

Just like with [favicon.ico](https://getoutofmyhead.dev/favicons) you can **remove these links** and place a single `apple-touch-icon.png` in your root directory.

*e.g. `https://example.com/apple-touch-icon.png`*

[`180x180` is the largest icon size any `iOS` device requires.](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/#app-icon-sizes)[^1] **Other devices will downscale the image to fit.** — and as of writing this — `Apple` use a single `152x152` icon on `apple.com`.

---

### What about other sizes?

If you'd still rather specify a different image for every possible icon size, you can still do that without adding any code to your `<head>`.

You can place multiple `apple-touch-icons` in your site's root directory. [So long as they're named in the following way:](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)

- **default** : `/apple-touch-icon.png`
- **specify size** : `/apple-touch-icon-72x72.png`
- **specify precomposed** : `/apple-touch-icon-precomposed.png`
- **specify size and precomposed** : `/apple-touch-icon-57x57-precomposed.png`

---

### What does precomposed mean?

Older versions of `iOS` added lighting effects to icons on the homescreen. Adding the `precomposed` suffix removed these effects.

It was a way of telling `iOS` that you had already added an effect — which is probably not true.

---

### Android and `apple-touch-icons`

Older versions of `Chrome for Android` used `apple-touch-icons` for adding shortcuts to the homescreen. 
*But* only if a large enough non-apple icon wasn't found.

Some of older versions of `android` would look for `apple-touch-icons` at the site's root. [But this practice ended as it was using `3-4%` of mobile users bandwith!](https://mathiasbynens.be/notes/touch-icons)

If `android` can't find a large icon to use. It will use the site's `favicon.`

So you can even cover that unusual case by following this guide: (Zero byte favicon markup)[https://dev.to/shadowfaxrodeo/zero-byte-favicon-markup-keep-the-favicons-without-any-of-the-markup-47hg].