DEV Community


Posted on • Originally published at

Zero byte apple-touch-icon markup

*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:*

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=""/>
<link rel="apple-touch-icon" sizes="144x144" href=""/>
<link rel="apple-touch-icon" sizes="120x120" href=""/>
<link rel="apple-touch-icon" sizes="114x114" href=""/>
<link rel="apple-touch-icon" sizes="72x72" href=""/>
<link rel="apple-touch-icon-precomposed" href=""/>
// 830 bytes - from
Enter fullscreen mode Exit fullscreen mode

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.


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

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)[].

Top comments (0)