Фавикон: полное руководство — от favicon.ico до иконки на домашнем экране
ДБ
Дмитрий Борисенко
Фавикон — та самая маленькая картинка на вкладке браузера. Казалось бы, что тут может быть сложного: нарисовал иконку, положил на сервер, готово.
На практике вокруг него скопилось столько наследия, что простой вопрос «какой файл мне нужен» не имеет короткого ответа. Формат из девяностых, десяток размеров, теги, которые дублируют друг друга, и кэш, который держит старую иконку мёртвой хваткой.
Разберём по порядку.
Откуда взялся favicon.ico
В 1999 году Internet Explorer 5 научился показывать иконку рядом с адресом
сайта. Механизм был предельно простой: браузер сам запрашивал у сервера файл
/favicon.ico — просто потому, что так решили в Microsoft. Никакой разметки не
требовалось, имя и путь были захардкожены.
Отсюда и название: favorite icon — иконка для «Избранного».
Формат тоже выбрали свой, виндовый — ICO. И вот это решение оказалось на
удивление живучим: спустя четверть века браузеры всё ещё запрашивают
/favicon.ico по умолчанию, даже если вы про него не написали ни строчки. Если
файл там есть — иконка появится.
ICO — это не картинка, это контейнер
Здесь кроется главное недоразумение.
PNG или JPEG — это изображение одного размера. ICO устроен иначе: это контейнер, внутри которого лежит сразу несколько версий одной иконки разного размера. Браузер открывает файл, смотрит, что ему доступно, и берёт подходящий кадр: 16 пикселей для вкладки, 32 — для экрана с высокой плотностью, 48 — для ярлыка в Windows.
Внутри ICO кадры могут храниться и как обычный битмап, и — начиная с Windows Vista — прямо в виде PNG. Современные браузеры понимают оба варианта.
Практическое следствие, о котором почти никто не пишет: браузерный канвас не
умеет создавать ICO. canvas.toDataURL() отдаёт только PNG, JPEG или WebP.
Поэтому многие онлайн-генераторы фавиконов просто переименовывают PNG в .ico и
выдают за настоящий формат.
Обычно это даже работает — браузеры определяют формат по содержимому файла, а не
по расширению, и покажут вам PNG, лежащий под именем favicon.ico. Но настоящим
ICO он от этого не становится, и главного преимущества — нескольких размеров в
одном файле — вы не получаете.
Проверить просто. В терминале выполните
file favicon.ico. Настоящий ответитMS Windows icon resource - 3 icons. Подделка честно скажетPNG image data.
Какие размеры нужны на самом деле
Списки «сгенерируйте 27 иконок под все платформы» кочуют из статьи в статью с середины десятых. Большая часть этого давно неактуальна: размеры под Windows Tiles, под старую Opera Coast, под BlackBerry.
Реально имеет смысл вот это:
| Размер | Где видно | Нужен ли |
|---|---|---|
| 16×16 | Вкладка браузера, закладки | Обязательно |
| 32×32 | Вкладка на плотном экране, панель задач Windows | Обязательно |
| 48×48 | Ярлык сайта в Windows | Желательно |
| 180×180 | Домашний экран iPhone | Желательно |
| 192×192 | Android Chrome | Желательно |
| 512×512 | Заставка при установке сайта как приложения | Если есть манифест |
Минимальный рабочий набор — favicon.ico с кадрами 16/32/48 плюс PNG на 32
пикселя. Остальное нужно, когда важно, чтобы сайт прилично выглядел ярлыком на
телефоне.
Разметка
Три строки в <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" />
Что делает каждая:
Первая — основная. sizes="any" говорит браузеру, что внутри файла есть
разные размеры и выбрать он может сам.
Вторая даёт чёткую иконку на экранах с высокой плотностью пикселей. PNG там выглядит лучше, чем кадр из ICO, растянутый браузером.
Третья нужна для iOS. Без неё, когда пользователь добавляет сайт на домашний экран, айфон возьмёт не иконку, а уменьшенный скриншот страницы — выглядит это плохо.
Обратите внимание: apple-touch-icon не имеет прозрачности. iOS всё равно
зальёт фон чёрным, так что рисуйте иконку сразу на непрозрачной подложке.
Векторный фавикон
Можно подключить и SVG — он масштабируется без потерь и весит меньше:
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
Поддержки Safari долго не было, поэтому SVG подключают в дополнение к
favicon.ico, а не вместо него. Браузер возьмёт SVG, если умеет, и откатится к
ICO, если нет.
Приятный побочный эффект: в SVG работают медиазапросы, поэтому иконку можно сделать разной для светлой и тёмной темы браузера.
<style>
path { fill: #111 }
@media (prefers-color-scheme: dark) { path { fill: #fff } }
</style>
Почему фавикон не обновляется
Самая частая боль. Иконку заменили, задеплоили, а в браузере всё ещё старая.
Фавиконы кэшируются агрессивнее почти всего остального на странице: обычная перезагрузка их не трогает, а иногда не помогает даже жёсткая. Разбираться нужно по шагам, иначе легко чинить не то.
Шаг первый. Откройте /favicon.ico прямым адресом в браузере. Видите старую
картинку — значит файл просто не перезаписался на сервере, и браузер ни при чём.
Проблема в деплое.
Шаг второй. По адресу новая, а на вкладке старая — это кэш. Перезагрузите
страницу с его очисткой: Cmd+Shift+R на маке, Ctrl+F5 на Windows.
Шаг третий. Не помогло — добавьте к адресу версию:
<link rel="icon" href="/favicon.ico?v=2" />
Для браузера это другой адрес, а значит другой файл, и старый кэш к нему неприменим. Приём некрасивый, но работает всегда.
Фавикон в Next.js
Если вы на App Router, теги писать не нужно совсем. Положите favicon.ico в
папку app/ — фреймворк сам подставит нужный <link> в <head>.
Работает это по именам файлов:
app/favicon.ico→<link rel="icon">app/icon.pngилиapp/icon.svg→<link rel="icon">app/apple-icon.png→<link rel="apple-touch-icon">
Более того, icon.tsx может быть кодом: Next сгенерирует картинку на лету через
ImageResponse. Удобно, когда иконка должна меняться — например, показывать
число непрочитанных.
Как нарисовать иконку, которая читается
Технику мы разобрали, остаётся дизайн. Тут всё упирается в один факт: 16 пикселей — это очень мало. Меньше, чем строчная буква в этом тексте.
- Не берите логотип целиком. Логотип с названием компании при 16 пикселях превратится в серую полоску. Возьмите один знак: первую букву, символ, силуэт.
- Максимальный контраст. Иконка живёт на фоне вкладки, а он бывает и светлым, и тёмным. Бледные тона исчезают.
- Никаких тонких линий. Штрих в один пиксель при масштабировании пропадёт или замылится.
- Проверяйте в реальном размере. Красивый макет на 512 пикселей ничего не говорит о том, как иконка выглядит на вкладке. Уменьшите и посмотрите.
Хорошая проверка — прищуриться. Если иконка перестала читаться, она слишком сложная.
Собрать полный набор — favicon.ico с тремя кадрами внутри, PNG всех размеров и
готовый код для <head> — можно генератором фавиконов: он отдаёт всё одним
архивом.
Фавикон: сделать favicon.ico из картинки
Загрузите картинку — получите favicon.ico и PNG всех размеров одним архивом, плюс готовый код для вставки в <head>.
Попробовать →
