Плагин Favicons. Иконки для сайта

плагин faviconsПлагин 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, а также без использования для этого плагина, вставляя код в файл темы вашего сайта.

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

скачать амиго бесплатно

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

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

16 комментариев

  1. Вот для чего-чего, а для фавиконов плагин — это уж абсолютное безумие. Всё на самом деле делается за 3 минуты человеком с любой подготовкой. Пожалейте свой движок — ему и без плагинов приходится тяжковато)

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

  2. Очень просто устанавливать фавикон через Файловый менеджер хостинга.

    • Да я так и делал. Но почему-то, у меня фавикон не видел Яндекс и другие браузеры, кроме Интернет Эксплорер. Сам я установил себе фавикон без применения плагина. Проблем не стало, только когда вставил код в файл header.

  3. Никогда бы не подумал, что для фавикона существует плагин. Его руками за 2 минуты делаешь) А тут целый плагин для этой задачи ставить, как то не разумно мне кажется. Интересно как много людей его используют?

    • Плагин нужен не для изготовления фавикона, а для установки фавикона на сайт. Его используют те кто не знает как или боится вставлять код в свою тему. Добавил свой фавикон, активировал плагин и все.

  4. Здравствуйте, Василий. У меня стоял этот плагин, с обычной иконкой — кнопочкой, которую предлагал этот плагин. Мне стали говорить знакомые, у кого установлен на компьютере Касперский, что он не пускает их на мой сайт, ругается на фавикон. Я решила дезактивировать плагин. И теперь у меня появилась страница (мой сайт/?s=Favicons), а на самой странице «Не найдено» написано, извините, здесь нет того что вы искали. Я понимаю, что когда-то, я сама создала эту страницу, но как ее удалить, я уже не помню. Все делала на ощупь, кто что подскажет, где что увижу, то и делала, в общем чайник. И как теперь выйти из этой ситуации — не знаю. Вот ищу информацию в интернет и нашла Ваш сайт. Вы не можете мне подсказать, что же мне делать? Спасибо.

  5. Таисия, я не совсем понял где именно появилась эта страница. У вас на сайте, в выдаче или где-то еще? Никакие страницы не должны появляться, после отключения этого плагина, и не нужно было создавать для этого какие-то страницы.
    Напишите понятнее, что вы сделали и где именно находится эта страница.

  6. Не знаю, от чего зависит… Но для установки фавикона я только загрузил картинку в папку сайта. Всё работает, а плагин для этого использовать — это круто.

    • На первых порах мало кто из начинающих знает, что нужно делать с файлами сайта. Где эта корневая папка? Поэтому, в самом начале, можно использовать этот плагин. Когда будут элементарные навыки, можно будет установить фавикон и без плагина.

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

    • Бывает, что некоторые браузеры не сразу начинают отображать фавикон, установленный в корневой папке сайта. У меня, например, так было.

  8. У меня иконка поставилась сама, без кода)

    • Фавикон может появится без вставки кода. В любом случае, сначала нужно будет подобрать иконку, а потом поместить ее на свой сайт.

  9. Здравствуйте Василий. С вашим сайтом я ранее встречался. С фавиконом пока решил не торопиться, знаю, что он нужен. Сам создам оригинальный фавикон на своем фото. Вот в вашей статье «Как увеличить посещаемость сайта», обнаружил интересное. Василий! По вашему сайту заметно, что вы прилагаете немало усилий самостоятельно. Я также обучался в «Твой старт» в 2013 году. Создал сайт. Затем командировки, работа. Теперь занимаюсь тех.частью. С футером нужно что-то решить. Стараюсь наполнить блог сначала контентом, параллельно продвижение его. Рад за посещаемость вашего сайта. Удачи. С уважением Михаил Николаев.

    • Для успешного продвижения важное значение имеет регулярность обновления сайта, а также содержимое статей, интересное для широкого круга пользователей в интернете.

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

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