O favicon замолвим еще раз словечко…

Как вставить favicon на свой сайт? Вопрос на который уже тысячу раз отвечали и который упорно задают снова и снова. Маленький логотипчик вашего сайта в браузерной строке, в закладках и на страницах выдачи поисковых систем не дает спокойно спать многочисленным владельцам сайтов. Особенно новичкам 🙂 Так что, давайте подробно обсудим сегодня и постараемся в очередной раз этот вопрос закрыть.

Итак — favicon это изображение которое может показываться перед адресной строкой вашего, в закладках и вкладках браузеров, в списке выдачи поисковых систем. В общем, этакий дополнительный логотип вашего сайта. Классический favicon имеет размер 16 на 16 пикселов и 32 на 32 для Retina экранов.

Создать favicon можно самому в любом графическом редакторе или используйте удобнейший онлайн сервис — favicon.ru Создавать там иконки — сплошное удовольствие. С помощью не сложных инструментов рисуем и сразу видим результат внизу, под картинкой. Закончили — сохранили себе на локальный компьютер. Совсем кривые руки? Тогда преобразуйте favicon из другой, уже готовой картинки или просто закажите исполнение профессиональному дизайнеру.

Еще один не плохой вариант — использовать другой онлайн редактор или даже скорее — генератор иконок  xiconeditor.com Он малость посложнее будет, но разобраться тоже можно достаточно быстро.

Вставляем favicon на свой WordPress сайт

Теперь пришла пора нашу картинку в формате .ICO вставить на WordPress сайт. Для начала закачайте ваш favicon в корневую директорию сайта на сервер. Путь к иконке должен выглядеть как, например — http://mysite.ru/favicon.ico

С появлением в нашей поспешной жизни многочисленных мобильных девайсов, да еще со всякими модными Retina — дисплеями, требования к favicon тоже несколько выросли. Если вы хотите, что бы ваша иконка корректно отображалась на всех мыслимых устройствах, придется добавить еще несколько вариантов в формате .PNG с размерами:

144 × 144 пикс. на широкоформатных retina-экранов iPhone и iPad
72 × 72 пикс. на iPad‘ов старого поколения
57 × 57 пикс. на прочие смартфоны (Android)

Далее в файл header.php вашей установленной темы добавляем следующий код сразу после открывающего тега HEAD

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

Для всей этой процедуры используем текстовый редактор Notepad++ и сохраняем файл header.php в кодировке UTF-8 без BOM.

При создании обычного favicon размером 16 на 16, помните, что детали такой иконки должны быть крупными. Мельчить на стоит, иначе просто невозможно ничего будет разглядеть. А вот при рисовании иконок 144 на 144, уже можно и развернуться, хотя в идеале, это должна быть все таки, одна и та же картинка во всех размерах.

Использование плагинов

Те у кого — «опятьничегонеполучилось», могут воспользоваться специальными WordPress плагинами сильно упрощающими внедрение favicon.

All In One Favicon — самый популярный плагин по обустройству favicon на сайте. Не смотря на простое предназначение, имеет довольно обширное меню настроек, где вы можете загрузить свои иконки не только в формате .ICO но и в GIF, PNG и Apple Touch Icon. Кроме обычного favicon можно прикрепить еще отдельную иконку для отображения при работе в админке.

Captain Favicon — наверное самый простой способ загрузить и использовать favicon у себя на сайте. Установили, активировали, перешли в настройки плагина, загрузили там иконку сразу размером 32 на 32 пиксела и все заработало.

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

Искренне надеюсь, что эта статья о том — как создать и вставить favicon на свой сайт, поможет всем кто еще не справился с этими маленькими, но такими популярными иконками.