Favicon WordPress сайта — инструкция как создать и установить фавикон
Дата публикации: 8 ноября 2025
Дата обновления: 21 апреля 2026
10 253
Время прочтения: 35 минут
Многие запоминают сайт по маленькой картинке, которая находится вверху браузера на вкладке. Эта image называется фавикон и важно, чтобы он был у вас на блоге. А как правильно и быстро сформировать favicon и установить в CMS WordPress, мы сейчас подробно расскажем.
Что такое favicon
Фавикон, это как логотип сайта WordPress, он отображается в браузере на вкладке и в выдаче перед ссылкой. Когда в браузере открыто много вкладок, то легко найти какую-то конкретную страницу можно по favicon. Именно так в основном и поступают пользователи, миниатюрные изображения хорошо заметны.
А еще в выдаче поисковой системы Яндекс, перед каждым сниппетом расположена иконка. Лично мне так проще найти нужный ресурс. Особенно, когда не знаешь на каком месте он находится и приходится просматривать несколько страниц поиска.
Рекомендуем в качестве фавиконки использовать логотип компании. Это самый часто встречающийся элемент и его быстро запоминают читатели. Имейте ввиду, что размер image должен быть 16*16 px и при этом картинка должна быть различима.
А еще в выдаче поисковой системы Яндекс, перед каждым сниппетом расположена иконка. Лично мне так проще найти нужный ресурс. Особенно, когда не знаешь на каком месте он находится и приходится просматривать несколько страниц поиска.
Рекомендуем в качестве фавиконки использовать логотип компании. Это самый часто встречающийся элемент и его быстро запоминают читатели. Имейте ввиду, что размер image должен быть 16*16 px и при этом картинка должна быть различима.
Где можно увидеть favicon
Иконка сайта создает уникальность и запоминаемость всего веб-ресурса WordPress. Когда ее не устанавливают, то вместо картинки отображается серый круг в виде земного шара. Заметить favicon можно в таких местах, как:
-
Вкладка браузера; - Закладки в браузере;
- Сниппет Яндекса;
- Поиск Google на Android;
- Icon на рабочем столе компьютера или мобильного устройства;
- Адресная строка Opera, Firefox, Safari и возможно других браузеров.
Формат фавикона WordPress
В конце девяностых годов изображение форматом 16х16 px загружали в виде файла favicon.ico в соответствующую корневую директорию сайта WordPress. А впервые эти image еще в 1999 году начал показывать browser Internet Explorer 5 в избранных закладках.
В наше время favicon современной версии повсюду отображается возле домена. Поэтому, чтобы на любом устройстве иконку было хорошо видно, их необходимо делать различных форматов для WordPress. Размеры начинаются с 16х16 пикселей и заканчиваются 512х512 пикселей, редко бывает 256х256 pixel.
Контейнер html разметки ICO может хранить несколько image разных форматов, например, такие как:
В наше время favicon современной версии повсюду отображается возле домена. Поэтому, чтобы на любом устройстве иконку было хорошо видно, их необходимо делать различных форматов для WordPress. Размеры начинаются с 16х16 пикселей и заканчиваются 512х512 пикселей, редко бывает 256х256 pixel.
Контейнер html разметки ICO может хранить несколько image разных форматов, например, такие как:
- 16х16
- 24х24
- 32х32
- 48х48
- 64х64
- 128х128
ICO читают все браузеры, но из-за множества img картинок, файл долго грузится. Поэтому сейчас на смену ICO пришли новые современные форматы, такие, как:
SVG — это векторный формат, т.е. при увеличении он не искажается, потому, что сделан не из пикселей, а из векторов. Создать изображение в таком формате можно только на определенных программах, например, ADOBE ILLUSTRATOR ИЛИ FIGMA.
PNG — этот формат пользуется наибольшей популярностью, потому, что все картинки можно легко преобразовать в такие формы.
SVG — это векторный формат, т.е. при увеличении он не искажается, потому, что сделан не из пикселей, а из векторов. Создать изображение в таком формате можно только на определенных программах, например, ADOBE ILLUSTRATOR ИЛИ FIGMA.
PNG — этот формат пользуется наибольшей популярностью, потому, что все картинки можно легко преобразовать в такие формы.
Можно конечно загрузить favicon в формате JPEG или GIF, но тогда они будут долго загружаться, потому, что тяжелые. Для seo оптимизации собственного сайта WordPress важно, чтобы скорость загрузки была как можно меньше. Поэтому самый оптимальный вариант, это все таки PNG, убедитесь, что у вас именно он.
Размеры фавикона WordPress
Есть возможность загрузить разные image для отображения favicon. Например, показать в иконках браузера одно image, а для иконки на рабочем столе другое, скажем, логотип компании.
Чтобы воплотить такую идею придется подготовить файлы разных размеров для загрузки в WordPress. В таблице мы показываем для каких браузеров какие подойдут размеры.
Чтобы воплотить такую идею придется подготовить файлы разных размеров для загрузки в WordPress. В таблице мы показываем для каких браузеров какие подойдут размеры.
Также не будет лишним загрузить два файла конфигурации в которых напишите правила использования картинок для Safari и Windows.
А macOS Safari будет искать файл safari-pinned-tab.svg векторную image. Если его не будет, то покажет скриншот страницы.
А macOS Safari будет искать файл safari-pinned-tab.svg векторную image. Если его не будет, то покажет скриншот страницы.
Чтобы не запутаться во всех этих размерах и форматах, мы рекомендуем использовать онлайн-генератор. Этот сервис сгенерирует все нужные изображения, да и все.
Как правильно создать favicon
Обычно favicon делают из логотипа. Но надо, чтобы в уменьшеном виде логотип был разборчив. И еще, иконка должна быть квадратной, а логотипы обычно прямоугольные. Поэтому можно или изменить логотип или взять вообще другое image.
В WordPress favicon загружается одного формата, а CMS сама создает из него все необходимые размеры. Это очень удобно, не придется ломать голову, где сделать такое количество картинок разных видов.
Чтобы загрузить в WordPress ваше изображение, нужно найти , где в теме, которую вы используете это можно сделать.
Обычно в меню управления WordPress заходите во “Внешний вид” - “Настроить”. Затем ищите “Свойства” и там загружаете фавикон.
Лучше всего сразу максимальный размер делайте — это 512х512, а из него формируются все остальные варианты, которые потребуются.
Есть еще один вариант создания иконок разных размеров. Это онлайн генератор favicon. С его помощью можно бесплатно сгенерировать весь комплект всех размеров. Вот какие настройки делаются в онлайн-генераторе:
В WordPress favicon загружается одного формата, а CMS сама создает из него все необходимые размеры. Это очень удобно, не придется ломать голову, где сделать такое количество картинок разных видов.
Чтобы загрузить в WordPress ваше изображение, нужно найти , где в теме, которую вы используете это можно сделать.
Обычно в меню управления WordPress заходите во “Внешний вид” - “Настроить”. Затем ищите “Свойства” и там загружаете фавикон.
Лучше всего сразу максимальный размер делайте — это 512х512, а из него формируются все остальные варианты, которые потребуются.
Есть еще один вариант создания иконок разных размеров. Это онлайн генератор favicon. С его помощью можно бесплатно сгенерировать весь комплект всех размеров. Вот какие настройки делаются в онлайн-генераторе:
- Установка любого фона;
- Настройка теней;
- Добавление текста на изображение;
- Сжать картинку для уменьшения веса;
- Создать кружочек из квадрата или просто закруглить края;
- Регулировка размера фото под кружок для WordPress;
- Создать SVG для вкладок macOS Safari;
- Сделать манифест для Android Chrome;
Также генератор сможет быстро заготовить конфигурационный файл browserconfig.xml для Windows и создать комплект иконок. Этот комплект необходимо загрузить в корневую директорию домена.
Установка фавикона на WordPress
Размер и формат
Используйте квадратное изображение 512×512 пикселей в формате PNG или ICO. Современные браузеры поддерживают SVG, но PNG остаётся золотым стандартом.
Кастомайзер темы
Перейдите в «Внешний вид» → «Настроить» → «Сайт идентичность». Там загрузите фавикон в формате PNG или ICO. WordPress автоматически создаст все нужные размеры.
Плагины-помощники
RealFaviconGenerator (бесплатный) создаёт иконки для всех устройств. Favicon by RealFaviconGenerator автоматизирует установку прямо из админки.
FTP и корень сайта
Загрузите файл favicon.ico в корневую папку WordPress (там же, где wp-config.php). Браузеры автоматически его обнаружат без дополнительных настроек.
Apple Touch Icon
Для iOS добавьте в <head> ссылку на иконку 180×180. Плагины делают это автоматически. Без неё iPhone покажет скриншот страницы.
Проверка результата
Используйте онлайн-инструменты вроде faviconchecker.com. Очистите кэш браузера — иногда иконка обновляется не сразу.
Загрузка сгенерированных изображений иконок
По умолчанию, когда вы создаете новый сайт на CMS WordPress, автоматически favicon будет в виде буквы “W” в кружочке. После загрузки своей картинки, начнет показываться она.
Выше мы уже рассказали, как установить иконку через панель управления WordPress. А сейчас расскажем, что делать, если вы создали комплект картинок через онлайн-генератор.
Тут все просто, заходите на хостинг в файловый менеджер. Проваливаетесь там в корневую дирректорию своего ресурса. Теперь нужно загрузить весь комплект картинок прямо в корень. В тему заходить не нужно.
Выше мы уже рассказали, как установить иконку через панель управления WordPress. А сейчас расскажем, что делать, если вы создали комплект картинок через онлайн-генератор.
Тут все просто, заходите на хостинг в файловый менеджер. Проваливаетесь там в корневую дирректорию своего ресурса. Теперь нужно загрузить весь комплект картинок прямо в корень. В тему заходить не нужно.
Установка кода с генератора фавикона
Если у вас набор иконок в html-формате, то пропишите весь код перед закрывающим тегом /head. Это можно сделать с помощью плагина Clearfy Pro, он платный, но решает очень много вопросов с технической настройкой сайта на WordPress.
А если не хотите покупать этот плагин, тогда просто зайдите в админку WP во “Внешний вид”, затем “Редактор тем”. Там найдите header.php (заголовок) и найдите в его коде /head, пропишите код перед ним и нажмите внизу на синюю кнопку “Обновить файл”. Так сохраните все изменения.
Рекомендуем всегда перед операциями с кодом сайта делать бэкап. Тогда если что-то сделаете не правильно, то можно будет восстановить свой веб-ресурс.
Установка favicon на сайт WordPress
Сейчас расскажем про самый распространенный способ установки иконки блога. Это применимо не только к WordPress, но и вообще к любой CMS.
Создайте изображение и назовите файл favicon.png, если этот формат, но может быть другой, например jpg, тогда естественно, пишите его. После этого загрузите его в public_html своего блога. Все просто и делается за пять минут. Как сделали это, приступаем к заключительному шагу.
Там же, в корневой директории заходите в файл header.php действующей темы и перед закрывающим тегом /head вставляете следующий код:
Создайте изображение и назовите файл favicon.png, если этот формат, но может быть другой, например jpg, тогда естественно, пишите его. После этого загрузите его в public_html своего блога. Все просто и делается за пять минут. Как сделали это, приступаем к заключительному шагу.
Там же, в корневой директории заходите в файл header.php действующей темы и перед закрывающим тегом /head вставляете следующий код:
<link rel=”shortcut icon” type=”image/png” href=”/favicon.png”/>
Не забывайте, что у вас файл favicon.png может быть вида favicon.jpg, тогда исправьте этот момент в коде.
“В WordPress добавить произвольный код в зону
— Рекомендация по интеграции кода в дочерней теме или исходном шаблоне<head>можно через административную панель. Перейдите в раздел «Внешний вид» → «Редактор тем», выберите файлheader.phpи разместите необходимый фрагмент непосредственно перед закрывающим тегом</head>. Этот метод подходит для добавления метатегов, скриптов аналитики, шрифтов и других элементов, которые должны загружаться в самом начале страницы.
Установка favicon с помощью плагина WordPress
Установите и активируйте плагин Favicon by RealFaviconGenerator. Его логотип появится в админке WordPress, эта функция бесплатная. Заходите в него, но предварительно загрузите иконку в библиотеку мультимедиа.
Если иконка уже есть в архиве медиафайлов, то нажимайте “Выберите из библиотеки мультимедиа”. В открывшемся окне выбираете свою image и нажимаете на кнопку “Генерировать favicon”. Затем нажимаете далее, далее и все готово.
Если иконка уже есть в архиве медиафайлов, то нажимайте “Выберите из библиотеки мультимедиа”. В открывшемся окне выбираете свою image и нажимаете на кнопку “Генерировать favicon”. Затем нажимаете далее, далее и все готово.
Расположение картинки сайта
Если вы устанавливали иконку через админку WordPress, то она размещается по следующему пути: /public_html /wp-content /uploads.
В папке /uploads все изображения по отдельным каталогам, которые создаются по датам загрузки файлов. Увидите там сначала папки по годам, открывая их открывается список папок по месяцам.
Если ищите favicon, то вспомните, когда примерно его устанавливали и так найдете. Посмотрите внимательно, вы добавляли одно image, а там их несколько штук разных размеров.
В папке /uploads все изображения по отдельным каталогам, которые создаются по датам загрузки файлов. Увидите там сначала папки по годам, открывая их открывается список папок по месяцам.
Если ищите favicon, то вспомните, когда примерно его устанавливали и так найдете. Посмотрите внимательно, вы добавляли одно image, а там их несколько штук разных размеров.
Проверка иконки сайта WordPress
Если вы пользовались для генерации комплекта фавиконок Favicon Generator, то воспользуйтесь им же для проверки правильности установки. Для этого вставьте скопированный адрес веб-ресурса в Favicon Checker и после этого жмите на кнопку Check Favicon.
Онлайн-сервис делает анализ показа рисунка на различных площадках в интернете и выдаст результат. Если все горит зеленым, то отображение везде сработало отлично.
Мы обычно проверяем правильное отображение favicon в поисковых системах Яндекс и Google. Для этого нужно перейти по этим ссылкам:
Онлайн-сервис делает анализ показа рисунка на различных площадках в интернете и выдаст результат. Если все горит зеленым, то отображение везде сработало отлично.
Мы обычно проверяем правильное отображение favicon в поисковых системах Яндекс и Google. Для этого нужно перейти по этим ссылкам:
https://favicon.yandex.net/favicon/ВАШ-ДОМЕН.RU
https://www.google.com/s2/favicons?domain=ВАШ-ДОМЕН.RU
https://www.google.com/s2/favicons?domain=ВАШ-ДОМЕН.RU
Индексация favicon
Фавиконки индексируют специальные роботы поисковых систем. И это происходит не очень быстро, иногда приходится ждать по две-три недели. А мы должны проверить, что image портала на WordPress доступна для роботов поиска.
Проследите, чтобы каталог, где находится favicon не был закрыт в файле robots.txt при помощи директивы Disallow. Тогда как только YandexBot просканирует сайт, картинка появится в сниппетах поисковой выдачи Яндекса.
Проследите, чтобы каталог, где находится favicon не был закрыт в файле robots.txt при помощи директивы Disallow. Тогда как только YandexBot просканирует сайт, картинка появится в сниппетах поисковой выдачи Яндекса.
Значок не появляется в Яндексе
После того, как вы установили favicon, сразу его не увидите. Выше мы написали, что роботы не сразу его проиндексируют. Да и после индексации вы можете не наблюдать иконку документа WordPress.
Это происходит из-за того, что браузеры кэшируют веб-ресурсы, чтобы их быстрее загружать. Очистите cookie браузера и тогда обнаружите фавиконку на месте.
Если есть необходимость поторопить индексацию, то можно в Яндекс Вебмастере отправить главную страницу на переобход. Для этого зайдите в “Индексирование” — “Переобход страниц”. В пустое полу вставьте ссылку на главную страницу и нажмите кнопку “Отправить”.
Это происходит из-за того, что браузеры кэшируют веб-ресурсы, чтобы их быстрее загружать. Очистите cookie браузера и тогда обнаружите фавиконку на месте.
Если есть необходимость поторопить индексацию, то можно в Яндекс Вебмастере отправить главную страницу на переобход. Для этого зайдите в “Индексирование” — “Переобход страниц”. В пустое полу вставьте ссылку на главную страницу и нажмите кнопку “Отправить”.
| Фактор | Характер проявления | Методы диагностики и ускорения | Типичный срок появления |
|---|---|---|---|
| Кэширование браузера | Фавикон отображается в локальной копии сайта, но не в поисковой выдаче или вкладках | Принудительная очистка кэша (Ctrl+F5), проверка в режиме инкогнито, сброс DNS-кэша системы | Мгновенно после очистки кэша |
| Индексация роботом Яндекса | Файл favicon.ico загружен на сервер, но в Яндекс.Вебмастере статус «не обнаружен» | Отправка главной страницы через «Переобход страниц» в разделе «Индексирование» → ручная проверка robots.txt | От 1 до 5 дней после запроса на переобход |
| Структура пути к фавикону | Значок отображается при прямом доступе example.com/favicon.ico, но не в выдаче | Проверка абсолютного пути в head (тег link), использование плагинов типа Favicon by RealFaviconGenerator | Сразу после исправления разметки |
| HTTP-заголовки сервера | Браузер загружает иконку, но Яндекс игнорирует из-за неправильного MIME-типа | Настройка .htaccess: AddType image/x-icon .ico или проверка через curl -I | После изменения конфигурации (перезагрузка сервера) |
| Размер и формат файла | Фавикон присутствует в коде, но Яндекс считает его некорректным (слишком большой вес) | Конвертация в ICO с размерами 16×16, 32×32, 48×48; оптимизация через сервис favicon.io | После повторной отправки страницы на индексацию |
| Кэширование на уровне CDN/хостинга | Новый favicon не появляется даже после очистки кэша браузера | Сброс кэша в панели управления хостингом или CDN (Cloudflare, StackPath), версионирование файла (favicon.ico?v=2) | 10–30 минут после сброса |
| Индексация в Google Search Console | В Google фавикон виден, в Яндексе — нет (разные роботы обходят сайт асинхронно) | Дополнительная отправка через инструмент «Проверка URL» в Яндекс.Вебмастере, усиление сигналов через sitemap | От 3 до 14 дней в зависимости от авторитетности домена |
| SSL и смешанный контент | Фавикон загружается по HTTP, а сайт на HTTPS — браузер блокирует отображение | Прописать относительный путь //example.com/favicon.ico или использовать protocol-relative URL | Немедленно после исправления ссылки |
| ⚡ Для ускорения появления фавикона в Яндексе используйте комбинацию: очистка кэша браузера → переобход главной через Вебмастер → проверка через месяц при отсутствии результата | |||
Ошибка 404
Бывает такое, что анализ сайта выдает 404 ошибки связанные с отсутствием apple-touch-icon-precomposed.png. Это происходит из-за того, что у вас не сформировались все нужные размеры шаблона.
Проследите, чтобы обязательно были следующие размеры картинок: 57х57, 76х76, 120х120, 152х152, 167х167, 180Х180. Тогда на всех устройствах изображение будет выглядеть более менее корректно, и не будет ничего обрезать.
Ошибка появляется из-за того, что робот ищет нужные размеры и не находя их создает ошибку 404.
Проследите, чтобы обязательно были следующие размеры картинок: 57х57, 76х76, 120х120, 152х152, 167х167, 180Х180. Тогда на всех устройствах изображение будет выглядеть более менее корректно, и не будет ничего обрезать.
Ошибка появляется из-за того, что робот ищет нужные размеры и не находя их создает ошибку 404.
Вирус favicon.ico
Злоумышленники могут взломать ваш интернет-проект на WordPress и разместить на нем свой вирус. Для этого обычно они маскируют вредоносную программу под какой-нибудь обычный файл. Например, это может быть favicon.ico.
Надо понимать, что .ico файл может быть не только картинкой, а вообще чем угодно. А вы даже и не подумаете на него, что там не favicon, а вирус. При этом название не вызывает подозрений.
Чтобы проверять свой ресурс на вирусы, установите плагин WordPress, который называется MalCare. Он сканирует досконально все файлы и папки и всегда находит замаскированные вредоносные программы проверяя их поведение.
Надо понимать, что .ico файл может быть не только картинкой, а вообще чем угодно. А вы даже и не подумаете на него, что там не favicon, а вирус. При этом название не вызывает подозрений.
Чтобы проверять свой ресурс на вирусы, установите плагин WordPress, который называется MalCare. Он сканирует досконально все файлы и папки и всегда находит замаскированные вредоносные программы проверяя их поведение.
Заключение
Друзья, мы рассказали все что знали про favicon сайта на WordPress: как его создать и добавить в базу данных. Изучите всю эту информацию, она вам наверняка пригодится.
И читайте другие статьи нашего блога, всегда стараемся опубликовать тот, материал, который будет полезен подписчикам.
И читайте другие статьи нашего блога, всегда стараемся опубликовать тот, материал, который будет полезен подписчикам.
Для написания этой статьи использовали литературу
- 1«SEO-продвижение как эффективный инструмент интернет-маркетинга» // Стратегии бизнеса. – 2014. – № 1 (3). – С. 120-124.
- 2«SEO продвижение как инструмент Интернет-маркетинга» // StudNet. – 2021. – Т. 4. – № 6. – С. 1
- 3«SEO-продвижение в системе комплексного интернет-маркетинга» // Социальные науки. – 2018. – № 2. – С. 49-55.
