плагин faviconsПри переходе на какой-нибудь сайт, на панели навигации, находится изображение рядом с названием сайта. Это изображение называется фавикон. Ваш сайт будет узнаваем по этой иконке, и, с помощью этого изображения, он будет отличаться от других сайтов.

Картинка будет отображаться в закладках, в результатах выдачи поиска Яндекса, на панели навигации. Готовое изображение фавикона можно найти в Интернете, а также изготовить его на специальных сервисах для создания фавикона в Интернете. Для фавикона можно использовать свою фотографию.

Также Favicon можно сделать с помощью графического редактора. Созданное изображение необходимо сохранить в графическом формате «.ico».

В этой статье пойдет речь не об изготовлении самого изображения фавикона, а об установке фавикона на сайт, используя плагин Favicon, а также без использования плагина. Вначале рассмотрим, как установить фавикон на сайт с помощью специального плагина — Favicons (Easy Favicon).

Как установить фавикон на сайт используя плагин Favicons

Плагин Favicons можно скачать отсюда.

После загрузки планина на свой компьютер, следует перейти к его установке. Для этого, необходимо войти в «Админ-панель WordPress» => «Плагины» => «Добавить новый» => «Установить плагины» => «Загрузить».

После загрузки плагина на сайт, его нужно установить и активировать. После активации плагина, потребуется войти в «Админ-панель WordPress» => «Параметры» => «Favicons», для его настройки.

Теперь переходим к настройкам плагина Favicons (Easy Favicon).

В первом пункте настроек плагина, вам предлагают использовать в качестве фавикона свой аватар в системе Граватар (глобально распознаваемый аватар). Для этого нужно активировать первую кнопку. В этом случае, фавиконом будет то изображение, которое вы выбрали в качестве граватара.

Во втором пункте настроек плагина, вам предлагают выбрать свою иконку, введя ее адрес в Интернете, конечно, если она там размещена.

В третьем пункте настроек плагина, вам можно выбрать готовую иконку из состава предложенных, на ваш выбор.

Следует активировать третью кнопку настроек плагина, и то изображение, которое вы хотите использовать в качестве своего фавикона.

настройки плагина favicons

Но, что делать тем пользователям, у кого уже есть свой фавикон? Например, вы уже нашли favicon готовым в Интернете, или сделали фавикон при помощи специализированного сервиса.

Свой, готовый фавикон (это может быть ваша фотография), вам необходимо уменьшить до размера 16×16 пикселей в графическом редакторе. Изображение иконки лучше иметь квадратное, чтобы потом не было искажений.  Желательно иметь иконку с расширением .ico, другие графические форматы могут не отображаться.

Теперь готовую иконку можно добавить в архив с плагином Favicons.

Для этого открываете архив с плагином Favicons архиватором WinRAR. В окне архиватора, нажимаете два раза левой кнопкой мыши последовательно по папке «favicons», затем по папке «icons».

открываем favicons

Подготовленные иконки, которые вы хотите поместить на свой сайт, из места их расположения (например, Рабочий стол) перетаскиваете в архив, нажимая при этом в окне «Имя и параметры архива» на кнопку «ОК».

перетаскиваем иконки

На этом примере, я поместил в архив с плагином две иконки фавикона с расширениями .ico и .gif (на изображении видно, что они имеют другое имя, чем установленные изначально в плагине).

архив с плагином

После этого, устанавливаете плагин и активируете его, как описано выше. Затем заходите в настройки плагина — «Админ-панель WordPress» => «Параметры» => «Favicons».

Здесь активируем иконку, которую вы добавили в архив (при этом нужно пощелкать по чекбоксу несколько раз, пока он не активируется).

выбираем favicon

Активируете третий пункт настроек плагина Favicons и нажимаете на кнопку «Save Changes (Сохранить изменения)». Затем вводите  в поле адресной строки браузера имя своего сайта и рядом с именем сайта видите изображение своего фавикона.

видим изображение favicon

Как установить фавикон без плагина

Фавикон можно установить непосредственно на сайт с помощью вставки кода, без применения для этого плагина Favicons. У себя на сайте я использовал этот вариант установки фавикона.

Иконку готового фавикона размером 16×16 пикселей, с расширением .ico, переименовываете в favicon.ico. Потом помещаете фавикон в корневую папку сайта, которая находится, примерно, по такому адресу — domains/ваш сайт/public_html/.

Добавить фавикон на сайт можно с помощью программ FileZilla или Total Commander. Я это делаю обычно через Панель управления хостинга, файловым менеджером.

Затем следует войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор» => «Редактировать темы» => «Шаблоны» => «Заголовок (header.php)». В файл «Заголовок (header.php)» добавляете специальный код между тегами <head> и </head>:

<link rel="shortcut icon" href="ваш сайт/favicon.ico" type="image/x-icon" />
<link rel="icon" href="ваш сайт/favicon.ico" type="image/x-icon" />

Вместо слов ваш сайт, вставляете название вашего сайта. На этом примере, сайт: vellisa.ru, код выглядит так:

<link rel="shortcut icon" href="//vellisa.ru/favicon.ico" type="image/x-icon" />
<link rel="icon" href="//vellisa.ru/favicon.ico" type="image/x-icon" />

Внимание! Перед этими действиями обязательно сохраните оригинальной файл «Заголовок (header.php)». Он может понадобится для восстановления, если у нас ничего не получиться, или произойдут какие-нибудь сбои с вашим сайтом.

Для вставки кода, находите в файле «Заголовок (header.php)», тег </head>, прямо перед ним щелкаете левой кнопкой мыши, и вставляете в это место скопированный код.

место для вставки кода

Это будет выглядеть в файле примерно вот так.

место вставки кода

Потом нажимаете на кнопку «Обновить файл». После этого фавикон будет активирован. Далее вводите в адресную строку браузера имя своего сайта и смотрите на получившийся результат.

Теперь вы знаете, как добавить фавикон на сайт, используя плагин Favicon, а также без использования для этого плагина, вставляя код в файл темы вашего сайта.

С уважением, Василий Прохоров

Понравилась статья — нажмите на кнопки:

Подписаться на обновления блога