Tag: icons

Weeknotes 2020.09.11

It’s been a cold, rainy week here in Manhattan, Kansas. I don’t really like cold weather at all, and I’m somewhat dreading this winter with everything indoors still being somewhat risky. I think this week was especially bad because the temperature dropped so drastically so quickly. Luckily it looks like we have more warm weather ahead.

Continue reading Weeknotes 2020.09.11

Touch Icon Sketch Template

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">

Download Template