Мар 17, 2014 0

Правильное исполнение favicon

Как же правильно подготовить favicon для вашего сайта? Давно не секрет, что обычный favicon.ico имеет размер 16*16 пикселей..
Недавно я столкнулся с интересным фактом на iPad’е при добавление своего сайта в избранное Safari, оказывается для iOS необходимо под разные устройства изготавливать свои favicon’ы, иначе место нашей иконки мы получим серый компас.
apple-touch-icon
Для решения этой проблемы нам придется нарисовать несколько разных по разрешению картинок. С разрешениями можно ознакомиться на сайте для разработчиков iOS. Ссылка на материал.
Чтобы вас не утомлять изучением, понадобятся картинки 60×60, 76×76, 120×120, 152×152.. на начало 2014 года, данные разрешения актуальны.
После того как мы нарисовали их:

Кстати, есть сайтик, который быстро делает иконки для iOS в стиле шестой версии. Ссылка на сайт. В стиль седьмой версии пока ручками или пусть автоматом делает…
В <head> … </head > нам придется добавить код:

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">

Получаем такой результат:
apple-touch-icon

Если же вы не хотите, чтобы iOS сама превращала в стекло и закругляла углы, то необходимо рисовать готовые значки:

и использовать такой код:

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">

Вот такие небольшие хитрости нам открываются.

Оставить комментарий

  • Подтвердите, что Вы не бот — выберите человечка с поднятой рукой: