belun.app Блог

Генератор фавиконов — создание favicon из текста или картинки

Форма
Живое превью

Вставьте это в свой <head> 
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Введите пару букв или загрузите картинку — и получите готовый набор фавиконов одним архивом: favicon.ico, PNG от 16×16 до 512×512, иконку для Apple, веб-манифест и HTML-код для вставки в head. Всё рисуется прямо в браузере, поэтому файлы никуда не загружаются.

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

  1. 1
    Выберите текст или изображение На вкладке «Текст» введите одну-две буквы, или на вкладке «Изображение» перетащите логотип (PNG, JPG, SVG или WebP). Лучше всего подходит квадратная картинка.
  2. 2
    Задайте цвет и форму Для текстового режима выберите цвет фона и форму углов: квадрат, скругление или круг. Превью обновляется сразу.
  3. 3
    Скачайте и подключите Нажмите «Скачать набор фавиконов», чтобы получить архив со всеми размерами и favicon.ico. Распакуйте его в корень сайта и вставьте HTML-код в <head>.

Ваши данные защищены

Всё обрабатывается прямо в вашем браузере. Никакие файлы или текст не отправляются на наши серверы. Отключите интернет — инструмент продолжит работать.

Часто задаваемые вопросы

Какие размеры создаёт генератор фавиконов?
PNG в размерах 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180 (иконка Apple), 192×192 и 512×512 (Android/PWA), а также 256×256 — и многоразмерный favicon.ico с версиями 16, 32 и 48 пикселей.
Нужен ли favicon.ico, если есть PNG?
Да, это самый надёжный вариант по умолчанию. Старые браузеры, RSS-читалки, сервисы закладок и краулеры сначала ищут /favicon.ico. Он входит в набор, так что покрыты все клиенты.
Изображение загружается на сервер?
Нет. Картинка читается и рисуется через HTML canvas прямо в браузере. Она не покидает ваше устройство — фавиконы можно создавать даже офлайн после загрузки страницы.
Куда класть файлы и код?
Распакуйте всё в корневую папку сайта (туда же, где главная страница), затем вставьте пять строк кода в <head>. Если старая иконка не меняется, очистите кэш браузера.
Почему видны только первые две буквы?
Фавикон крошечный — часто всего 16 пикселей в ширину, — поэтому читаемыми остаются один-два символа. Генератор берёт инициалы: «belun.app» превращается в BA, «Acme» — в AC.

Из блога

Фавиконы в 2026: какие размеры нужны и как их подключить Какие размеры фавиконов ещё важны, почему favicon.ico всё ещё жив и как подключить полный набор иконок пятью строками HTML. Читать статью →

Похожие инструменты

Изображение в Base64 Преобразование картинки в data URI для HTML, CSS или письма. Генератор CSS-градиентов Создание линейных и радиальных CSS-градиентов визуально. Конвертер цветов Конвертация цветов между HEX, RGB, HSL и HSV. Изменение размера изображения Изменение размеров картинки прямо в браузере.