Что такое favicon.ico и как его правильно подключить к сайту

mr. Cooper • 1 час назад • Технологии

#Frontend #devtools #HTML #веб_разработка #разработка_сайтов #favicon_ico #favicon #иконка_сайта #браузер #веб_мастер

Что такое favicon.ico и как его правильно подключить к сайту

Сайт открывается нормально, но в DevTools вдруг появляется:

//text

GET / 200 OK
GET /favicon.ico 404 Not Found

Главная страница загрузилась, стили работают, JavaScript выполняется. Ошибка только у одного маленького файла - favicon.ico.

Для пользователя это обычно означает простую вещь: во вкладке нет иконки сайта, вместо неё браузер показывает свой стандартный значок.

Бывает и другая ситуация. Запрос к favicon.ico завершается успешно:

//text

GET /favicon.ico 200 OK

Но дальше выясняется, что сервер отправил:

//text

Content-Type: text/html

а в ответе находится:

//html

<!DOCTYPE html>
<html>

То есть браузер попросил иконку, а получил HTML-страницу. Такое вполне реально встретить в Laravel и других приложениях, где неизвестные адреса передаются основному роуту.

На этом маленьком файле вообще много странностей. В одном проекте лежит только favicon.ico, в другом рядом находятся PNG, SVG, apple-touch-icon.png, 192×192, 512×512 и ещё site.webmanifest.

Так что же такое favicon.ico на самом деле? Почему внутри него бывает несколько изображений, можно ли заменить его PNG или SVG и что должен вернуть сервер, чтобы браузер действительно показал нужную иконку?

Что находится в favicon.ico

Начать стоит с названия файла.

favicon - это назначение изображения. Оно используется как иконка сайта.

ICO - формат файла.

Получается, favicon.ico - обычный файл формата ICO, который используется для хранения favicon.

Сам формат интересен тем, что один ICO может содержать несколько изображений. Например:

//text

favicon.ico
├── 16×16
├── 32×32
└── 48×48

Все три варианта находятся внутри одного файла.

Это одна из причин, почему ICO долгое время был удобным форматом для favicon. Браузеру достаточно обратиться к одному ресурсу, внутри которого есть подходящие размеры.

Точный набор зависит от того, как файл создавался. В одном favicon.ico могут быть только два изображения, в другом - больше.

И здесь часто допускают довольно простую ошибку.

Есть файл:

//text

logo.png

Его переименовывают:

//text

favicon.ico

Название стало правильным, но формат остался прежним. Внутри по-прежнему PNG.

Расширение файла не выполняет конвертацию.

Для настоящего ICO изображение нужно сохранить или преобразовать в формат ICO. При этом программа может добавить внутрь несколько размеров.

Почему для favicon нужны маленькие изображения

Допустим, исходный логотип имеет размер 800×300 пикселей. На сайте он выглядит хорошо: текст читается, линии различимы, мелкие элементы заметны.

Теперь тот же логотип становится 16×16.

Места уже почти нет. Текст превращается в набор неразличимых пикселей, тонкие линии исчезают. Даже хороший логотип в таком размере может выглядеть плохо.

По этой причине favicon часто делают отдельно от основного логотипа. Оставляют знак, букву или простую геометрическую форму.

Размеры вроде этих встречаются очень часто:

//text

16×16
32×32
48×48

Они могут находиться внутри одного ICO.

При этом размер файла в килобайтах никак не показывает, какие изображения в нём записаны. Например, favicon.ico размером 3 KB может содержать несколько вариантов иконки.

Проверить это можно в графическом редакторе или специальной программе для просмотра ICO.

Где должен лежать favicon.ico

Самый привычный вариант:

//text

/public_html/
├── index.html
├── favicon.ico
└── ...

И подключение:

//html

<link rel="icon" href="/favicon.ico">

Тег находится внутри <head>.

Но обязательного правила «favicon всегда лежит в корне» нет. Файл вполне может находиться, например, здесь:

//text

/assets/icons/favicon.ico

Тогда и ссылка должна быть другой:

//html

<link rel="icon" href="/assets/icons/favicon.ico">

Это важно при диагностике. Файл может физически существовать на сервере, но запрос /favicon.ico всё равно будет возвращать 404, если настоящий адрес ресурса другой.

Корневой /favicon.ico просто стал настолько привычным адресом, что браузеры могут проверять его самостоятельно.

Что происходит при запросе favicon

Favicon загружается как обычный веб-ресурс.

Браузер открывает страницу:

//text

GET /

получает HTML, разбирает документ и загружает указанные в нём ресурсы.

Для иконки появляется отдельный запрос:

//text

GET /favicon.ico

Сервер должен вернуть файл изображения.

Например:

//text

HTTP/1.1 200 OK
Content-Type: image/x-icon

У такого ответа всё выглядит логично: запрос успешный, тип содержимого соответствует ICO.

Если файла нет:

//text

HTTP/1.1 404 Not Found

Браузер просто остаётся без favicon.

А вот такой ответ уже требует проверки:

//text

HTTP/1.1 200 OK
Content-Type: text/html

200 здесь не означает, что favicon работает. Сервер действительно успешно обработал запрос, только отправил не тот ресурс.

Почему Laravel может вернуть HTML

Представим Laravel-проект, в котором нет физического файла:

//text

public/favicon.ico

Браузер всё равно запрашивает:

//text

GET /favicon.ico

Если конфигурация сервера передаёт неизвестные пути в приложение, запрос попадает в Laravel. Дальше срабатывает основной маршрут или fallback.

