Skip to content

Как сделать правильный favicon

Привет, друзья! На многих блогах замечал статью на тему создания favicon’а. Но все они охватывают лишь верхушку айсберга, но ведь у айсберга большая часть под водой. Я пытался раскрыть эту скрытую часть в комментариях, но разве возможно все это описать в коротком сообщении? Поэтому я и посвящаю этот урок рассказу о создании правильного favicon’а.

Стандартный favicon

Favicon — это важная часть вашего веб-сайта, и это буквально первое, что пользователь видит при взгляде на адресную строку браузера. Еще значок используется в различных других местах, например, вкладки и закладки.

Простой favicon — это иконка размером 16 на 16 пикселей. Но не забывайте о экранах на Apple-устройствах. Так как MacBook, iMac и другие настольные компьютеры Apple используют Retina-дисплеи, то под них даже верстают чуть по другому. Ну верстку мы трогать не будем, но дело в том, чтобы для правильного отображения на Retina экране, нам надо иметь увеличенную вдвое картинку. То есть для Retina размер favicon’а будет 32 на 32 пикселя.

Для начала создайте иконку. Если вы будете использовать Photoshop (а в нем нет поддержки формата .ico), то вам потребуется создать 2 варианта иконки (16х16 и 32х32) в формате .png и создать отдельный файл favicon.ico через генератор иконок (http://xiconeditor.com/). Там заполняете только два размера 16х16 и 32х32 (импортируя ваши .png картинки).

favicon2

В Gimp будет проще, т.к. он поддерживает формат .ico. Просто на первом нижнем слое рисуете один вариант 16х16, а на втором слое 32х32. А потом сохраняете это как отдельный файл favicon.ico.

Сенсорные иконки

В добавок, вы должны создать еще несколько размеров иконок для смартфонов. Вам понадобятся еще 3 иконки размерами:

  • 144 x 144 пикселя для широкоформатных retina-экранов iPhone и iPad
  • 72 x 72 пикселя для iPad‘ов прошлого поколения
  • 57 x 57 пикселя для других смартфонов, к примеру на Android

Тут вам есть пространство, для творчества. Рисуйте эти иконки четче, красивее, детальней. Их вы спокойно сохраняйте в формате .png.

Подключение иконок

<!-- Favicon for Desctops -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch- icon-precomposed.png">

Так как iOS до версии 4.2 игнорировал атрибут size, то следует в названии иконки необходимо указать ее размер. Обратите внимание, что вам нужно указать различные размеры в этом же порядке, для максимальной совместимости.

Заключение

Теперь ваш favicon будет великолепно выглядеть на любом устройстве, как на настольном компьютере, так и на IOS или Android, если пользователь добавит ссылку на ваш сайт к себе на главный экран!