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

Favicon – это краткая форма значка избранного. Microsoft впервые представила его при использовании Internet Explorer 5 в марте 1999 года. Позже Консорциум World Wide Web (W3C) стандартизировал использование значков в рекомендациях HTML 4.01. Favicon также упоминается со многими другими именами, такими как значок сайта, значок URL-адреса, значок закладок, значок вкладки и значок ярлыка.

Просмотреть значок на вкладке браузера

Общее использование Favicon

Фавикон обычно представляет собой изображение .ico, загруженное в корневой каталог вашего сайта. Затем изображение значка связывается со страницей с помощью следующего метатега:

<link rel="shortcut icon" href="http://example.com/favicon.ico" />

Размер используемого значка – 16 x 16 пикселей.

Почему вы должны использовать Favicon?

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

  • Отображается на вкладке браузера
  • Отображаются в виде значков с закладками
  • Отображается в адресной строке в некоторых браузерах

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

Результаты поиска Яндекса

Результаты поиска Яндекса

Также значок можно использовать как значок на рабочем столе или сенсорный значок яблока. Изображение Favicon должно использоваться в качестве значка приложения на iPhone и iPad при добавлении ярлыка веб-страницы.

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

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

До версии WordPress 4.2 было сложно добавить фавикон. Чтобы упростить задачу, добавление значков стало основной функциональностью начиная с версии 4.3. Значок «Значок сайтаМодуль из плагина Jetpack был добавлен в настройщик WordPress как функция по умолчанию. И вам просто нужно изображение без каких-либо других метатегов или плагинов.

Требования к изображениям

Иконка сайта WordPress требует двух простых требований:

  • Изображение должно быть квадратным по размеру
  • Минимальный размер должен быть 512 пикселей.

Вам не нужно использовать изображение .ico, просто подготовьте квадратное изображение .png, .jpg или .gif размером 512 пикселей, которое будет использоваться в качестве значка на вашем сайте WordPress. Этот же значок будет использоваться как значок приложения на всех мобильных устройствах.

Подготовьте изображение меньшего размера с четкой видимостью с помощью таких программ, как Photoshop или Snagit. Помните, что изображение значка будет изменено на 16 x 16 пикселей на вкладке браузера. Следовательно, подготовьте изображение темного цвета для увеличения видимости.

Загрузка изображения на сайт

Войдите в свою админ-панель и перейдите к «Внешний вид> Настройщик»Меню. Нажми на “Идентичность сайта», Как показано на рисунке ниже.

Параметр идентификации сайта в настройщике WordPress

Параметр идентификации сайта в настройщике WordPress

Нажмите «Выбрать изображение» и загрузите свое изображение значка.

Добавление значка сайта на сайт WordPress

Добавление значка сайта на сайт WordPress

Если вы загружаете изображение размером более 512 пикселей, WordPress автоматически откроет экран обрезки изображения. Переместите область обрезки и просмотрите мгновенный предварительный просмотр вашего значка в браузере и в виде значка приложения на левой панели.

Вариант кадрирования изображения для Favicon

Вариант кадрирования изображения для Favicon

После загрузки изображения щелкните значок «Сохранить и опубликоватьКнопка.

Опубликовать сайт с помощью Favicon

Опубликовать сайт с помощью Favicon

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

В любой момент вы можете удалить или изменить значок на своем сайте.

Похожие записи

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

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