Установка Favicon на WordPressКак сказал один мой друг, Велкоме! В этом уроке я расскажу, как и где создать оригинальный Favicon и установить его на свой блог. Для тех, кто не знает что такое. Favicon (Значок) – это миниатюрная картинка размером 16×16 пикселей. Это та самая картинка, которую вы видите на вкладке браузера, открывая любой сайт, на котором установлена собственно сама картинка. Для чего она нужна? В какой-то степени у этой маленькой по размерам картинки, по сути, большое значение. Ее можно считать некой визитной карточкой для блога.

Так повелось, что в сети среди блоггеров ей уделяется большое внимание, соответственно она становится, запоминаемой вдвойне. Например, когда я открываю кучу вкладок, я ориентируюсь по Favicon, а не по заголовкам. Так как заголовки могут повторяться в точности до, а вот Favicon у всех почти уникален. Это первый момент, когда она, дальше буду называть ее иконка, становится полезной.

Второй момент это то, что в поисковой выдаче Яндекса эти иконки сайтов отображаются. В какой-то степени она повышает кликабельность. Конечно не столько сильный эффект, как например, от отображения фотографии автора в выдаче Google. Но если постараться и сделать привлекательную иконку, то она станет эффективней вдвойне, как и в повышении кликабельности в выдаче, так и в визуальном запоминании людьми.  С назначением разобрались, теперь поговорим о том, как сделать саму иконку. Кстати вот как выглядит в выдачи Яндекса:

Отображение Favicon в Яндексе

Любителям поработать в программе Adobe PhotoShop, которые возможно подумали, что делают его в фотошопе, скажу, что для работы с форматом .ico, а иконка именно в таком формате, в фотошоп нужно добавить дополнительный плагин. Если честно в этом я не разбирался. Так как нашел простой выход из этой ситуации. В интернете есть отличный сервис, который позволяет из любой картинки сделать Favicon. Для простоты действий советую просто создавать нужную картинку размерами 16×16 пикселей в фотошопе, сохранить в формате .JPG и уже просто поменять формат через этот сервис. Почему именно так? Пробовал я как то ставить этот плагин, но сохраняя в формате .ico, но сайт категорически не воспринимал картинку. Может у меня руки кривые, но все-таки с сервисом проблем меньше.

Создаем простой Favicon

Для начала переходим по адресу favicon.ru и перед нами сразу открывается окно редактора. Инструментов мало, но для создания простенькой иконки подойдет.

Онлайн создание Favicon

Далее рисуем, картинку, которую мы хотим. К сожалению, я рисую плохо и вас научить не смогу, но вот что то такое у меня получилось :):

Сервис создания Favicon бесплатно

Далее, после того как иконка готова, нажмите на кнопку скачать:

Скачать готовый Favicon

После чего мы получаем свою картинку. Кстати прямо на сайте можно посмотреть чуть ниже окна редактора как будет выглядеть иконка непосредственно в браузере:

Создать Favicon онлайн

После того как все действия проделаны у нас будет готовая иконка. Теперь установим его на WordPress. Тут есть одна особенность. Возможно, ваш шаблон не поддерживает установки Favicon. Посмотрите в настройках шаблона, нет ли где этого пункта. Если нет такого пункта, тогда идем в код шаблона. Прежде всего, скопируйте полученный Favicon на хостинг в любой удобное место, а лучше всего в корень сайта. Оперируемый пациент файл Header.php. Откройте этот файл в программе Notepad++ и вставьте туда этот код:

<link rel="icon" href="http://site.ru/путь если не в корне/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://site.ru/путь если не в корне/favicon.ico" type="image/x-icon">

Код вставлять обязательно после открытия тега head:

Установка Favicon на WordPress

Далее файл нужно будет сохранить. Открываем сайт в браузере, если иконка не сменилась, очистите кеш. В выдаче Яндекса она появится не скоро, у меня около месяца, а то и больше не появлялась. Все после этого у вас есть свой оригинальный Favicon. Вдобавок список сервисов, которые позволяют создание иконок:

  • http://www.chami.com/html-kit/services/favicon
  • http://www.webscriptlab.com/favicongenerator.php
  • http://www.favicongenerator.com
  • http://tools.dynamicdrive.com/favicon
  • http://www.dagondesign.com/tools/favicon-generator-tool