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?

Answer 1

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