В итоге сервер может вернуть главную страницу:

//text

GET /favicon.ico 200
Content-Type: text/html

В браузере сайт при этом выглядит совершенно исправным.

Проблема обнаруживается только при проверке самого запроса.

Самый простой способ - открыть адрес напрямую:

//text

https://example.ru/favicon.ico

Если сервер отдаёт файл, с URL всё в порядке.

Если открывается главная страница сайта, запрос перехватывает приложение.

Если появляется 404, сервер не нашёл ресурс по этому адресу.

Для Laravel решение обычно простое: настоящий favicon кладут в публичную директорию и проверяют, что запрос к нему не уходит в application routing.

Можно ли использовать PNG вместо ICO

Можно.

Например:

//html

<link rel="icon" type="image/png" href="/favicon.png">

Можно указать и конкретный размер:

//html

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

Здесь браузер получает обычный PNG. Внутри него нет нескольких вариантов изображения, как в ICO.

Для современного сайта PNG вполне подходит.

Но favicon.ico всё ещё встречается повсеместно по двум понятным причинам. Формат исторически связан с favicon, а /favicon.ico давно стал стандартным адресом для автоматического поиска иконки.

Поэтому в старом проекте вполне можно встретить только:

//text

/favicon.ico

а в новом:

//text

/favicon-32x32.png
/favicon-16x16.png

Оба варианта имеют право на существование.

Что насчёт SVG

SVG тоже можно использовать:

//html

<link rel="icon" type="image/svg+xml" href="/favicon.svg" >

Векторный формат не привязан к одному набору пикселей. Для простого символа это удобно.

Сложный логотип с мелким текстом ситуацию не спасает. На размере вкладки ему всё равно мало места.

Поэтому SVG favicon обычно делают достаточно простым: знак, буква, монограмма, геометрическая форма.

Поддержка SVG favicon зависит от браузера и конкретного сценария, поэтому он не всегда полностью заменяет ICO или PNG в проекте, где требуется максимально широкий набор вариантов.

Зачем генераторы создают столько иконок

После работы генератора favicon папка может выглядеть примерно так:

//text

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
icon-192.png
icon-512.png
site.webmanifest

Для одной маленькой картинки это выглядит странно.

Но эти файлы предназначены для разных случаев.

favicon.ico и небольшие PNG используются как варианты favicon.

apple-touch-icon.png связан с отображением сайта на домашних экранах устройств Apple.

192×192 и 512×512 обычно встречаются в проектах с Web App Manifest и PWA.

То есть генератор не утверждает, что все эти файлы обязательны. Он просто создаёт набор под разные сценарии.

Для обычного сайта вполне может оказаться достаточно:

//text

favicon.ico

и:

//html

<link rel="icon" href="/favicon.ico">

Почему после замены favicon остаётся старый

С favicon есть ещё одна особенность, которая иногда сбивает с толку.

Файл на сервере заменили. Открываем сайт - старая картинка всё ещё во вкладке.

Сначала стоит проверить сам файл и HTTP-запрос. Если там уже новая версия, следующим подозреваемым становится кэш браузера.

Для проверки можно открыть сайт в приватном окне или другом браузере.

Есть ещё один простой способ диагностики - временно изменить URL:

//html

<link rel="icon" href="/favicon-v2.ico">

Для браузера это уже новый ресурс.

Если favicon-v2.ico появляется сразу, а старый адрес продолжает показывать прежнюю картинку, проблема была связана с кэшированием.

Как проверить favicon через DevTools

Когда иконка не отображается, полезнее посмотреть сетевой запрос, чем несколько раз обновлять вкладку.

Открываем DevTools → Network, обновляем страницу и ищем favicon.

Для ICO нормальный ответ может выглядеть так:

//text

Status: 200
Content-Type: image/x-icon

Для PNG:

//text

Status: 200
Content-Type: image/png

Для SVG:

//text

Status: 200
Content-Type: image/svg+xml

404 - ресурс не найден.

200 + text/html - сервер что-то вернул, но это HTML. Открываем Response и смотрим содержимое.

Если там:

//html

<!DOCTYPE html>
<html>

перед нами страница сайта, а не favicon.

На этом этапе уже обычно понятно, где искать проблему: URL, файл, серверная маршрутизация или кэш.

Что в итоге достаточно для обычного сайта

Для простого сайта не обязательно подключать сразу десять вариантов иконок.

Базовая схема может быть такой:

//text

/favicon.ico

и:

//html

<link rel="icon" href="/favicon.ico">

После этого стоит один раз проверить запрос:

//text

GET /favicon.ico

Нужны три вещи:

//text

Status: 200
Content-Type: image/x-icon

и сам ответ должен содержать ICO-файл, а не HTML.

PNG и SVG можно использовать вместо ICO, если это соответствует задаче проекта. apple-touch-icon относится к другому сценарию, а большие изображения вроде 192×192 и 512×512 чаще появляются вместе с manifest и PWA.

Сам favicon.ico при этом остаётся довольно простым ресурсом. Это ICO-файл, внутри которого может находиться несколько небольших вариантов изображения. Браузер получает его по отдельному URL, сервер возвращает содержимое, а дальше уже используется подходящий размер.

И если во вкладке вдруг снова вместо логотипа появился стандартный значок браузера, первым делом стоит посмотреть не на саму вкладку, а на:

//text

GET /favicon.ico

Именно этот запрос обычно довольно быстро показывает, что произошло.