Как установить favicon на сайт wordpress

Прежде чем разбираться как установить favicon на сайт wordpress, давайте разберемся что это такое и зачем оно нам нужно…

Как установить favicon на сайт wordpress

Faicon это маленькое 16х16 пикселей (сейчас бывают 32х32 и 48х48) квадратное иображение в формате .ico, которое отображается браузерами на своих вкладках и именно тут он полезнее всего так как если у вас открыто много вкладок и title уже не видно именно по изображению на вкладке пользователь отличит Ваш сайт от других.

Как выбрать favicon

 

Выбор картинки favicon это полностью дело вкуса создателя сайта, если вы, конечно не создаете сайт-бренд. Сайты известных компаий, имеющих узнаваемые логотипы в качстве favicon используют пиктограмму своего лого.

Нам же пока важно чтобы наш favicon был узнаваем, по возможности уникален, красив и по возможности отражал тематику или миссию нашего сайта. И второе условие — favicon должен быть :) потому, что это та мелочь, из которых в тоге и складывается завершенный вид нашего сайта.

Требование к исходному изображению — оно должно быть контрастным, не состоять из мелких деталей и не быть слишком большим… Favicon.ico это файл размером 16х16 пикселей. Поэтому если Вы попробуете использовать в качестве исходника для favicon «Утро в сосновом лесу» Шишкина — у вас получится зеленая клякса.

Таким образом для favicon берем понравившееся нам изрображение, или логоти Вашего сайта (если вы его себе создали) и создаем из него пиктограмму.

Как создать favicon

 

Итак: вы уже выбрали изображение и теперь на его основе Вам необходимо создать favicon для сайта, как это сделать?!

Для начала необходимо подготовить изображение к конвертации. Конечный файл — квадратное изображение и поэтому очень желательно чтобы исходная картинка так же была квадратной. Иначе либо изображение исказится либо скрипт-конвертор обрежет что-то не то…

Как установить favicon на сайт wordpress

Сервисов, генерирующих favicon из пользовательского изображения в интернете очень много например:

  • Favicon CC
  • Favicon Generator
  • Dynamic Drive Favicon Tool
  • Chami Favicon Service
  • Favicon Generator ORG
  • Favicon UK
  • Degraeve Favicon
  • Anti-Favicon
  • Gen Favicon
  • Favigen

 

Выбирайте понравившийся или найдите свой.

Можно также самостоятельно в photoshop сделать преобразование изображения в иконку размером 16х16 32х32 или 48х48 пикселей.

Или выбрать готовую иконку вот в этих галереях:

  • Fine Icons
  • The Favicon Gallery
  • Delta Tango Bravo
  • Fresh Favicons

 

Как установить favicon на сайт wordpress

Для начала необходимо залить изображение на хостинг. Обычно принято располагать файл favicon.ico в корневой папке сайта, но икто нам не запрещает положить его куда-то еще и назвать по другому (придется только путь в настройках подправить).

Далее: если у вас простой сайт на чистом HTML — идем в текстовый редактор и вносим в «глову» сайта (между тегамии <head> и </head> ) следующий код:

<link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">

 

Для wordpress — вносим в эту же зону но уже файла header.php нашей wordpress темы вот такой код:

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">

 

Если Вы залили favicon.ico в корень темы wordpress, тогда код должен быть вот таким:

<link rel="shortcut icon" href="<?php bloginfo('template_url');?>/favicon.ico"/>
<link href="<?php bloginfo('template_url');?>/favicon.ico" rel="icon" type="image/x-icon" />

 

Все, теперь у вас на сайте устанолен favicon.

Но для wordpress это еще не все… Установленный таким образом favicon не будет отображатся в админпанели wordpress и на старнице авторизации пользователя. Для того, чтобы наш favicon движек автоматически добавлял на все свои страницы нам необходимо в файл functions.php вашего wordpress добавить вот такой код:

function sp_set_favicon() {
echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_bloginfo('template_url').'/favicon.ico" />
    <link href="'.get_bloginfo('template_url').'/favicon.ico" rel="icon" type="image/x-icon" />';
}
add_action( 'admin_head', 'sp_set_favicon' );
add_action( 'login_head', 'sp_set_favicon' );
add_action( 'wp_head', 'sp_set_favicon' );

 

Вот теперь точно все… Это моя инструкция как установить favicon на сайт wordpress — пользуйтесь.

Тизерная сеть GlobalTeaser

One comment

  1. Infidel:

    Спасибо за инфу!

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>