Как установить favicon в WordPress
Здравствуйте, друзья! В этом уроке мы поговорим о неотъемлемой составляющей любого сайта — фавиконке (favicon). Но перед тем как добавить ее на сайт, давайте вспомним что такое favicon изображение и зачем оно нужно.
Favicon — небольшое графическое изображение 16 х 16 пикселей связанное с вашим веб-сайтов. Одно из главных предназначений фавиконки — возможность идентифицировать веб-сайт визуально в большом количестве вкладок или закладок веб-браузера.
![]()
Создать фавиконку можно разными способами, для этого есть множество онлайн-редакторов и куча подобный сервисов.
На очень многих блогах и информационных ресурсах веб-мастеров указано что фавиконка должна быть только в формате .ico, но это ошибочное мнение! Вы можете создать красивое фавикон изображение и в .png формате.
Для того чтобы создать фавиконку самостоятельно, откройте Photoshop или другой графический редактор и создайте квадратное изображение 128 × 128 пикселей, и нарисуйте изображение для фавиконки (обычно ставят просто логотип или его часть). После того как вы создали изображение, сохраните его в формате PNG. Хотя большинство современных браузеров будет отображать значок сайта в формате PNG, очень старые версии Internet Explorer не будут.
Важно! После того как вы создадите фавикон изображение, его не обязательно уменьшать к размеру 16 х 16 пикселей! WordPress это сделает за вас!
Установка Favicon в WordPress
1. Загрузите фавикон в корень папки вашей текущей темы (шаблона). Название фавиконки обязательно сделайте — favicon.
![]()
2. Зайдите в административную панель WordPress .
3. Перейдите в Внешний вид — > Редактор.
![]()
4. В списке справа выберите файл с именем Заголовок (header.php).
![]()
5. Если ваш favicon в png формате — скопируйте код ниже и вставьте его ниже тега .
/favicon.png" />
Если в формате ico — используйте код для вставки:
/favicon.ico" />
![]()
6. Сохраните изменения нажав кнопку «Обновить файл».
Вот и все! Как вы видите, установка фавикон изображения в WordPress задача не сложная, и не требующая много времени.
Способ добавления favicon о которым я говорил в этом уроке не единственный, но как по мне, он наиболее правильный и возможно простой.
Если у вас что-то не получилось, смело пишите в комментариях! Я постараюсь помочь в решении вашей задачи.
Здравствуйте, друзья! В этом уроке мы поговорим о неотъемлемой составляющей любого сайта — фавиконке (favicon). Но перед тем как добавить ее на сайт, давайте вспомним что такое favicon изображение и зачем оно нужно. Favicon — небольшое графическое изображение 16 х 16 пикселей связанное с вашим веб-сайтов. Одно из главных предназначений фавиконки — возможность идентифицировать веб-сайт визуально в большом количестве вкладок или закладок веб-браузера. Создать фавиконку можно разными способами, для этого есть множество онлайн-редакторов и куча подобный сервисов. На очень многих блогах и информационных ресурсах веб-мастеров указано что фавиконка должна быть только в формате .ico, но это ошибочное мнение! Вы можете создать красивое фавикон изображение…
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Как добавить Favicon на WordPress
Favicon — это маленькое изображение, которое находится возле названия страницы сайта в браузере. Такой значок помогает посетителям идентифицировать ваш сайт среди других, и сегодня мы расскажем, как установить фавикон на WordPress-сайт быстро и без особых усилий.
![]()
Зачем вообще нужен favicon? Ведя поиск в интернете, часто пользователи открывают множество вкладок в браузере. С большим количеством вкладок названия страниц сайтов будут спрятаны. Если вы установите favicon, то пользователь сможет отыскать ваш сайт без необходимости проверять каждую открытую вкладку. Это улучшает удобство работы с сайтами и поможет сделать сайт узнаваемым среди пользователей.
В этой статье инструкции рассчитаны на то, что у вас уже есть картинка для фавикона. Если у вас еще нет картинки и вы не знаете, какого формата она должна быть, читайте нашу подробную статью о создании фавикона.
Как создать favicon
Лучше всего в качестве фавикона использовать логотип вашего сайта или бренда. Обратите внимание, что фавикон отображается маленьким значком, поэтому не стоит использовать в нем очень мелкие графические элементы, иначе он будет непонятен пользователям.
![]()
ВИДЕО ПО ТЕМЕ:

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

Нажмите на Выберите иконку сайта и загрузите изображение, которое хотите использовать для favicon.
![]()
Если изображение не подходит по размеру, то вы сможете обрезать его непосредственно после выбора картинки, а также посмотреть, как favicon будет выглядеть в браузере.
После этого не забудьте нажать на кнопку Опубликовать.

Теперь вы можете открыть ваш сайт и увидеть добавленный favicon.
![]()
Хостинг с предустановленным WordPress и заботливой поддержкой 24/7
При заказе хостинга на полгода — зарегистрируем домен в подарок!
При покупке на год — скидка 20%
☝️ Гарантируем вернуть деньги в течение 30 дней, если вам что-то не понравилось или не подошло.
Метод 2. С помощью плагина All In One Favicon
Для начала нужно установить сам плагин. Перейдите в меню Плагины >> Добавить Новый и установите All In One Favicon.

