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

Опубликовано: 01.09.2018

Как вставить 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 пиксела и все заработало.

[vsw id=»52995559″ source=»vimeo» width=»600″ height=»380″ autoplay=»no»]

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

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

rss