Как исправить надоедливую ошибку 404 favicon.ico Not Found

May 31, 2026 · 4 min read

Вы открываете консоль браузера на свежей HTML-странице и сразу видите: Failed to load resource: the server responded with a status of 404 (Not Found) — favicon.ico. Вы не ссылались ни на какой favicon. Вы его не запрашивали. Тем не менее он там есть и засоряет ваши логи каждый раз.

Вот что на самом деле происходит и как это правильно исправить.

Ключевые выводы

Браузеры, краулеры и инструменты мониторинга автоматически запрашивают /favicon.ico из корня сайта, даже без HTML-ссылки.
Ошибка 404 безвредна, но засоряет серверные логи и скрывает реальные проблемы.
Наиболее надёжное решение — разместить реальный файл favicon.ico в корне сайта.
В современных проектах также следует объявлять варианты SVG, PNG и Apple Touch Icon через <link rel="icon"> в <head> HTML-документа.
Такие фреймворки, как Next.js, управляют размещением favicon через файловые соглашения, однако требование к запросу на уровне корня остаётся неизменным.

Почему браузеры запрашивают favicon.ico без явного указания

Браузеры не ждут, пока ваш HTML укажет им, где находится favicon. Согласно стандарту WHATWG HTML, если на странице нет явного тега <link rel="icon">, браузеры автоматически отправляют GET-запрос к /favicon.ico в корне сайта. Это неявное обнаружение favicon — встроенное поведение браузера, а не ошибка в вашем коде.

И дело не только в браузерах. RSS-ридеры, предпросмотр ссылок в Slack, краулеры поисковых систем и инструменты мониторинга доступности — все они выполняют тот же автоматический запрос. Поэтому, даже если ваш браузер учитывает тег <link rel="icon">, другие клиенты всё равно могут обращаться напрямую к /favicon.ico.

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

Правильное решение: разместить реальный favicon.ico в корне сайта

Наиболее надёжный способ — разместить реальный файл favicon.ico в корне сайта, чтобы автоматический запрос возвращал статус 200 вместо 404.

Сгенерировать файл можно на favicon.io или realfavicongenerator.net. Поместите файл сюда:

/favicon.ico   ← браузеры и краулеры запрашивают этот путь автоматически

Это работает независимо от того, какие другие объявления favicon есть в вашем HTML.

Современная настройка favicon: полное объявление в HTML

После того как файл favicon.ico в корне сайта готов, добавьте явные объявления в <head> для современных браузеров. В документации MDN по rel=“icon” рекомендуется использовать rel="icon" вместо устаревшего rel="shortcut icon".

<!-- Файл /favicon.ico в корне сайта отдаётся автоматически — HTML-тег не требуется -->

<!-- PNG favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">

<!-- SVG favicon для браузеров, которые его поддерживают -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- Apple Touch Icon для закладок на главном экране iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest для устанавливаемых PWA -->
<link rel="manifest" href="/manifest.webmanifest">

Несколько важных моментов:

SVG-фавиконы идеально масштабируются при любом размере и поддерживают тёмную тему через CSS prefers-color-scheme непосредственно внутри SVG-файла.
Apple Touch Icon предназначен специально для iOS, когда пользователь сохраняет сайт на главный экран. Это отдельный файл, не связанный с favicon, как правило представляющий собой PNG-изображение размером 180×180 пикселей.
Иконки Web App Manifest служат другой цели — они определяют иконки для установленных PWA. Они не заменяют favicon и не предотвращают ошибку 404 для /favicon.ico.

Что насчёт фреймворков?

Специфичный для фреймворков инструментарий берёт часть этой работы на себя. Например, Next.js App Router воспринимает файл favicon.ico, помещённый в директорию app/, как специальное файловое соглашение и автоматически генерирует корректные метаданные. Другие фреймворки имеют аналогичные соглашения — обратитесь к документации вашего фреймворка. Независимо от способа настройки favicon, по-прежнему рекомендуется убедиться, что запросы к /favicon.ico обрабатываются корректно, поскольку браузеры, краулеры и другие клиенты могут обращаться напрямую по этому пути.

Быстрая диагностика: проверка через DevTools браузера

Откройте вкладку Network в DevTools, перезагрузите страницу и отфильтруйте запросы по favicon. Если вы видите 404 для favicon.ico, значит, файл в корне отсутствует или не отдаётся корректно. Ответ со статусом 200 означает, что всё в порядке.

Заключение

Разместите реальный favicon.ico в корне сайта — один этот файл устранит автоматическую ошибку 404 от браузеров, краулеров и инструментов мониторинга. Затем добавьте явные объявления <link rel="icon"> для SVG-фавикона, PNG-запасного варианта и Apple Touch Icon, чтобы современные браузеры получали наиболее подходящий формат. Чистые логи, корректные иконки — без каких-либо костылей.

Часто задаваемые вопросы

Вы можете отфильтровать её из консоли, однако базовый запрос по-прежнему будет достигать сервера и отображаться в логах, аналитике и инструментах мониторинга. Размещение реального файла favicon.ico — это разовое исправление, которое устраняет проблему в её источнике, а не скрывает её. К тому же это значительно проще, чем настраивать фильтры в нескольких инструментах.

Да. Многие клиенты — в том числе устаревшие краулеры, RSS-ридеры и боты предпросмотра ссылок — игнорируют HTML-теги link и запрашивают /favicon.ico напрямую из корня сайта. Без файла по этому пути такие запросы вернут 404. Наличие как корневого favicon.ico, так и современных объявлений через link обеспечивает надёжную поддержку всех клиентов.

Файл ICO с несколькими разрешениями, содержащий варианты 16×16, 32×32 и 48×48 пикселей, покрывает практически все сценарии использования. Большинство генераторов favicon создают его автоматически. Если вам нужен только один размер, наиболее универсальным вариантом по умолчанию является 32×32 — он хорошо отображается во вкладках браузера и на панелях закладок на всех основных платформах.

Браузеры агрессивно кэшируют фавиконы — иногда на несколько дней. Попробуйте выполнить жёсткое обновление страницы, очистить кэш браузера или проверить в режиме инкогнито. Также убедитесь, что файл действительно отдаётся из корня сайта и возвращает успешный ответ. Если он загружается по этому пути, ошибка 404 должна исчезнуть после истечения срока действия кэша.

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.