![]()
После установки и активации плагина, перейдите в меню справа в раздел All in one Favicon.
Загрузите изображение в строках ICO Frontend и ICO Backend, а затем сохраните настройки.
![]()
Теперь обновите страницу вашего сайта и вы увидите добавленный favicon.
Установка Favicon на сайт WordPress
Рассмотрим, как добавить фавикон на сайт WordPress. Это можно сделать двумя способами: установить favicon через шаблон, а также через код header – в соответствии с рекомендациями Яндекса.
Какой должна быть иконка сайта
Рекомендуемые размеры favicon в пикселях: 16*16, 32*32, 48*48.
- PNG – самый распространенный, поддерживается всеми основными браузерами.
- SVG – векторный, рекомендуется W3C и Яндексом, поддерживается всеми современными браузерами, кроме IE8 и ниже.
- ICO – поддерживается устаревшими браузерами типа IE, выходит из обращения.
Рекомендуемые формы: квадрат, круг, ромб.
Исходя из вышеизложенного, для фавиконки оптимально подбирать равностороннее изображение 32*32, формата PNG, с сохранением прозрачности.
Если хотите соблюсти все требования поисковых систем, в частности Яндекса, то подготовьте также второй вариант иконки в SVG или PNG, но размером 120 пикселей. Конвертировать изображения можно с помощью сервиса online-convert.com.
Как установить или изменить фавикон на WordPress в шаблоне сайта
Итак, у вас есть готовое изображение PNG размером 32*32 пикселя. Для удобства назовите его icon.png .
- Войдите в панель администратора.
- В боковом меню откройте «Внешний вид» – «Настроить».
- Перейдите в «Свойства сайта» – «Выберите иконку».
- Вас перенаправит в библиотеку изображений. Загрузите подготовленное изображение icon.png .



- Нажмите «Выбрать», потом «Обрезать изображение».


- Все, favicon на WordPress загружен, нажмите «Опубликовать».
- Перейдите на главную страницу сайта – вместо логотипа WordPress отображается ваш фавикон.


Как добавить в WordPress favicon SVG в
Теперь разберемся, как добавить фавикон в формате SVG, согласно рекомендациям Яндекса.
Сначала, переименуйте подготовленный файл в favicon.svg .
- Авторизуйтесь в панели управления хостинга.
- Войдите в корневую папку.
- Загрузите в неё подготовленный файл favicon.svg .

