Установка Favicon (фавикон) на WordPress сайт

Просмотров: 5 621

Привет всем! Фавикон (Favicon) WordPress - как установить / добавить / поставить / заменить / удалить? Очень легко и просто. Как только вы создали блог/сайт на платформе WordPress, произвели базовую настройку ВордПресс пора подумать об установке фавикона (favicon) для сайта. Инструкция: как установить favicon на WP с видео уроком.

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

Фавикон для вордпресс
Установка favicon на сайт WordPress

Возможность загрузки собственной иконки favicon в самом ядре WordPress появилась совсем недавно. Начиная с версии 4.3, вы можете добавить значок сайта из админки WordPress.

Что такое favicon?

Favicon (сокр. от англ. FAVorites ICON — "значок для избранного") — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico.

Фавиконка для Яндекс

Фавиконка — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.

Пример отображения фавиконки в результатах поиска:

Значок сайта в сниппете яндекса
Картинка, которая отображается в сниппете в результатах поиска Яндекса

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

ustanovit-favicon-na-wordpress
Фавиконы открытых сайтов

Посмотрите на мою иконку блога, я выбрал картинку вордпресс. Раз блог на этом движке и я пишу о WP, то пусть иконка будет соответствующая. А теперь перейдем к делу, к загрузке и установке картинки на WP.

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

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

Настройка сайта вордпресс
Консоль WordPress - настроить свой сайт

Затем, на странице визуальной настройки (Customizer)  сайта откройте пункт Свойства сайта:

Свойства сайта WordPress
Настройка сайта - Свойства сайта WordPress

Да чуть не забыл, картинка у вас должна быть уже подготовлена - любой формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP. Рекомендуемый размер изображения значка вашего сайта - не менее 512 пикселей по ширине и высоте. Изображение значка сайта должно быть квадратным, вы можете использовать прямоугольное изображение большего размера, а WordPress позволит вам обрезать изображение при его добавлении. Прозрачное или с фоном, без разницы.

Изображение значка сайта должно быть квадратным
Обрезка картинки для фавикона

Изображение должно быть четким и, как правило, соответствовать изображению и / или содержанию вашего сайта. Файл картинки лучше иметь с таким названием favicon

Если вам нужна картинка WordPress для значка сайта, то официальные находятся здесь - https://wordpress.org/about/logos/.

В свойствах сайта - Иконка сайта - нажмите Выбрать изображение:

Установка иконки для сайта
Иконка сайта - Выбрать изображение
ustanovit-favicon-wordpress
Выберите файлы

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

Фавиконка на сайте
Иконка вашего сайта вордпресс

Если всё окей, то нажимайте синею кнопку Опубликовать. Откройте свой сайт и проверьте вашу проделанную работу. Я установил прозрачную картинку и у меня иконка сайта в браузере гугла выглядит так:

Установка фавиконки на сайт
Фавиконка установленная на сайт WP

Учтите, что многие браузеры (а также поисковые системы) кэшируют favicon-изображения, поэтому изменения могут вступать в силу не сразу. В браузере от Google картинка появится сразу, в Яндексе браузере ещё не скоро. Придется подождать. Если ваш сайт отображается в результатах поиска Яндекса, то в течение двух недель после посещения сайта роботом фавиконка появится в поиске.

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

Как поменять или удалить иконку сайта WordPress?

Проделайте те же действия. Админ панель — Внешний вид — Настроить. Открываете Свойства сайта. И теперь дело техники. Нажимаете Удалить или Изменить изображение:

Как поменять или удалить иконку сайта WordPress
Удалить или изменить изображение

Удаляете и нажимаете Опубликовать. Меняете фавикон сайта путём новой загрузки картинки в WordPress.

Если вы внесли изменения в значок и хотите, чтобы они были учтены для Google, то можете запросить повторное сканирование главной страницы сайта. Обычно изменения учитываются в результатах поиска в течение нескольких дней.

Видео - Как установить Favicon WordPress

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

На этом, дорогие друзья, у меня все. До встречи. Пока, пока!


5 комментариев к “Установка Favicon (фавикон) на WordPress сайт”

  1. Добрый день! У меня к вам вопрос: вот после того, как мы загрузили картинку в медиафайлы, мы, наверное, должны взять адрес этой картинки? Вы как-то это пропустили, по-моему, или я что-то не так поняла?

    А как иконку загрузить на хостинг? Мы загружаем какую фразу на хостинг, напишите, пожалуйста, что конкретно мы должны загрузить, чтобы «чайникам», таким, как я, было понятно.Это фраза: favicon.ico. или что-то другое?

    Извините за тупые, возможно, вопросы, но они возникают у нас. С уважением, Анна.

    Ответить
    • Анна, это вы пропустили — написано же «нам нужен только URL адрес картинки:…..Скопируйте его и вставьте ссылку в блокнот 🙂

      И вот ещё — Да чуть не забыл, иконка у вас должна быть уже подготовлена, с названием favicon.ico. Иконка это картинка, а favicon название картинки; ico это расширение картинки.

      Ответить
  2. Спасибо, все так хорошо расписано, получилось все с первого раза, трудно накасячить.

    Ответить

Оставьте комментарий

 необходимо принять правила конфиденциальности