Добавление иконки Apple на сайт

Question

Я проверил свой сайт с помощью Woorank и выдает предупреждение об отсутствии значка Apple.

Я искал, но я не уверен, как включить этот значок, я нашел этот код

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

Должен ли я включить эти строки в голову так же, как в стандартном фавиконе? (Мой сайт в HTML5)

Каково разрешение первых изображений в этих строках "apple-touch-iphone.png"

Answer 1

Самый маленький значок должен быть 57×57 пикселей.

Имейте в виду, что "-представленный" утверждает, что связанный файл значка уже блестящий и в 3D. Если вы укажете "-представлено", iOS добавит 3D-эффект блеска к изображению.

И да, конечно, вам нужно вставить linkтеги к head,

Пример для полного набора иконок:

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

Документы на значки Apple iOS: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/ConfiguringWebApplications/ConfiguringWebApplications.html

Документы на значок быстрого набора Opera: http://dev.opera.com/articles/view/opera-speed-dial-enhancements/