Как установить favicon (фавикон) в WordPress? Пошаговая инструкция.

Favicon – это маленькое изображение, которое вы видите во вкладке браузера, рядом с названием сайта.  Также оно отображается в панели браузера при добавлении сайта в избранное и истории просмотров. В Яндесе фавикон размещается прямо в результатах выдачи. Этот на первый взгляд небольшой элемент визуального оформления сайта на самом деле служит одним из основных блоков брендинга вашего проекта, и позволяет выделить ваш проект среди остальных. Создавая сайты на WordPress обязательно нужно добавлять уникальный фавикон.

Что такое favicon?

Favicon (фавикон) – это мини иконка сайта, которая размещается на каждой открытой вкладке браузера возле названия сайта. Именно такие графические иконки позволяют пользователю быстро понять, какой сайт находиться в той или иной вкладке браузера. Стандартный размер фавикона: 16 x 16 пикселей.

Где применяется фавикон?

Давайте разберем список позиций, где отображаться иконка сайта.

1. Панель вкладок браузера.

2. История просмотров в браузере.

3. Панель закладок.

4. В избранном.

5. В выдаче Яндекс (как мобильной так и декстопной).

6. Мобильная выдача Google.

Из приведенных примеров видно, что фавикон визуально идентифицирует ваш сайт в выдаче поисковиков и в браузере пользователя. Это на самом деле важный визуальный акцент, который не стоит игнорировать при разработке сайтов на WordPress.

Формат favicon

В качестве графических изображений для фавикона вы можете использовать следующие форматы: PNG, ICO, JPEG, SVG, GIF. Если раньше все использовли формат ICO, поскольку его поддерживали все браузеры, то сейчас чаще всего используют PNG. Такие форматы как SVG, GIF, JPEG имеют некоторые проблемы в поддержке их разными браузерами, поэтому на данный момент рекомендую использовать именно PNG или же ICO. Кстати, у SVG, за счет масштабирования без потери качества в этом направлении большие перспективы, нужно дождаться только поддержки этого формата всеми популярными браузерами.

Проверить поддержку форматов изображений для иконок сайта можно с помощью сервиса Can I Use.

Если вы думаете, в каком формате подготавливать иконку для WordPress, то выбирайте между PNG и ICO.

Как создать фавикон?

Сейчас мы с вами рассмотрим основные сервисы, которые можно использовать для того чтобы сделать иконку для сайта. Во-первых, можно классифицировать их на две группы: онлайн сервисы и десктопные программы.

Онлайн сервисы

www.favicon.cc. Давайте рассмотрим, какой функционал он предоставляет. В первую очередь – это генерация иконки из готового изображения, например, из логотипа вашего сайта. Также, вы можете самостоятельно нарисовать favicon для своего сайта.

www.degraeve.com/favicon/ – вот вам еще один, довольно многофункциональный онлайн сервис для генерации иконок для сайтов, но только зарубежный. Разобраться в нем думаю, будет не сложно, там все понятно чисто на интуитивном уровне.

Faviconer.

Десктопные сервисы

Из десктопных сервисов, которые перегоняют картинки в формат «.ico»  и делают размер иконки 16х16 пикселей можно выделить: IcoFX, Photoshop. В том же Photoshop можно нарисовать и иконку в png формате. Вы можете нарисовать png изображение размером 512 х 512 пикселей, а при добавлении в WordPress движок сам подгонит размер.

Но, честно говоря, работать с онлайн сервисами намного проще.

Я не хочу тратить время на создание favicon для своего сайта на WordPress, что мне тогда делать?

Специально для вас, никто не отменял галереи favicon’ов. Вы запросто можете скачать картинки на любой вкус абсолютно бесплатно. Где же это можно сделать?

Favicon.cc — эта галерея насчитывает просто огромное количество фавиконов на любой вкус и разные тематики. В наличии имеются, в том числе и анимированные иконки.

Как добавить фавикон на WordPress?

