Бесплатно · без регистрации · весь набор в ZIP

Генератор favicon из картинки

Загрузи логотип или картинку, выбери кадр и фон — получи favicon.ico, PNG всех нужных размеров, site.webmanifest и готовый код для <head>. Живой предпросмотр вкладки браузера.

Загрузка инструмента...

Полный набор в один клик

favicon.ico, все PNG-размеры, манифест и готовый HTML — не нужно собирать вручную.

Живой мокап вкладки

Видишь favicon там, где он реально живёт — во вкладке браузера и на 16/32/180 px.

Кадрирование и приближение

Перетащи рамку и приблизь нужную часть — критично для читаемости на 16×16.

Прозрачный или цветной фон

Альфа-канал PNG или заливка любым цветом, плюс скругление углов.

Картинки не сохраняются

Генерация в памяти сервера на время запроса — исходник нигде не хранится.

Готовый код для <head>

Скопируй сниппет одной кнопкой — вставил, загрузил файлы, работает.

Как это работает

Как сделать favicon для сайта — 3 шага

1
Загрузи картинку

Логотип, иконка или любое фото — JPG, PNG, SVG, HEIC. Квадратный кадр появится сразу.

2
Настрой кадр, фон и скругление

Перетащи рамку и приблизь нужную часть, выбери прозрачный или цветной фон, при желании скругли углы. Мокап вкладки показывает, как favicon будет выглядеть на 16, 32 и 180 px.

3
Скачай набор и вставь код

Жми «Сгенерировать набор» — получишь ZIP с favicon.ico, всеми PNG, манифестом и готовым HTML-сниппетом. Скопируй код в <head> и загрузи файлы в корень сайта.

FAQ

Вопросы о генераторе favicon

Да, полностью бесплатно и без регистрации. Загрузил картинку, настроил, скачал готовый набор — никаких водяных знаков и лимитов.

favicon.ico (16/32/48 в одном файле — для вкладок и старых браузеров), PNG-иконки 16/32/48/96, apple-touch-icon 180×180 для iPhone/iPad, android-chrome 192 и 512 для Android и PWA, site.webmanifest (манифест веб-приложения) и favicon-snippet.html — готовый код для вставки в.

Формат .ico понимают все браузеры, включая старые, и он остаётся дефолтным путём /favicon.ico, который браузер запрашивает автоматически. Внутри нашего .ico лежат сразу три размера (16, 32, 48) — браузер сам выбирает нужный. PNG-иконки — для современных браузеров и мобильных, где нужны крупные размеры (иконка на домашнем экране, PWA).

Готовый сниппет прилагается в наборе и показывается на экране после генерации — его можно скопировать одной кнопкой. Это несколько тегов и , плюс подключение манифеста. Вставь их вкаждой страницы, а файлы положи в корень сайта.

Лучше всего квадратный логотип или простую иконку с крупными деталями — на 16×16 мелкие элементы сливаются. Если картинка не квадратная, перетащи рамку кадра на нужную часть и приблизь. Для контрастности можно залить фон цветом.

Да. По умолчанию фон прозрачный (PNG с альфа-каналом), favicon аккуратно ляжет на любой цвет вкладки. Если нужна подложка — выбери белый, тёмный или свой цвет.

Да, SVG можно загрузить как исходник — он будет отрисован в растровые PNG нужных размеров и в .ico. Готовый набор — растровый, совместимый со всеми браузерами.

Нет. Генерация идёт в оперативной памяти сервера на время запроса, ZIP сразу возвращается — исходная картинка нигде не хранится и не попадает в интернет.

Помимо этого инструмента

Это только один из инструментов Gobanana

Под капотом — полноценный ИИ-редактор: нейрофотосессии, карточки для Wildberries и Ozon, замена фона, реставрация старых снимков — текстовой командой на русском, за 30 секунд.

Открыть @nanobananas_bot Открыть Gobanana.ru

Бесплатно · без установки · 3 генерации в подарок при регистрации

Смотри также

Другие возможности Go Banana

Круглый аватар
Изменить размер фото
PNG в WebP
Сравнить фото
Редактировать EXIF
Генератор QR-кода
Генератор штрихкода
Картинка в Base64
Все бесплатные инструменты Go Banana →

Зачем нужен полный набор favicon, а не одна картинка

Раньше хватало одного файла favicon.ico в корне сайта. Сегодня иконка сайта появляется в десятке мест с разными требованиями: вкладка браузера (16–32 px), панель закладок, иконка на домашнем экране iPhone (180 px), иконка приложения Android и PWA (192 и 512 px), плитка в результатах поиска. Для каждого нужен свой размер и иногда свой формат — поэтому современный favicon это набор файлов плюс несколько тегов в <head>, а не единственная картинка.

Этот генератор собирает весь набор из одной вашей картинки и сразу даёт готовый код — не нужно вручную ресайзить в редакторе и гуглить, какие теги подключать.

Что входит в набор

ФайлРазмерГде используется
favicon.ico16 + 32 + 48 в одном файлеВкладка браузера, старые браузеры, дефолтный /favicon.ico
favicon-16x16.png16×16Вкладка браузера (современные браузеры)
favicon-32x32.png32×32Панель закладок, ярлык на рабочем столе
favicon-48x48.png48×48Windows-плитки, крупные вкладки
favicon-96x96.png96×96Ярлыки, старый Android
apple-touch-icon.png180×180Иконка при добавлении сайта на экран iPhone/iPad
android-chrome-192x192.png192×192Иконка Android и PWA
android-chrome-512x512.png512×512Splash-экран PWA, крупная иконка
site.webmanifest—Манифест веб-приложения (имя, цвета, иконки для PWA)
favicon-snippet.html—Готовый код <link> для вставки в <head>

Почему favicon.ico всё ещё нужен

Браузер по умолчанию запрашивает /favicon.ico из корня сайта, даже если вы не подключили ни одного тега — поэтому классический .ico остаётся страховкой для совместимости. Наш .ico не просто переименованный PNG: внутри контейнера лежат три полноценных изображения (16, 32 и 48 px), и браузер сам выбирает подходящее под ситуацию. Это тот же принцип, что использует ImageMagick, но без установки чего-либо на вашей стороне.

Как сделать читаемый favicon на 16×16

Иконка вкладки — крошечная, поэтому мелкие детали на ней сливаются. Несколько правил:

  • Берите крупный элемент. Одна буква, простой знак или монограмма читаются лучше, чем целый логотип с текстом. Используйте рамку кадра и приближение, чтобы взять самую узнаваемую часть.
  • Держите контраст с фоном вкладки. Тонкие светлые линии на прозрачном фоне теряются на светлой теме браузера. Если знак светлый — залейте тёмный фон, и наоборот.
  • Проверьте на мокапе. Предпросмотр показывает favicon прямо во вкладке и на размерах 16/32/180 px — сразу видно, читается знак или превращается в пятно.

Как подключить набор к сайту

  1. Скачайте ZIP и распакуйте.
  2. Скопируйте все файлы (favicon.ico, *.png, site.webmanifest) в корень сайта — туда же, где index.html.
  3. Вставьте содержимое favicon-snippet.html в <head> каждой страницы (или в общий шаблон).
  4. Очистите кэш браузера — favicon кэшируется агрессивно, старая иконка может показываться какое-то время.

Что дальше

  • Нужна круглая аватарка из того же логотипа — сделайте её в инструменте «Круглый аватар».
  • Картинка слишком большая для загрузки — уменьшите её в «Изменить размер» перед генерацией.
  • Хотите лёгкие иконки для сайта — переведите PNG в WebP в конвертере форматов.