Мар 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 > нам придется добавить код:

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

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

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

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

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

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