Хватит ли одного ICO?

Для вкладок на десктопе и мобильных обычно да. Если выпускаете PWA или важны плитки домашнего экрана iOS, добавьте размеры PNG и записи манифеста.

Можно ли только SVG как favicon?

На современных браузерах всё чаще да — но связка ICO и PNG всё ещё закрывает краевые случаи. SVG хорошо как дополнение, не всегда как единственный ассет.

Обновил файл, а вкладка показывает старую иконку

Кэш. Попробуйте инкогнито, переименуйте файл или добавьте версионный query к href, пока новый ассет не закрепится.

Favicon — то же, что логотип в шапке?

Часто делят фирменные цвета, но favicon должен быть упрощённым знаком. Логотип в шапке может нести слоган и мелкие детали, которые вкладка не выдержит.

Какие размеры реально нужны?

16, 32 и 48 внутри ICO закрывают большинство вкладок; 180×180 для apple-touch-icon; добавьте 192 и 512, если требует манифест PWA.

Как создать favicon для сайта

Favicon — крошечная иконка во вкладке браузера, визуальная закладка, когда открыто десять вкладок. Сделать просто: упростите знак до размера почтовой марки, экспортируйте стандартные размеры (часто в одном `.ico`), добавьте HTML-теги и больший PNG, если важны ярлыки на домашнем экране iOS. Следуйте шагам ниже, затем используйте генератор favicon, чтобы упаковать размеры без ручной правки бинарников.

1. Рисуйте для 16×16, а не для билборда

В размере вкладки тонкие штрихи, мелкий текст и шумные градиенты превращаются в кашу. Смелый силуэт из одного-двух цветов переживает масштабирование лучше мини-версии полного логотипа со словами.

Начинайте с квадрата. Широкие логотипы сначала нужно обрезать в центрированный квадрат — иначе генератор ужмёт весь холст, и знак станет точкой.

Держите векторный SVG или хотя бы мастер PNG 256×256 (лучше 512×512). Вы уменьшаете с этого исходника, а не увеличиваете размытый thumbnail.

2. Экспортируйте multi-size ICO (или набор PNG)

Классический `favicon.ico` собирает слои 16×16, 32×32 и 48×48 в одном файле — вкладки и закладки на десктопе берут ближайший размер.

Загрузите PNG, SVG или JPG в генератор favicon, выберите набор размеров и скачайте — без ручного hex-редактирования.

Многие команды также отдают отдельные PNG 32×32 и 180×180. Progressive web apps ещё нуждаются в явных иконках в web app manifest.

3. Разместите файлы и добавьте HTML

Положите `favicon.ico` в корень сайта или следуйте конвенции фреймворка — Next.js, Astro и другие ждут его в `public/`.

Минимальный тег: `<link rel="icon" href="/favicon.ico" sizes="any">`. Если есть PNG-варианты, добавьте что-то вроде `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`.

Для iOS «На экран „Домой“» включите PNG 180×180: `<link rel="apple-touch-icon" href="/apple-touch-icon.png">`.

4. Проверьте после деплоя

Жёсткое обновление или инкогнито — favicon кэшируются агрессивно, обычная перезагрузка может показать вчерашнюю иконку.

На телефоне добавьте сайт на домашний экран и проверьте, что apple-touch-icon чёткий без лишних полей.

Ребренд? Меняйте ICO, PNG и иконки манифеста вместе. Смесь старых и новых ассетов — как пользователи получают два разных знака одного сайта.

Ловушки, которые съедают полдня

Переименование PNG 512 px в `favicon.ico` без вложенных меньших размеров — некоторые среды плохо увеличивают, иконка во вкладке мягкая.

Только SVG-favicon набирают поддержку, но в части корпоративных интранетов молча ломаются; ICO плюс PNG остаётся надёжным умолчанием.

Полностью прозрачные иконки могут выглядеть сломанными на светлых вкладках Windows — сплошной квадрат фирменного цвета за знаком часто читается чище.

Сгенерировать ICO сейчас

Загрузите квадратный логотип, скачайте multi-size favicon из генератора favicon, затем вставьте HTML-теги из раздела 3.

Открыть генератор favicon

Вопросы о favicon

Хватит ли одного ICO?: Для вкладок на десктопе и мобильных обычно да. Если выпускаете PWA или важны плитки домашнего экрана iOS, добавьте размеры PNG и записи манифеста.
Можно ли только SVG как favicon?: На современных браузерах всё чаще да — но связка ICO и PNG всё ещё закрывает краевые случаи. SVG хорошо как дополнение, не всегда как единственный ассет.
Обновил файл, а вкладка показывает старую иконку: Кэш. Попробуйте инкогнито, переименуйте файл или добавьте версионный query к href, пока новый ассет не закрепится.
Favicon — то же, что логотип в шапке?: Часто делят фирменные цвета, но favicon должен быть упрощённым знаком. Логотип в шапке может нести слоган и мелкие детали, которые вкладка не выдержит.
Какие размеры реально нужны?: 16, 32 и 48 внутри ICO закрывают большинство вкладок; 180×180 для apple-touch-icon; добавьте 192 и 512, если требует манифест PWA.