*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*
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:
<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 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.[^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:
-
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!
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].
Top comments (0)