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

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

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

Зачем вообще нужен favicon? Ведя поиск в интернете, часто пользователи открывают множество вкладок в браузере. С большим количеством вкладок названия страниц сайтов будут спрятаны. Если вы установите favicon, то пользователь сможет отыскать ваш сайт без необходимости проверять каждую открытую вкладку. Это улучшает удобство работы с сайтами и поможет сделать сайт узнаваемым среди пользователей.

Как создать favicon

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

фавикон

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

Установка favicon на WordPress может осуществляться несколькими методами. Рассмотрим каждый из них.

Метод 1. С помощью панели управления WordPress

Если у вас версия Wordpress 4.3 и выше, вы можете добавить favicon непосредственно в администраторской панели управления: выполните вход в панель управления WordPress и перейдите в меню Внешний вид >> Настроить.

меню настройка темы в вордпресс

Вы попадете в меню Настройки текущей темы вашего сайта. Теперь перейдите в меню Свойства сайта.

свойства сайта в вордпресс

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

фавикон в вордпресс через админпанель

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

изображение для фавикона

После этого не забудьте нажать на кнопку Сохранить и опубликовать.

сохранение изменений

Теперь вы можете открыть ваш сайт и увидеть добавленный favicon.

фавикон в браузере

Метод 2. С помощью плагина All In One Favicon

Для начала нужно установить сам плагин. Перейдите в меню Плагины >> Добавить Новый и установите All In One Favicon.

добавить новый плагин в вордпресс

плагин all in one favicon

После установки плагина, перейдите в меню Настройки >> All in one Favicon.

настройка all in one favicon

Загрузите изображение в строках ICO Frontend и ICO Backend, а затем сохраните настройки.

добавление фавикона через плагин

Теперь обновите страницу вашего сайта и вы увидите добавленный favicon.

Метод 3. С помощью изменения header.php файла

Выполните вход в контрольную панель вашего хостинга. Рассмотрим этот пример на cPanel.

Перейдите в меню cPanel >> Диспетчер файлов.

диспетчер файлов в cpanel

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

загружаем изображение через кнопку upload

файл фавикона

После этого favicon должен отобразиться автоматически.

отображение фавикона

Однако в некоторых случаях вам необходимо будет внести ручные изменения. Всё зависит от особенностей вашей WordPress-темы.

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

Перейдите в меню Внешний вид >> Редактор.

редактирование темы в вордпресс

Выберите для редактирования Заголовок Темы (файл header.php).

файл header.php в вордпресс

Отредактируйте или добавьте следующие строки в код, как это показано на скриншоте:

<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” на ваш домен.

добавление фавикона через правку кода темы вордпресс

Теперь нажмите на Сохранить файл и перезагрузите страницу.

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

Выбрать хостинг для WordPress

Читайте также:

 

Понравилась статья? Оставь свой голос!