Вы можете использовать несколько вариантов установки favicon на WordPress.

  • Через Customizer (нстройки) сайта.
  • Путем добавления кода в header.php вашей темы.
  • Используя плагины для WordPress.

Давайте рассмотрим каждый из этих пунктов детальнее.

Через Customizer (настройщик) сайта

Для этого переходим в административную панель управления WordPress и далее по меню «Вешний вид» — «Настроить».

Вы увидите панель настроек для текущей темы вашего сайта. В ней вам нужно выбрать пункт – «Свойства сайта».

Там вы увидите блок с названием «Иконка сайта», и селектор для выбора изображения.

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

После выбора иконки нажимаем «Сохранить и опубликовать».

Добавление кода в header.php вашей темы

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

После чего нужно вставить следующий код между тегами <head></head>.

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

Обязательно не забудьте поменять yourdomain.com на url своего сайта.

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

Далее перед тегом </head> вставляем код. Нажимаем кнопку «Обновить файл».

Если вы все проделали правильно, то при обновлении вашего браузера вы будете наблюдать свой фавикон. Если фавикон не меняется, попробуйте почистить кэш браузера. Эти же правки можно внести и через ftp клиент, сделав резервную копию header.php.

Плагины для установки фавикона в WordPress

В репозитории WordPress вы можете найти много плагинов для установки иконки на сайт. Для примера давайте рассмотрим несколько из них.

All In One Favicon

Идем в меню «Плагины» — «Добавить новый», ищем по названию, устанавливаем и активируем плагин. После этого переходим в раздел «All in one Favicon» в меню админки.

Загружаете изображения в пунктах: «ICO Frontend (или же PNG Frontend)» и «ICO Backend (или же PNG Backend)». Нажимаем «Сохранить изменения».

Favicon от RealFaviconGenerator

Это более продвинутый плагин, который позволяет генерировать несколько типов иконок для разных платформ: iPhone/iPad, Android устройств, Windows 8 планшетов и другого.

Алгоритм работы с плагином следующий.

  • Устанавливаем и активируем плагин.
  • Идем в меню «Внешний вид» — «Фавикон».
  • Загружаем изображение, желательно размером не менее 260 х 260 пикселей.
  • После загрузки изображения нажимаем кнопку «Создать Favicon».
  • Далее плагин перенаправит вас на сайт RealFaviconGenerator.
  • На сайте находим кнопку «Создать код Favicon и HTML» и нажимаем ее.
  • Плагин перенесет вас на ваш сайт. Вы увидите уведомление о том, что ваш favicon настроен.
  • Проверьте, как иконка будет отображаться на различных устройствах.

Есть и другие плагины: Fresh Favicon, Genie WP Favicon и пр. Все их можно найти в репозитории WordPress и ознакомиться с их возможностями.

Как изменить фавикон в WordPress?

Если вы изначально сами добавляли фавикон на сайте, то проблем быть не должно. А что, если вам разрабатывали сайт и вы хотите изменить иконку? В таком случае можно предложить следующий алгоритм.

  1. Проверяем, установлены ли плагины для фавикона, и если да то идем и меняем картинку.
  2. Если нет, то переходим в меню «Внешний вид» — «Настроить», и в свойствах сайта, смотрим, нет ли там установленного изображения для иконки сайта. Если есть меняем.
  3. Если нет, то идем в корневую папку или папку с темой на сервере, где размещен сайт и заменяем файл favicon.ico на свой.

Что делать если фавикон не отображается?

Тут может быть несколько причин.

  1. Используется неверный формат изображения для иконки. Большинство современных браузеров сначала ищут файл favicon.ico в корне вашего домена, поэтому лучше всего использовать формат файла ICO, чтобы избежать ошибок отображения.
  2. Кэш браузера. Нужно зайти в настройки браузера и почистить куки, сохраненные изображения и историю просмотров за последний час.
  3. Неправильно задан путь к картинке и ваша фавикон возвращает ошибку 404. В таком случае зайдите в исходный код страницы и посмотрите полный путь к иконке.

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

Поделиться в социальных сетях:
Нет комментариев к данной статье

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

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