favicon.ico: что это и нужен ли он ещё
favicon.ico — это файл иконки, который браузеры запрашивают из корня вашего домена по /favicon.ico, когда страница не объявляет собственной иконки. Это контейнер ICO, так что один файл может содержать сразу несколько битмапов (обычно 16x16, 32x32 и 48x48), а клиент выбирает нужный размер. Он всё ещё нужен, потому что краулеры, агрегаторы лент и боты превью ссылок запрашивают именно этот путь, не читая ваш HTML.
Соглашение, а не стандарт
Путь /favicon.ico никем не был закреплён спецификацией; Internet Explorer 5 запрашивал его, и остальной веб последовал за ним. Именно поэтому он работает вообще без разметки. Браузер, не нашедший тега <link> с иконкой на вашей странице, просто просит у сервера этот путь и использует то, что придёт в ответ.
Побочный эффект в том, что запрос происходит независимо от того, есть у вас файл или нет. Если его нет, сервер логирует 404 на каждого посетителя, а любой инструмент, который проверяет только этот путь, показывает для вашего сайта пустую заглушку.
Что внутри типичного favicon.ico
| Запись | Где используется |
|---|---|
| 16x16 | Адресная строка, списки закладок, записи истории |
| 32x32 | Вкладки браузера на дисплеях стандартной плотности |
| 48x48 | Ярлыки Windows и вкладки высокой плотности |
Куда кладётся файл
- public/
- favicon.icoaddServed at /favicon.ico
- favicon-32x32.pngPrimary tab icon
- apple-touch-icon.pngiOS Home Screen
Он должен разрешаться в корне сайта, а не в подкаталоге. Большинство фреймворков отображают каталог public или static в корень именно для этого; некоторые, включая свежий Next.js, также принимают app/favicon.ico и сами подключают тег.
Объявить его явно
<link rel="icon" href="/favicon.ico" sizes="any">Необязательно, так как путь запрашивается в любом случае, но стоит добавить: это делает набор иконок видимым в разметке и позволяет сбрасывать кеш строкой запроса, когда иконка меняется.
Частые вопросы о favicon.ico
Может ли favicon.ico на самом деле быть PNG?
Браузеры анализируют содержимое, а не доверяют расширению, так что PNG, отданный по /favicon.ico, обычно работает. Всё равно это плохая идея. Вы теряете поведение с несколькими размерами, ради которого путь и существует, а более строгие потребители могут его отвергнуть.
Как убрать 404 в логах?
Выложите файл. Подавление строки лога скрывает симптом, пока каждый инструмент, запрашивающий этот путь, по-прежнему ничего не получает.
Файл обязательно должен быть в корне?
Для автоматического запроса — да. Клиенты запрашивают именно /favicon.ico. Иконку можно отдавать с любого пути, если указать на неё тегом <link>, но именно корневой файл покрывает клиентов, которые никогда не разбирают ваш HTML.