WP ЭкспрессПрочие

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

Для всей этой процедуры используем текстовый редактор 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 можно прикрепить еще отдельную иконку для отображения при работе в админке.

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

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

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

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

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

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

Метки

Related Articles

1 thought on “O favicon замолвим еще раз словечко…”

  1. Мой фавикон долго не отображался в выдаче яндекса, не было значка рядом с сайтом. Хотя в остальных местах, где должен быть, везде отображался. Не отображался до тех пор пока не поставил фавикон размером 16х16 вместо 32х32. Вот такая информация теперь grib-nik.com.ua с фавиконом.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Close

Обнаружен Adblock

Уважайте труд вебмастера. Пожалуйста, отключите свой блокировщик рекламы.