Фавикон — маленькая картинка рядом с названием вкладки. Она же появляется в закладках, в истории и на домашнем экране телефона, если сайт туда добавили. Дело на пятнадцать минут, которое почему-то принято усложнять.
Зачем это знать
Без своего значка вкладка показывает серый лист бумаги. Когда у человека открыто двадцать вкладок, различает он их как раз по значкам — названия обрезаются до двух слов. Сайт без фавикона в этом ряду выглядит недоделанным.
Вторая причина — генераторы. Если попросить «набор фавиконов», большинство сервисов выдаст двадцать файлов и полтора десятка строк в голове страницы. Половина из них нужна браузерам, которых давно нет.
Сколько файлов нужно на самом деле
| Файл | Зачем |
|---|---|
favicon.svg |
Основной значок. Не размывается ни на каком экране, весит меньше килобайта |
favicon-32.png |
Запасной для тех, кто не понимает SVG |
apple-touch-icon.png |
Значок 180×180 для добавления сайта на домашний экран телефона |
<link rel="icon" href="/assets/icons/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/assets/icons/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png">Порядок строк имеет значение: браузер берёт первый формат, который понимает. Современный возьмёт SVG, старый пропустит его и возьмёт PNG.
Как нарисовать значок, который читается
Размер, в котором его увидят, — 16 на 16 точек. Это меньше буквы в этом абзаце. Отсюда все требования.
- Одна фигура или одна буква. Логотип целиком, с названием и подзаголовком, в этом квадрате превращается в кашу.
- Крупные детали и высокий контраст. Тонкие линии в один пиксель исчезают.
- Проверка уменьшением. Нарисуйте крупно, затем уменьшите до 16 точек и посмотрите. Если не узнаётся — упрощайте дальше.
- Поля по краям. Значок, нарисованный впритык к границам квадрата, выглядит распухшим рядом с соседними.
Значок для тёмной темы
В SVG можно положить медиавыражение
prefers-color-scheme прямо внутрь файла —
и значок сам поменяет цвет в тёмной теме браузера.
Так делают, когда основной цвет значка тёмный
и на тёмной панели вкладок пропадает.
Где этот значок встречается ещё
Кроме вкладки, его показывают в списке закладок, в истории посещений, в подсказках адресной строки и в результатах поиска на телефоне — рядом с названием сайта. То есть значок работает как маленький логотип и должен быть узнаваемым в тех же цветах, что и настоящий.
Отдельная история — значок на домашнем экране телефона. Его рисуют размером 180 на 180 и обязательно с непрозрачным фоном: прозрачные места система заливает чёрным, и значок выглядит дырявым. Поля тут тоже нужны — система скругляет картинку по-своему и может обрезать края.
Почему значок не меняется
Фавикон браузеры кешируют упорнее всего остального: старая картинка может держаться днями, даже после очистки обычного кеша. Это не ошибка вёрстки, и переделывать разметку не нужно — проверять правку лучше в режиме инкогнито или открыв файл значка по прямому адресу.
Если значок нужно сменить срочно и наверняка, помогает переименование файла: новое имя браузер видит как новый адрес и берёт картинку заново. Тот же приём работает и со стилями, когда правка «не применяется».
Про старый формат ICO
Много лет значок клали в корень файлом
favicon.ico, и браузер искал его там сам,
без всяких строк в разметке. Сегодня это нужно разве
что очень старым программам: PNG и SVG понимают все.
Если файл достался вам от готового шаблона — пусть
лежит, вреда от него нет, но делать его специально
незачем.
Что просить у нейросети
Нарисуй фавикон в формате SVG для сайта про вёрстку и CMS. Внутри — знак «меньше, слэш, больше» белым на скруглённом квадрате с градиентом от синего к зелёному.
Размер холста 32 на 32, но рисунок должен читаться и при 16 точках: толстые линии, поля по краям, никаких мелких деталей. Код SVG отдай текстом, без внешних файлов и шрифтов.
Дай заодно три строки link для головы
страницы и скажи, какие размеры PNG понадобятся
и зачем — но только те, без которых правда
не обойтись.
Как проверить, что получилось
- Открыть сайт в новой вкладке инкогнито и посмотреть на значок.
- Открыть каждый файл значка по прямому адресу: все три должны отдаваться, а не выдавать 404.
- Уменьшить картинку до 16 точек и убедиться, что она узнаётся.
- Добавить сайт на домашний экран телефона и посмотреть, что там появилось.
Что стоит запомнить
- Хватает трёх файлов: SVG, PNG 32 и значок для телефона
- Рисунок должен читаться при 16 точках: одна фигура, толстые линии
-
Порядок строк
linkважен: браузер берёт первый понятный формат - Двадцать файлов из генератора не нужны
- Значок кешируется надолго — проверять в режиме инкогнито