Большие амбиции крошечного квадрата

Маленький квадратик 16×16 пикселей — а сколько высокомерия. Он появляется в браузерной вкладке, в закладках, в результатах поиска Яндекс и Google, на экране смартфона. Без него сайт выглядит как человек без лица: технически функционирует, но что-то явно не так. В этом посте — быстрая и конкретная инструкция, как сделать favicon своими силами за 15 минут, без дизайнера и Photoshop.

Что такое favicon и где он появляется

Favicon (от Favorites Icon) — это иконка сайта, которую браузер показывает на вкладке рядом с названием страницы. Но этим дело не ограничивается: тот же значок отображается в закладках, в истории браузера, на экране телефона при добавлении сайта на главный экран — и, что особенно приятно, в сниппетах результатов поисковой выдачи Google. Один маленький квадрат, а присутствует буквально везде.

Шаг 1. Делаем иконку

Переходим на сайт favicon-generator.org.

Загружаем квадратное изображение — логотип, знак, любой графический элемент, который ассоциируется с вашим сайтом. Чем проще и контрастнее — тем лучше: при размере 16×16 пикселей сложный рисунок превращается в кашу.

Нажимаем Create Favicon и ждём несколько секунд.

Шаг 2. Скачиваем и сохраняем

Скачиваем архив по ссылке «Download the generated favicon». Сразу называем распакованную папку /favicon/ — это сэкономит время на следующих шагах.

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

Распаковываем архив.

Шаг 3. Загружаем файлы на сайт

Загружаем папку /favicon/ в корень сайта (через FTP, SFTP или файловый менеджер хостинга).

Файл favicon.ico из папки дополнительно копируем отдельно в корень сайта — некоторые браузеры и сервисы ищут его именно там, по адресу vashsite.ru/favicon.ico, не заглядывая ни в какие подпапки.

Шаг 4. Редактируем header.php

Скачиваем файл темы header.php и открываем его в текстовом редакторе (Notepad++, VS Code — любом, кроме встроенного онлайн-редактора консоли WordPress).

Редактировать файлы темы через встроенный редактор WordPress — плохая идея. Почему именно — разбираем в отдельном посте.

Находим закрывающий тег </head> и вставляем перед ним сохранённый HTML-код иконок. Проверяем, что пути к файлам указывают на папку /favicon/:

<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

Сохраняем файл и загружаем обратно на сервер, заменяя оригинал.

Шаг 5. Проверяем результат

Открываем сайт в браузере и нажимаем Ctrl+F5 (принудительное обновление без кеша). Смотрим на вкладку — favicon должен появиться.

Если иконка не отображается: проверьте правильность путей в HTML-коде и убедитесь, что папка /favicon/ действительно загружена в корень сайта, а не куда-нибудь в /wp-content/.

Ошибка в Яндекс.Вебмастере: «Файл favicon не найден»

Бывает так: сайт летает, заявки идут, метрики радуют глаз, и тут Яндекс.Вебмастер вежливо подкидывает в диагностику красную плашку. Не про взлом и не про санкции — про иконку размером с ноготь. Фавиконка занимает 16 на 16 пикселей, а нервов съедает как дедлайн в пятницу вечером.

Выглядит это так:

Файл favicon не найден

Рекомендация актуальна Исправьте ошибку и отправьте сайт на проверку
Последняя проверка 07.10.2128
Робот не смог загрузить фавиконку — файл с изображением, которое должно отображаться во вкладке браузера и может быть показано возле названия сайта в поиске. Как установить фавиконку.
Чтобы изменения быстрее появились в результатах поиска, отправьте главную страницу сайта (где размещена ссылка на фавиконку) на переобход. Для этого перейдите в раздел Переобход страниц. Фавиконка обновится в результатах поиска в течение трех дней.

Расшифровка простая: робот не смог загрузить фавиконку — файл с изображением, которое отображается во вкладке браузера и может быть показано возле названия сайта в поиске. Это классическое «404: иконка не найдена», только претензию предъявляет не клиент, а поисковый робот. А робот в трубку не звонит и писем не пишет — он просто молча вычёркивает вашу иконку из выдачи.

Что рекомендует Яндекс

Чтобы изменения быстрее появились в результатах поиска, главную страницу сайта (ту, где размещена ссылка на фавиконку) нужно отправить на переобход. Для этого в Вебмастере есть раздел «Переобход страниц». После этого фавиконка обновится в результатах поиска в течение трёх дней.

Но сначала ‐ исправить причину. Отправлять на переобход сайт, на котором иконка по-прежнему недоступна, ‐ всё равно что перезагружать роутер при выдернутом кабеле: ритуал красивый, толку ноль.

Что не так?

Начинаем с файлов, которые описывают иконки для разных платформ: browserconfig.xml (плитки Windows) и manifest.json (иконки для Android и веб-приложений). Иконки лежат в папке /favicon/, а пути в этих файлах вели в корень сайта, мимо папки.

Вот как выглядела ошибка в manifest.json:

"src": "/android-icon-36x36.png"

А вот как должно быть:

"src": "/favicon/android-icon-36x36.png"

Одна пропущенная папка в пути ‐ и файл «не найден». Это как отправить курьера по адресу соседнего дома: он честно позвонит в чужую дверь, никого не застанет и уйдёт, а посылка так и останется лежать у вас. Робот Яндекса делает ровно то же самое, только без попытки дозвониться.

