Фавиконка (favicon) — это визитная карточка любого веб-ресурса. Она отображается во вкладках браузера, в истории посещений, в результатах поиска Яндекса и Google, в закладках и на рабочих столах смартфонов. Отсутствие качественной фавиконки снижает кликабельность в поисковой выдаче (CTR) и подрывает доверие пользователей к сайту.
Онлайн-генератор фавиконок превращает любое исходное изображение в полный комплект современных иконок для всех платформ: формирует настоящий многослойный favicon.ico, иконки высокого разрешения для Apple iOS и Android PWA, файл веб-манифеста и готовый сниппет HTML-кода.
Комплект иконок в сгенерированном архиве
| Файл | Разрешение | Назначение |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Универсальный многослойный контейнер для всех браузеров и панели задач |
| favicon-16x16.png | 16 × 16 px | Стандартная вкладка браузера на экранах со стандартной плотностью пикселей |
| favicon-32x32.png | 32 × 32 px | Вкладки браузеров на экранах высокой четкости (Retina, HiDPI) |
| apple-touch-icon.png | 180 × 180 px | Иконка домашнего экрана и закладки iOS (iPhone, iPad, Safari) |
| android-chrome-192x192.png | 192 × 192 px | Ярлык PWA на главном экране смартфонов Android |
| android-chrome-512x512.png | 512 × 512 px | Экран заставки (Splash Screen) PWA-приложения |
| site.webmanifest | JSON файл | Манифест с метаданными и путями к иконкам для Google Chrome |
Готовый HTML-код для вставки на сайт
Вставьте следующий фрагмент в секцию <head> вашего HTML-документа:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Советы по созданию эффективной фавиконки
- Лаконичность и контраст. Фавиконка видна в размере 16×16 мм на экране. Откажитесь от мелких надписей, длинных слоганов и фотографий. Лучше всего смотрится первая буква бренда или узнаваемый силуэт логотипа с четкими границами.
- Учет темной темы. Многие пользователи используют темную тему оформления в браузерах. Если логотип полностью черный на прозрачном фоне, на темной вкладке он станет невидимым. Используйте светлую тонкую обводку или цветной контрастный фон.
- Квадратные пропорции. Исходное изображение должно иметь соотношение сторон 1:1. Если исходный логотип прямоугольный, генератор позволяет выбрать режим вписывания (
contain), чтобы не деформировать пропорции логотипа.
Как пользоваться генератором
- Загрузите логотип: перетащите картинку (PNG, SVG или JPG) в поле загрузки.
- Настройте отображение:
- Режим вписывания: «Вписать целиком» (сохраняет пропорции и добавляет поля при необходимости) или «Заполнить» (обрезает края для заполнения всей площади квадрата).
- Цвет фона: оставьте прозрачным или выберите подходящий цвет подложки.
- Имя сайта: укажите название проекта для корректного заполнения манифеста
site.webmanifest.
- Изучите предпросмотр: инструмент отобразит внешний вид иконок всех основных размеров.
- Скачайте файлы: скачайте полный пакет иконок в одном ZIP-архиве или сохраните отдельные нужные файлы.
- Скопируйте HTML-код: нажмите кнопку копирования и вставьте сгенерированный блок кода в секцию
<head>шаблона вашего сайта.
Преимущества нашего инструмента
- Настоящий мультислойный ICO: содержит внутри физические слои 16, 32 и 48 пикселей.
- Полная поддержка PWA и Apple: генерирует манифест и touch-иконку по официальным гайдлайнам Apple и Google.
- Локальная обработка в браузере: логотипы и графика обрабатываются прямо на вашем устройстве без отправки на сервер.
- Бесплатно и без ограничений: создавайте фавиконки для любых проектов и клиентов.