- Вернитесь в админ-панель сайта. Откройте «Внешний вид» – «Редактор тем».
- В правом меню выберите «Заголовок ( header.php )» (если шаблон не русифицированный, то ищите «Header».


- Откройте файл header, найдите блок между и .
Добавьте туда строку:
Этим кодом Вы покажете браузеру путь до иконки.
Нажмите «Обновить файл».


Как установить фавикон в WordPress через панель управления
Этот вариант актуален в случае, если в шаблоне нет возможности редактировать тему.
После того, как фавикон переименован и загружен в корневую директорию по инструкции выше:
- В той же корневой директории откройте папку wp-content .
- Войдите в папку themes .
- Выберите каталог с названием вашего активного шаблона (в нашем случае установлен GeneratePress).



- Откройте его, выберите файл header.php .
В блок между
и добавьте строку:Нажмите «Save file».


Теперь можете быть уверенными, что вам не придет такое письмо от Яндекс.Вебмастер: «добавьте на сайт файл favicon в формате SVG или размером 120 × 120 пикселей».
Контакты
Отдел продаж:
Технический отдел:
Отдел жалоб:
Часы работы
Круглосуточно Время ожидания ответа от нескольких минут до 24 часов.
DNS-хостинг с безлимитным числом доменных имен и записей. Подробнее по ссылке https://lite.host/hosting/dns 1 месяц назад Debian 12 доступна для установки на всех виртуальных серверах. 4 месяца назад Почта для домена с безлимитным числом почтовых ящиков, оплата только за место. Подробнее по ссылке https://lite.host/pochta/dlya-domena 7 месяцев назад По данным ООО «Интернет Технологии» UPTIME за 2022 год по серверам виртуального хостинга составил 99.998%, а по виртуальным серверам 99.99%. 9 месяцев назад
Сервис LITE.HOST
Россия , Санкт-Петербург
Отдел продаж:
Техническая поддержка:
Отдел жалоб:
Круглосуточно
Социальные сети
Партнерство
Зарабатывайте вместе с нами! 15% пожизненно со всех платежей за хостинг, реселлинг и виртуальные серверы.
- Виртуальный хостинг от 84.15 ₽
- Хостинг для WordPress от 84.15 ₽
- Хостинг для Битрикс от 84.15 ₽
- DNS-хостинг от 99 ₽ в год
- VDS серверы от 140.25 ₽
- Почта для домена от 126.65 ₽
Как установить фавикон на WordPress
Что такое favicon, почему плохо, если он отсутствует?
Фавикон – небольшая тематическая картинка – придаст вашему сайту индивидуальность и выделит его в браузере среди других веб-страниц. Установить фавикон для сайта на WordPress можно несколькими способами.
Фавикон (от английского словосочетания favorite icon) – это маленькая квадратная картинка, которая визуально представляет ваш сайт и отображается в ярлыках страниц в браузере, в закладках на страницу, и в адресной строке рядом с именем сайта. Правильно подобранный фавикон соответствует логотипу сайта или тематике информации, которая на нем содержится. При взгляде на фавикон пользователь должен безошибочно определять ваш сайт среди остальных, даже не видя его названия. Наш фавикон в закладке браузера выглядит так:
![]()
В качестве формата файла для фавикона в современных браузерах используются ico, png или gif. Некоторые браузеры поддерживают загрузку иконки в формате jpg, а Opera и Firefox могут отображать анимированный gif. Картинка фавикона бывает разных габаритов, обычно применяются размеры 16×16, 32×32, 48×48, 64×64, 128×128 или 512×512 пикселей. Для сайтов, предназначенных для просмотра на мобильных устройствах, размер иконки может отличаться.
Как сделать фавикон для сайта онлайн?
Если на вашем сайте отсутствует фавиконка, картинку для фавикона можно подобрать в интернете или нарисовать самостоятельно в специальном онлайн-сервисе для генерации иконок.
Например, favicon.ru предлагает выбрать цвет, создать картинку на квадратном поле и сохранить ее на свой компьютер.
В поле предпросмотра отображается, как будет выглядеть фавикон для вашего сайта на ярлыке страницы браузера.
![]()
Поставить favicon средствами ВордПресс
Обычно фавикон можно установить, регулируя настройки сайта в админ-панели WordPress.
- В меню «Внешний вид» войдите в пункт «Настроить» и выберите «Свойства сайта».
- В предложенном списке действий можно настроить отображение иконки сайта. Нажмите кнопку «Выбрать изображение» и загрузите файл с нужной картинкой.
- Чтобы применить настройку к сайту, нажмите кнопку «Сохранить и опубликовать». Убедитесь, что на ярлыке страницы в браузере появился фавикон.
![]()
Вставить фавикон используя возможности WordPress шаблона
В некоторых темах WordPress заложена дополнительная возможность по установке иконки сайта.
- Войдите в меню «Внешний вид» и выберите пункт «Настроить».
- Дальнейший путь к настройкам зависит от используемого шаблона. Как правило, фавикон устанавливается в общих настройках темы. Найдите соответствующую команду и загрузите файл с картинкой.
- Не забудьте подтвердить изменения нажатием кнопки «Сохранить и опубликовать».
![]()
Добавить в файл header.php
Если не удалось установить фавикон встроенными средствами WordPress, использование иконки для сайта можно напрямую прописать в файле заголовка header.php. Для внесения изменений в этот файл используйте редактор кода, например, встроенный редактор WordPress.
- С помощью файлового менеджера подключитесь к серверу хостинга и скопируйте в корневую директорию вашего сайта подготовленный файл с именем favicon.
- В админке WordPress зайдите в меню «Внешний вид» (1) и выберите пункт «Редактор» (2).
- В списке шаблонов откройте файл заголовка header.php (3).
- После открывающего тегавставьте строку (4), в которой проверьте формат загруженного файла с иконкой (png или другой), при необходимости замените на свой вариант.
- Нажмите кнопку «Обновить файл» (5), чтобы применить иконку к сайту.
![]()
Установка favicon используя плагин Favicon by RealFaviconGenerator
Для подключения фавикона в WordPress разработаны специальные плагины, позволяющие автоматически загрузить иконку на сайт.
В меню «Плагины» выберите пункт «Добавить новый». Найдите, установите и активируйте плагин Favicon by RealFaviconGenerator. Затем зайдите в меню «Внешний вид» (1), после установки плагина в нем появится пункт Favicon (2) для загрузки иконки. Нажмите кнопку «Выберите из библиотеки мультимедиа» (3) и укажите расположение файла с иконкой на вашем компьютере. Нажмите кнопку «Генерировать favicon» (4).
![]()
Из админки WordPress вас перебросит на официальный сайт плагина, где вы сможете настроить способ отображения иконки (5) для нового или работающего сайта, указать алгоритм сжатия и масштабирования картинки.
Внесите изменения при необходимости и нажмите кнопку генерации фавикона (6). После этого вы снова вернетесь в админ-панель, а плагин автоматически установит выбранный фавикон.
![]()
Почему лучше установить без использования плагина?
Для сохранения фавикона в качестве иконки сайта плагин должен оставаться активным. При его деактивации фавикон отображаться не будет.
Обратите внимание, большое количество плагинов замедляет скорость загрузки сайта, поэтому такие разовые операции, как установка фавикона, лучше выполнять без использования дополнительных плагинов – т.е. поставить фавикон первыми тремя способами.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
- Виртуальные серверы с NVMe SSD дисками от 299 руб/мес
- Безлимитный хостинг на SSD дисках от 142 руб/мес
- Выделенные серверы в наличии и под заказ
- Регистрацию доменов в более 350 зонах
