Question

I have tested my site with Woorank and shows a warning about missing of the Apple Icon.

I have searched but I’m not sure how to include this icon, I have found this code

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

Must I include these lines in the head in the same way of the standard favicon? (My website is in HTML5)

What is the resolution of the first images in these lines “apple-touch-iphone.png”

Answer 1

The smallest icon should be 57×57 pixel.

Be aware, that the “-precomposed” states, that the linked icon file is already shiny and in 3D. If you leave out “-precomposed”, iOS will add a 3D brilliance effect to the image.

And yes, of course do you need to insert the link-tags to the head.

Example for a complete icon set:

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico">
<link rel="apple-touch-icon" type="image/png" href="icon.57.png"><!-- iPhone -->
<link rel="apple-touch-icon" type="image/png" sizes="72x72" href="icon.72.png"><!-- iPad -->
<link rel="apple-touch-icon" type="image/png" sizes="114x114" href="icon.114.png"><!-- iPhone4 -->
<link rel="icon" type="image/png" href="icon.114.png"><!-- Opera Speed Dial, at least 144×114 px -->

Docs on Apple iOS icons: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/ConfiguringWebApplications/ConfiguringWebApplications.html

Docs on Opera Speed Dial icon: http://dev.opera.com/articles/view/opera-speed-dial-enhancements/