Пиксель

Генератор favicon

Загрузите картинку — получите favicon.ico, PNG нужных размеров, SVG и код для head. Всё собирается в браузере.

Иконка

PNG, JPG, WebP или SVG до 10 МБ. Сделаем квадратную иконку и набор файлов для сайта.

Без галочки выбор файла недоступен: изображение может содержать персональные данные.

Вид иконки

Изображение обрабатывается на устройстве и не отправляется на сервер.

Предпросмотр

Так иконка выглядит в маленьких размерах.

Загрузите картинку — увидим иконку в нужных размерах.

Favicon — маленькая иконка рядом с названием сайта во вкладке, закладках и на главном экране телефона. Без неё браузер показывает пустой лист или первую букву домена, а сайт выглядит незавершённым. Сделать иконку можно из готового логотипа или любой квадратной картинки — прямо в браузере, без графического редактора.

Инструмент уменьшает изображение в canvas, добавляет отступ, фон и скругление, затем собирает полный набор: favicon.ico с размерами 16, 32 и 48 px, PNG от 16 до 512 px, SVG-обёртку и HTML-код для вставки. Всё считается на устройстве: картинка не отправляется на сервер и не сохраняется.

Предпросмотр показывает, как иконка выглядит в реальных размерах. Если в 16 px ничего не читается, лучше упростить картинку: убрать мелкий текст и лишние детали.

Полный набор ICO, PNG 16–512, SVG и готовый HTML для head.
Живой предпросмотр Видно, как иконка выглядит в маленьких размерах.
Фон и скругление Прозрачность, цвет подложки, отступ и радиус.
Локально Картинка обрабатывается на устройстве, без загрузки.

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

  1. Поставьте галочку согласия и выберите картинку: PNG, JPG, WebP или SVG.
  2. Настройте отступ, фон и скругление — предпросмотр обновится сам.
  3. Скачайте favicon.ico, PNG нужных размеров, SVG и скопируйте HTML-код.

Где пригодится favicon

  • Новый сайт или лендинг без готовой иконки
  • Логотип, который нужно привести к квадратному формату
  • Набор иконок для установки сайта на телефон
  • Быстрая замена старой иконки без дизайнера
Размеры для соцсетей Обложки, посты и сторис под Instagram, VK и Telegram — с обрезкой под размер. Тени и скругления CSS Визуальный конструктор box-shadow и border-radius с копированием CSS. Генератор QR-кодов Ссылка, Wi-Fi, визитка, Telegram или меню — в одном коде. PNG, SVG и PDF для печати. Удалить фон с фото Прозрачный PNG за один шаг. Фото не покидает устройство — модель работает в браузере.

Частые вопросы

Зачем нужны несколько размеров favicon?

Браузеры показывают иконку во вкладке в 16 или 32 px, на экранах с высокой плотностью — в 32–64 px, а при добавлении сайта на главный экран iPhone использует 180×180. Один файл 512×512 браузер сам уменьшит, но маленькие размеры получаются чётче, если нарисовать их отдельно. favicon.ico содержит 16, 32 и 48 px, PNG-набор закрывает остальные случаи.

Почему SVG получается с встроенным PNG?

Инструмент не трассирует картинку в вектор: он создаёт SVG-обёртку с встроенным растром 512×512. Такой файл удобно подключать одной строкой, и он работает во всех современных браузерах. Если нужна настоящая векторная иконка, её рисуют в редакторе вручную.

Изображение загружается на сервер?

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

Какое изображение лучше взять?

Квадратную картинку с простым силуэтом: логотип, букву, знак или лицо крупным планом. Мелкие детали и текст в 16 px превращаются в пятно. Если исходник прямоугольный, включите «Заполнить квадрат» или добавьте отступ, чтобы объект не обрезался.

Куда положить файлы и какой код вставить?

Положите favicon.ico, favicon.svg и apple-touch-icon.png в корень сайта — рядом с index.html. Вставьте три строки из блока «Код для head» в head каждой страницы. Если сайт в подпапке, замените ведущий слеш на путь к папке.

Нужен ли отдельный favicon для тёмной темы?

Иногда да: тёмный логотип теряется на тёмной панели вкладок. Можно сделать светлую версию и подключить её через media="(prefers-color-scheme: dark)" в link. Инструмент создаёт один вариант; для второго повторите шаги с другим фоном.