Обновляем пути в файлах

browserconfig.xml

Во всех путях указываем папку /favicon/ и закрываем каждый тег как положено ‐ через />:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/favicon/ms-icon-70x70.png"/>
      <square150x150logo src="/favicon/ms-icon-150x150.png"/>
      <square310x310logo src="/favicon/ms-icon-310x310.png"/>
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>

manifest.json

Здесь все пути должны вести в папку /favicon/ и начинаться со слэша ‐ это путь от корня сайта. Экранированные слэши (\/) в JSON допустимы и означают то же самое, но читать их ‐ то ещё удовольствие, поэтому используем обычные:

{
  "name": "App",
  "icons": [
    {
      "src": "/favicon/android-icon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "/favicon/android-icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "/favicon/android-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "/favicon/android-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "/favicon/android-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0"
    },
    {
      "src": "/favicon/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0"
    }
  ]
}

Небольшой бонус: поле "name": "App" лучше заменить на название вашего сайта. Иначе при установке сайта как приложения пользователь увидит скромное «App», будто вы разработчик калькулятора.

Добавляем SVG иконку

Яндекс считает SVG рекомендуемым форматом для фавиконки: векторная картинка остаётся чёткой на любом размере и выглядит заметнее на сервисах Яндекса, чем растровый файл неподходящего разрешения. Плюс ‐ один файл вместо десятка PNG-версий.

Шаг 1. Готовим файл favicon.svg. Иконка должна быть квадратной, с простой графикой: мелкие детали на размере 16 пикселей превращаются в кашу. Если в логотипе есть текст, переведите его в кривые, иначе при отсутствии шрифта буквы поведут себя непредсказуемо. Пример-заготовка:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
  <rect width="120" height="120" rx="24" fill="#2457d9"/>
  <text x="60" y="78" font-size="56" font-weight="700" text-anchor="middle" fill="#ffffff" font-family="Arial, sans-serif">WP</text>
</svg>

Шаг 2. Загружаем файл на сервер в папку /favicon/, чтобы он открывался по адресу https://ваш-сайт.ru/favicon/favicon.svg.

Шаг 3. Подключаем иконку в блоке head страницы:

<link rel="icon" href="/favicon/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/favicon/apple-icon-180x180.png">
<link rel="manifest" href="/manifest.json">

Что здесь происходит: SVG ‐ основной вариант для современных браузеров и Яндекса, favicon.ico ‐ запасной для старичков, apple-touch-icon ‐ для устройств Apple, а манифест связывает всё это с Android-иконками. Параметр type="image/svg+xml" обязателен: без него браузер может не понять, что ему подсунули.

В WordPress проще всего добавить эти теги через дочернюю тему. Откройте файл functions.php дочерней темы и добавьте:

add_action('wp_head', function () {
    echo '<link rel="icon" href="/favicon/favicon.svg" type="image/svg+xml">' . "\n";
    echo '<link rel="icon" href="/favicon.ico" sizes="any">' . "\n";
});

Одна лишняя запятая в functions.php ‐ и вместо сайта вас встретит знаменитый белый экран, поэтому порядок такой: резервная копия сначала, эксперименты потом. Ещё момент: если в настройках темы уже задан «Значок сайта», WordPress выведет собственные теги иконки. Загляните в исходный код страницы и убедитесь, что они не конфликтуют с вашими.

Проверяем и отправляем на переобход

1. Откройте в браузере /favicon/favicon.svg, /favicon.ico, /manifest.json и /browserconfig.xml. Все четыре должны открываться, а не отдавать 404.
2. Проверьте ответ сервера командой в терминале:

curl -I https://ваш-сайт.ru/favicon/favicon.svg

В ответе ищем HTTP/2 200 и заголовок content-type: image/svg+xml. Если вместо этого приходит 403, 404 или перенаправление на страницу входа ‐ вот и причина, по которой робот ушёл ни с чем.

3. Убедитесь, что robots.txt не закрывает папку /favicon/ директивой Disallow, а файлы не спрятаны за защитным плагином, правилами CDN или файрволом. Роботу нужен доступ без пароля и без капчи.
4. В Яндекс.Вебмастере откройте «Переобход страниц», добавьте главную страницу и отправьте её на переобход. Затем в диагностике сайта отправьте исправленную ошибку на проверку.
5. Ждём до трёх дней. Нажимать кнопку проверки каждые пять минут бесполезно: обновление страницы ускоряет только рост вашего давления, а робот придёт сам, когда сочтёт нужным.

Ошибка «Файл favicon не найден» ‐ это почти всегда не катастрофа, а мелкая техническая неряшливость: путь без нужной папки, закрытый доступ или иконка в неподходящем формате. Исправляется за вечер, если знать, куда смотреть. А если смотреть некогда, Самсон Ярдов поступает по-деловому: время стоит дороже, чем поиск пропущенной папки в пути. Он описывает задачу в свободной форме и передаёт её в dev-team Форсаж ‐ с резервной копией, проверкой на тестовой копии сайта и отчётом о результате. Бизнес продолжает работать, а иконка во вкладке наконец-то находится.

Скачать корректные файлы browserconfig.xml и manifest.json

Скачать browserconfig.xml
Скачать manifest.json