Favicon (от англ. favorite icon) — это небольшой значок сайта размером 16×16 или 32×32 пикселя, который отображается во вкладке браузера, в закладках, в результатах поиска и других элементах интерфейса. Он создаётся из обычного изображения путём его конвертации в специальный формат и подключения к HTML-странице.
- Требования к изображению для создания favicon
- Способы конвертации картинки в favicon онлайн
- Создание favicon через графические редакторы
- Adobe Photoshop
- GIMP (бесплатно)
- Figma
- Форматы файлов favicon: ICO vs PNG vs SVG
- Подключение favicon к сайту
- Типичные ошибки при создании favicon
- Проверка корректности favicon
Требования к изображению для создания favicon
Прежде чем конвертировать картинку в favicon, необходимо убедиться, что исходное изображение соответствует ряду требований. Это существенно влияет на итоговое качество значка.
- Формат исходника: PNG, JPG, SVG, GIF, BMP — подходят все распространённые форматы
- Оптимальный размер исходника: не менее 512×512 пикселей для чёткого масштабирования
- Соотношение сторон: строго 1:1 (квадрат), иначе изображение будет обрезано
- Фон: прозрачный (PNG) предпочтительнее, чтобы значок корректно смотрелся на любом фоне вкладки
- Простота: мелкие детали теряются при уменьшении, поэтому логотип или символ должен быть лаконичным
| Размер favicon | Назначение |
|---|---|
| 16×16 px | Стандартная вкладка браузера |
| 32×32 px | Панель задач Windows, ярлык |
| 48×48 px | Ярлыки рабочего стола Windows |
| 180×180 px | Apple Touch Icon (iOS) |
| 192×192 px | Android Chrome, PWA |
| 512×512 px | PWA splash screen, Google поиск |
Способы конвертации картинки в favicon онлайн
Самый быстрый путь — воспользоваться бесплатными онлайн-инструментами. Они не требуют установки программ и справляются с задачей за несколько секунд.
- favicon.io — генерирует ICO, PNG и манифест одновременно; поддерживает загрузку PNG/JPG
- realfavicongenerator.net — наиболее полный инструмент: создаёт пакет файлов для всех платформ и генерирует готовый HTML-код
- convertico.com — простая конвертация в ICO с выбором нескольких размеров внутри одного файла
- icoconvert.com — позволяет задать цветовую глубину: 8 bit, 24 bit, 32 bit
Наиболее рекомендуемый инструмент в 2025–2026 году — realfavicongenerator.net, так как он автоматически оптимизирует значок под все современные браузеры, iOS, Android и PWA-приложения.
Создание favicon через графические редакторы
Если нужен полный контроль над результатом, favicon создают вручную в популярных редакторах.
Adobe Photoshop
- Открыть изображение → Image → Image Size → задать 512×512 px
- Сохранить как PNG с прозрачным фоном
- Использовать плагин ICO (Windows Icon) format для экспорта напрямую в .ico
GIMP (бесплатно)
- Открыть файл → Scale Image → 256×256 px
- File → Export As → выбрать формат .ico
- GIMP поддерживает ICO нативно без дополнительных плагинов
Figma
- Создать фрейм 512×512 px, разместить иконку
- Экспортировать как PNG
- Далее загрузить PNG в онлайн-конвертер для получения .ico
Форматы файлов favicon: ICO vs PNG vs SVG
| Формат | Поддержка браузерами (2026) | Преимущества | Недостатки |
|---|---|---|---|
| .ico | 100% (все браузеры) | Универсальность, несколько размеров в одном файле | Устаревший формат, больший вес |
| .png | ~97% (Chrome, Firefox, Safari, Edge) | Лёгкий, прозрачность, простота создания | Один размер на файл |
| .svg | ~85% (Chrome 80+, Firefox 83+, Edge 80+) | Масштабируемость, минимальный вес | Не поддерживается старыми браузерами и IE |
Оптимальная стратегия в 2026 году — подключать одновременно ICO для старых браузеров и SVG для современных, что обеспечивает полное покрытие аудитории.
Подключение favicon к сайту
После создания файла его необходимо правильно подключить в секции <head> HTML-документа. Ниже приведён полный актуальный код подключения:
<!-- Стандартный ICO для старых браузеров -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- SVG для современных браузеров -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Apple Touch Icon для iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Манифест для Android/PWA -->
<link rel="manifest" href="/site.webmanifest">
- Файл favicon.ico размещают в корневой директории сайта — браузеры автоматически обращаются к пути
/favicon.ico - Атрибут
sizes="any"сообщает браузеру, что ICO-файл содержит несколько размеров - Порядок тегов важен: браузер выбирает последний подходящий формат из списка
Типичные ошибки при создании favicon
- Неквадратное исходное изображение — приводит к искажению или обрезке значка
- Слишком мелкие детали — текст, тонкие линии становятся нечитаемыми при размере 16×16 px
- Белый фон вместо прозрачного — выглядит некорректно в тёмных темах браузера
- Кеширование браузером — после замены favicon браузер долго показывает старый; для сброса добавляют версионность:
href="/favicon.ico?v=2" - Отсутствие apple-touch-icon — при добавлении сайта на главный экран iOS используется скриншот страницы вместо иконки
Проверка корректности favicon
После подключения рекомендуется убедиться, что значок отображается правильно на всех платформах. Для этого существуют специализированные инструменты:
- realfavicongenerator.net/favicon_checker — проверяет наличие всех необходимых файлов
- Lighthouse (DevTools Chrome) — в разделе PWA указывает на отсутствующие иконки манифеста
- Ручная проверка: открыть сайт в Chrome, Firefox, Safari, Edge и на мобильном устройстве
Принудительное обновление favicon в браузере выполняется сочетанием Ctrl + Shift + R (жёсткая перезагрузка) или очисткой кеша в настройках браузера.