Фавикон: полное руководство — от favicon.ico до иконки на домашнем экране
Фавикон — та самая маленькая картинка на вкладке браузера. Казалось бы, что тут может быть сложного: нарисовал иконку, положил на сервер, готово.
На практике вокруг него скопилось столько наследия, что простой вопрос «какой файл мне нужен» не имеет короткого ответа. Формат из девяностых, десяток размеров, теги, которые дублируют друг друга, и кэш, который держит старую иконку мёртвой хваткой.
Разберём по порядку.
Откуда взялся favicon.ico
В 1999 году Internet Explorer 5 научился показывать иконку рядом с адресом
сайта. Механизм был предельно простой. Браузер сам запрашивал у сервера файл
/favicon.ico, потому что так решили в Microsoft. Никакой разметки не
требовалось, имя и путь были захардкожены.
Отсюда и название: fav от 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 он от этого не становится, и главного преимущества, нескольких
размеров в одном файле, вы не получаете.
Генератор фавиконов на PixelTool честно собирает
контейнер из нескольких кадров, а не переименовывает один PNG.
Проверить просто. В терминале выполните
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> закрывают все разумные случаи:
Что делает каждая:
Первая строка основная. sizes="any" говорит браузеру, что внутри файла есть
разные размеры и выбрать он может сам.
Вторая даёт чёткую иконку на экранах с высокой плотностью пикселей. PNG там выглядит лучше, чем кадр из ICO, растянутый браузером.
Третья нужна для iOS. Без неё айфон возьмёт для домашнего экрана уменьшенный скриншот страницы вместо иконки, и выглядит это плохо.
Обратите внимание: apple-touch-icon не имеет прозрачности. iOS всё равно
зальёт фон чёрным, так что рисуйте иконку сразу на непрозрачной подложке.
Векторный фавикон
Можно подключить и SVG, он масштабируется без потерь и весит меньше:
Поддержки Safari долго не было, поэтому SVG подключают в дополнение к
favicon.ico, а не вместо него. Браузер возьмёт SVG, если умеет, и откатится к
ICO, если нет.
Есть и приятный побочный эффект. В SVG работают медиазапросы, поэтому иконку можно сделать разной для светлой и тёмной темы браузера.
Почему фавикон не обновляется
Самая частая боль. Иконку заменили, задеплоили, а в браузере всё ещё старая.
Фавиконы кэшируются агрессивнее почти всего остального на странице: обычная перезагрузка их не трогает, а иногда не помогает даже жёсткая. Разбираться нужно по шагам, иначе легко чинить не то.
Шаг первый. Откройте /favicon.ico прямым адресом в браузере. Если там старая
картинка, значит файл не перезаписался на сервере и браузер ни при чём. Проблема
в деплое.
Шаг второй. По адресу новая, а на вкладке старая, это кэш. Перезагрузите
страницу с его очисткой: Cmd+Shift+R на маке, Ctrl+F5 на Windows.
Шаг третий. Если не помогло, добавьте к адресу версию:
Для браузера это другой адрес, а значит другой файл, и старый кэш к нему неприменим. Приём некрасивый, но работает всегда.
Фавикон в 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 из картинки
Загрузите PNG или JPG — получите favicon.ico и PNG всех размеров одним архивом, плюс готовый код для вставки в <head>. По сути конвертер картинки в иконку для сайта.
Попробовать
