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

https://

April 01, 2020

Всем привет. Фавикон – это уникальная картинка, которая является визитной карточкой любого сайта. По нему узнаете знакомые ресурсы, соцсети, сервисы. Желательно изначально выбрать и не менять иконку сайта в будущем, и оставить на все время существования проекта. В этом уроке я расскажу, как установить favicon на WordPress, разберу несколько методов и дам подробные инструкции.

Стандартная функция WordPress в админке

В вордпресс существует стандартная функция. Чтобы добавить в панели WordPress заходим в Внешний вид > Настроить.

Откроется окно (на сленге разработчиков) кастомайзера. Заходим в раздел Свойства сайта.

Откроется новая вкладка, находим «Выберите значок сайта».

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

Рекомендуется использовать размер не менее 512 на 512 пикселей (px).

• Выбираем откуда загрузим изображение с жесткого диска или ранее доступных в библиотеке.
• Отмечаем необходимое.
• Жмем Выбрать.

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

В предварительном просмотре WordPress установит фавикон, и покажет, как он отображается в закладках браузера. Если все хорошо, то выбираем Опубликовать.

WordPress загрузит и сгенерирует несколько форматов для разных систем и браузеров, в зависимости откуда пришел посетитель:

1. Mac OS.
2. Ios.
3. Android.
4. Приложения Windows.

Установить favicon на WP с помощью плагина

Единственный вменяемый плагин это «Favicon by RealFaviconGenerator», особенность заключается в том, что он проставляет фото для всех устройств:

• Mac.
• Iphone.
• Android.
• IOS.
• Surface.

Устанавливаем стандартно и переходим к работе, в панели заходим Внешний вид > Favicon. В открывшемся окошке находим «Выберите из библиотеки мультимедиа».

Откроется форма с выбором картинки, можете загрузить собственное или воспользоваться ранее сохраненными в WordPress. Не забудьте заранее оптимизировать фото под WP.

Далее нажимаем кнопку Генерировать.

Перекинет на официальный ресурс realfavicongenerator, если изображение выбрано правильно то нажимаем синюю кнопку «Continue with this picture».

Смотрим, как будет отображение на разных устройствах и браузерах, если все нормально, то перелистываем страницу вниз и нажимаем Generate your favicon and HTML code.

Ждем пока сервис обработает запрос и автоматически перебросит обратно в админку WordPress. Для надежности обновляем Ctrl+F5 и любуемся на установленный значок, который корректно отображается на всех устройствах.

Как поменять иконку кодом

Ввиду разнообразия тем, бывает что способы описанные выше не срабатывают. Тогда прибегнем к методу, прописываем favicon напрямую в тему.

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

Даю код, который нужно добавить в раздел head в активной теме.

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

Идем в админпанели Внешний вид > Редактор и выбираем файл header.php то есть заголовок, и перед закрывающим тегом /head вставляем данный код.

1. Редактор тем.
2. Заголовок header.php.
3. Закрывающий тег </header>.
4. Код для вставки.
5. Обновляем файл.

В примере разобран файл в формате png, но если в другом, например, jpg, то в код меняем таким образом.

<link rel="shortcut icon" type="image/jpg" href="/favicon.jpg"/>

Видим что изменился атрибут type он стал со значением jpg, а так же расширение картинки изменилось на другое. Обновляем и смотрим на работу кода.

Важный момент, что большинство браузеров могут сами найти в корне сайта favicon, только необходимо чтобы он был в формате ico. Но не всегда срабатывает, потратьте 5 минут времени и установите элемент как надо.

Где хранится иконка

Задают вопросы где хранится иконка на сервере. Ответ прост, если размещали с помощью первых 2 методов, то расположение будет такое wp-content/uploads.

В папках по годам, будут каталоги по месяцам, в них размещены все медиафайлы блога. Вспомните, когда производили установку и найдите объект на сервере.

Яндекс не видит значок

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

Чтобы ускорить индексирование заносите главную страницу на переобход, это сократит время обновления базы. Так выглядит настройка в Яндекс Вебмастере. Время изменений в выдаче от 5 до 90 дней.

На этом урок окончен. До скорого!

Подписывайтесь на канал https://, чтоб не пропускать новые интересные уроки.