When did touch icons get so complicated? It had been a while since I last made a touch icon, so when I recently wanted to add one to a project, I decided I better double check the sizes of icons that I needed to make.
I remembered reading a useful article about touch icons in the past called “Everything you always wanted to know about touch icons”, which I was able to find again. I had thought there were only two sizes of icons that I needed, but I was surprised to find that the article had been updated with a recommendation to produce nine icons to account for various versions of iOS and Android.
In order to make this easier on myself (both now and in the future), I decided to make a handy Sketch template that I’ve linked to below. The final code needed in the HTML <head> should look like this:
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">