AI Favicon
Генератор favicon — иконка сайта и весь пакет за минуту
Опишите бренд или возьмите готовый знак — соберём favicon.ico, PNG всех размеров, apple-touch-icon для iOS, maskable для Android и SVG-favicon одним архивом.
Знаки, которые читаются в favicon-размере
Хороший favicon — это простой знак без текста, узнаваемый даже в 16×16. Вот примеры подходящих иконок.
Возможности
Полный favicon-пакет, а не одна картинка
Всё, что нужно современному сайту — сразу и в одном архиве. Лучше и быстрее ручной нарезки размеров.
favicon.ico + все PNG
favicon.ico (16/32/48 в одном файле) и отдельные PNG 16, 32, 48, 192, 512 — для любого браузера, старого и нового.
iOS и Android
apple-touch-icon 180×180 для экрана «Домой» в iOS и maskable-иконка с безопасной зоной для адаптивных форм Android.
SVG-favicon
Векторный favicon.svg — чёткий на любом экране и в тёмной теме. У большинства генераторов этого нет.
Код и манифест
Готовый site.webmanifest и HTML-код для <head> — просто вставьте и подключите. Плюс README на русском.
Настройка и превью
Цвет, градиент, прозрачный фон, отступ и скругление — с живым превью вкладки браузера, iOS и Android.
FAQ
Вопросы про favicon
Что такое favicon, какие размеры нужны и как подключить.
Что такое favicon и зачем он нужен?
Какие размеры favicon нужны в 2026 году?
Как сделать favicon из логотипа?
Чем ICO отличается от PNG и SVG?
Как подключить favicon к сайту?
Это бесплатно?
Генератор favicon онлайн: иконка сайта под все платформы
Favicon — маленькая, но важная деталь: именно по ней пользователь находит вашу вкладку среди десятка открытых, узнаёт сайт в закладках и на домашнем экране телефона. Наш генератор favicon делает всю рутину за вас: берёт знак (сгенерированный нейросетью или ваш готовый логотип), убирает фон, нарезает все нужные размеры и упаковывает в один архив.
В отличие от простых конвертеров «png в ico», мы собираем полный современный пакет: favicon.ico для легаси-браузеров, PNG 16–512 для точной отрисовки, apple-touch-icon для iOS, maskable-иконку с безопасной зоной для адаптивных форм Android и векторный SVG-favicon, который остаётся чётким на любом экране и в тёмной теме. Плюс готовый site.webmanifest и HTML-код для вставки в <head>.
Всё это — с живым предпросмотром: видно, как иконка выглядит во вкладке браузера в светлой и тёмной теме, на иконке iOS со скруглением и в круге Android. Можно перекрасить знак в сплошной цвет или градиент, включить прозрачный фон, настроить отступ и скругление подложки — и сразу увидеть результат.
Что входит в favicon-пакет:
- favicon.ico — 16, 32 и 48 пикселей в одном файле
- PNG-иконки: 16×16, 32×32, 48×48, 192×192, 512×512
- apple-touch-icon 180×180 для iOS
- maskable-иконка 512×512 для Android с безопасной зоной
- favicon.svg — векторная иконка для современных браузеров
- site.webmanifest и готовый код для <head>
Также: AI генератор логотипов.
Favicon для сайта: зачем нужен и как сделать правильно в 2026
Favicon — та самая маленькая иконка сайта, что стоит во вкладке браузера рядом с заголовком. Деталь крошечная, но именно по ней пользователь находит вашу вкладку среди десятка открытых и узнаёт бренд в закладках. Разберёмся, где favicon появляется, какие размеры и форматы реально нужны сегодня, как сделать хороший знак из логотипа и как подключить его к сайту без ошибок.
Что такое favicon и где он появляется
Favicon (от favorite icon — «иконка избранного») — это маленькая квадратная картинка, которая представляет сайт в интерфейсе браузера и системы. Появляется она в куда большем числе мест, чем кажется на первый взгляд, и везде работает как визуальная подпись вашего бренда.
- Вкладки браузера — иконка слева от названия страницы
- Закладки и панель избранного
- История и подсказки в адресной строке
- Экран «Домой» на телефоне, когда сайт добавляют ярлыком
- Результаты поиска на мобильных — рядом с названием сайта
Почему favicon важен для бренда и кликов
Прямого влияния на позиции в выдаче favicon не даёт — поисковик не поднимает сайт выше просто за наличие иконки. Но косвенный эффект вполне реальный. В мобильной выдаче favicon стоит рядом со ссылкой, и аккуратная узнаваемая иконка помогает вашему результату выделиться и вызывает больше доверия, а значит — больше кликов.
Внутри браузера эффект ещё нагляднее. Когда у человека открыт десяток вкладок, он находит нужную не по тексту, а по значку. Чёткий фирменный favicon делает сайт узнаваемым, а размытый или отсутствующий — наоборот, читается как признак недоделанного или несерьёзного проекта.
Какие размеры и форматы нужны сегодня
Времена, когда хватало одного favicon.ico на 16 пикселей, прошли. Современный сайт открывают на десктопе, iOS, Android и в режиме PWA, и под каждую платформу нужен свой размер и формат. Разумный минимальный набор на 2026 год выглядит так:
- favicon.ico с версиями 16, 32 и 48 — для адресной строки и старых браузеров
- PNG до 512 пикселей — для чёткой отрисовки на разных экранах
- apple-touch-icon 180×180 — иконка на экране «Домой» в iOS
- maskable-иконка для Android и PWA — с безопасной зоной под адаптивные формы
- SVG-favicon — вектор, чёткий на любом экране, с поддержкой тёмной темы через media
- site.webmanifest — файл-манифест, где иконки 192 и 512 описаны для установки как приложение
Maskable-иконка и SVG: две вещи, о которых забывают
Maskable-иконка — это версия 512×512, у которой весь важный рисунок держится в центральной безопасной зоне (примерно круг диаметром в 80% от квадрата). Android обрезает иконку под свою форму — круг, квадрат со скруглением, «капля», — и если знак дотянуть до самых краёв, углы просто срежутся. Безопасная зона это предотвращает.
SVG-favicon — вторая часто забытая деталь. Вектор остаётся идеально чётким на любом экране и на любой плотности пикселей, а ещё через встроенную media-запрос SVG умеет менять цвет под тёмную тему системы. Пользователю с тёмным оформлением иконка покажется адаптированной, а не тёмным пятном на тёмном фоне.
Как сделать хороший favicon из логотипа
Главный принцип: favicon — это не уменьшенный логотип, а отдельный знак. В размере 16×16 пикселей мелкий текст и тонкие детали превращаются в кашу и не читаются. Поэтому берите самую узнаваемую часть логотипа — монограмму, символ, инициал — и оставляйте только её.
Простая форма, крупные элементы, ощутимый контраст с фоном, немного воздуха по краям — вот рецепт иконки, которая работает и во вкладке, и на экране телефона. Если логотип сложный, сделайте под favicon отдельную упрощённую версию: так знак останется узнаваемым даже в самом маленьком размере.
Как подключить favicon к сайту
Установка проще, чем кажется, и сводится к двум шагам. Сначала положите файлы иконок в корень сайта — туда же, где лежит главная страница. Затем вставьте в тег <head> несколько строк, которые указывают браузеру, где искать каждый формат, и подключают манифест.
Браузер дальше сам выбирает подходящий вариант: SVG для современных, ICO для старых, apple-touch-icon для iOS, а иконки из манифеста — для установки на Android. Наш генератор отдаёт готовый код для <head> вместе с файлами, так что достаточно скопировать сниппет и вставить его в шаблон.
Частые ошибки и как проверить результат
Типичные промахи повторяются из проекта в проект: мелкий текст, нечитаемый в 16 пикселях; отсутствие apple-touch-icon, из-за чего на экране iOS появляется невнятный скриншот вместо иконки; забытая maskable-версия, у которой Android срезает углы; и полное игнорирование тёмной темы.
Проверять просто. Откройте сайт в браузере и посмотрите на вкладку в светлом и тёмном оформлении. Добавьте сайт на экран «Домой» на iPhone и на Android — иконка должна быть целой и чёткой. Если что-то не обновилось, очистите кэш: браузеры любят держать старый favicon дольше, чем хотелось бы.
Соберите favicon для своего сайта
Иконка сайта и полный пакет всех размеров — за минуту, без ручной нарезки.