Apple devices let users set up a quick link to websites by adding an icon to their home screens using the + at the bottom of the browser. By default an icon is created for you using a screen shot of your website but if you want it to display a nice custom icon instead here’s how.
Create your Apple icon by making a 57 x 57 graphic and uploading it to the images folder on your server. Then insert the following code into your header, pointing it to your graphic:
<link rel=”apple-touch-icon” href=”../images/your-apple-icon.png” />
1 Comment
Much like favicon.ico with desktop browsers, mobile Safari will search for that filename in the root directory automatically so if you can upload it there then you don’t need the link tag at all.
Also, you can rename to “apple-touch-icon-precomposed.png” to the end of the filename to not have iOS auto-render the shiny web 2.0 style.
And try using 114×114 for retina display.