Using different resolution apple-touch-icons?

Question

At the moment I am using following tag to link apple-touch-icon.png to my website

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

It has a resolution of 57x57 px. However, now I would like to support a more high resolution icon for users of iphones and ipads that have retina displays. How can that be achieved. I tried googling this issue but nothing useful came up. What would you suggest?

http://theksmith.com/technology/howto-website-icons-browsersdevices-favicon-apple-touch-icon-etc/ — Billy Moat, Jan 22 '13 at 17:21

score 1 · Accepted Answer · edited Jul 02 '17 at 05:22

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

Using different resolution apple-touch-icons?

1 Answers1