Что такое фавикон
Фавикон (favicon, от favorite icon) — маленькая иконка сайта. Её видно на вкладке браузера, в закладках, в истории и в подсказках адресной строки. Когда сайт сохраняют на домашний экран телефона, фавикон становится ярлыком приложения.
Технически это обычная картинка, но подключается она особым тегом и должна существовать сразу в нескольких размерах: то, что читается на 512 пикселях, при 16 превращается в кашу.
Как подключить фавикон
Положите файлы в корень сайта и добавьте три строки в <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-32x32.png" type="image/png">
<link rel="apple-touch-icon" href="/favicon-180x180.png">
Первая строка закрывает вкладки и старые браузеры. Вторая даёт чёткую иконку на экранах с высокой плотностью: PNG там выглядит лучше, чем растянутый ICO. Третья нужна для айфонов — без неё iOS возьмёт скриншот страницы вместо иконки.
Строго говоря, favicon.ico в корне сайта браузеры находят и сами, даже без тега — они запрашивают этот адрес по умолчанию. Но полагаться на это не стоит: тег работает надёжнее, а остальные размеры без него всё равно не подключатся.
Чем ICO отличается от PNG
PNG — обычная картинка одного размера. ICO — контейнер: внутри одного файла лежит сразу несколько версий иконки, и браузер сам берёт подходящую под ситуацию. Именно поэтому исторически сложилось класть в корень favicon.ico — один файл на все случаи.
Генератор выше собирает настоящий ICO с кадрами 16, 32 и 48 пикселей. Это важная деталь: многие онлайн-инструменты просто переименовывают PNG в .ico, потому что браузерный канвас формат ICO не умеет. Такой файл обычно работает — браузеры терпимы и определяют формат по содержимому, — но это не ICO, и в него нельзя положить несколько размеров.
Как сделать ICO из PNG или JPG
Отдельный конвертер PNG в ICO ставить не нужно — генератор выше делает это сам. Загрузите картинку в PNG или JPG, и он соберёт из неё настоящий favicon.ico с кадрами 16, 32 и 48 пикселей, а заодно отдаст PNG остальных размеров. Обратная замена (переименовать .png в .ico) обычно работает, но кладёт внутрь один размер вместо нескольких — для иконки сайта это хуже. Лучший исходник — квадратный PNG от 512×512 с прозрачным фоном.
Какие размеры нужны
| Размер | Где видно | Нужен ли |
|---|
| 16×16 | Вкладка браузера, закладки | Обязательно |
| 32×32 | Вкладка на экране с высокой плотностью, панель задач Windows | Обязательно |
| 48×48 | Ярлык сайта в Windows | Желательно |
| 180×180 | Домашний экран iPhone (apple-touch-icon) | Желательно |
| 192×192 | Android Chrome, ярлык на домашнем экране | Желательно |
| 512×512 | Заставка при установке сайта как приложения (PWA) | Если есть манифест |
Минимальный рабочий набор — favicon.ico и PNG на 32 пикселя. Остальное добавляют, когда сайт должен прилично выглядеть ярлыком на телефоне.
Почему фавикон не меняется
Самая частая жалоба — иконку заменили, а в браузере старая. Причина почти всегда в кэше: фавиконы браузеры держат особенно упорно и не обновляют даже при обычной перезагрузке. Что делать по порядку:
- Откройте
/favicon.ico прямым адресом. Если там старая картинка — файл не перезаписался на сервере, и браузер ни при чём. - Если по адресу новая, а на вкладке старая — обновите страницу с очисткой кэша:
Cmd+Shift+R или Ctrl+F5. - Не помогло — добавьте к адресу версию:
<link rel="icon" href="/favicon.ico?v=2">. Для браузера это новый файл.
Фавикон в Next.js
В App Router теги писать не нужно. Положите favicon.ico в папку app/ — Next сам добавит нужный <link> в <head>. Так же работают icon.png и apple-icon.png: по именам файлов фреймворк понимает, какой тег сгенерировать.
Подробнее о том, откуда взялся формат ICO и почему вокруг фавикона столько путаницы, — в статье Фавикон: полное руководство.