Как создать фавикон из изображения (или буквы) — бесплатный онлайн-генератор

Используйте бесплатный онлайн-генератор фавиконов, чтобы создать фавикон из изображения или буквы/эмодзи. Получите все размеры (16, 32, 180, 192, 512), многоразмерный favicon.ico, манифест и HTML-фрагмент — всё в браузере.

Фавикон — это крошечная иконка, которая сидит на вкладке браузера, в панели закладок, на главном экране телефона, когда кто-то сохраняет ваш сайт, и всё чаще в результатах поиска рядом с вашим доменом. Это один из самых маленьких ресурсов на сайте и один из самых непропорционально важных: сайт без фавикона выглядит незавершённым, тогда как чёткий, узнаваемый фавикон делает бренд отполированным с самого первого пикселя. Проблема в том, что правильно настроить фавиконы раньше было неоправданно мучительно — и именно это исправляет хороший генератор фавиконов онлайн.

Почему одного фавикона никогда не достаточно

В раннем вебе вы клали один favicon.ico в корневую директорию — и на этом всё. Сегодня браузеры, операционные системы и лаунчеры приложений требуют разных размеров для разных контекстов. Иконка 16×16 отрисовывается на вкладке браузера. 32×32 используется для дисплеев высокой плотности и панели задач Windows. Устройства Apple хотят apple-touch-icon.png размером 180×180 для главного экрана. Android и прогрессивные веб-приложения ссылаются на PNG 192×192 и 512×512 из веб-манифеста. Пропустите один — и ваша иконка выглядит размытой, пикселизированной или попросту отсутствует в этом контексте.

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

Создайте фавикон из изображения

Самый частый рабочий процесс — создать фавикон из изображения, обычно логотипа или иконки приложения. Перетащите PNG, JPG, WebP, SVG или GIF в область загрузки. Инструмент рисует ваше изображение на квадратном canvas с заполнением по принципу cover (так что неквадратные изображения центрируются и обрезаются, а не сплющиваются), а затем уменьшает его до каждого размера из стандартного набора. Поскольку фавиконы отображаются очень маленькими, чистое, контрастное, в идеале квадратное исходное изображение даёт наилучший результат. Мелкие детали и небольшой текст имеют свойство исчезать при 16×16, поэтому простые знаки читаются гораздо лучше.

Или сгенерируйте фавикон из буквы или эмодзи

Не у всех есть готовый логотип — и он вам не нужен. Переключитесь в режим буквы/эмодзи, введите один символ (фирменную начальную букву вроде «B» или эмодзи вроде 🚀), выберите цвет фона и цвет текста, и инструмент отрисует чистый, центрированный глиф в каждом размере. Это идеально для пет-проектов, внутренних инструментов, сайтов документации и быстрых прототипов. Вы получаете отличительный, фирменный фавикон, вообще не открывая дизайн-приложение.

Что вы на самом деле скачиваете

Когда вы нажимаете «скачать», инструмент упаковывает полный, готовый к продакшену пакет в один ZIP-файл:

PNG-иконки размерами 16×16, 32×32, 48×48, 180×180 (иконка Apple touch), 192×192 и 512×512.
favicon.ico — настоящий многоразмерный ICO-файл, содержащий изображения и 16×16, и 32×32, закодированный прямо в вашем браузере, чтобы устаревшие браузеры и Windows всё же получили правильную иконку.
site.webmanifest — готовый к редактированию манифест веб-приложения, который ссылается на PNG 192 и 512 для Android и установок PWA.
HTML-фрагмент — точные теги <link>, которые вы вставляете в свой <head>, также копируемые прямо из инструмента в один клик.

Как добавить фавиконы на ваш сайт

Добавление фавиконов — процесс из двух шагов. Сначала распакуйте скачанные файлы в корневую или публичную директорию вашего сайта (туда же, где лежит ваш index.html или публичная папка фреймворка). Затем вставьте сгенерированные теги link в <head> вашего HTML:

<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<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" />

Если вы на Next.js, поместите файлы в директорию public/ и либо добавьте теги в корневой layout, либо положитесь на metadata API фреймворка. На WordPress у большинства тем есть настройка иконки сайта, принимающая один квадратный PNG — загрузите туда 512×512. Для статических сайтов и фреймворков вроде Astro, Vite или чистого HTML приведённый выше фрагмент работает как есть.

Всё работает в вашем браузере

Многие генераторы фавиконов загружают ваш логотип на сервер, обрабатывают его удалённо и присылают по почте или перенаправляют вас на скачивание. Наш так никогда не делает. Весь конвейер — декодирование вашего изображения, отрисовка его на canvas, изменение размера, кодирование ICO и PNG и упаковка результата — происходит локально с помощью HTML canvas и библиотеки jszip, работающей в вашей вкладке. Ваш логотип никогда не покидает ваше устройство, нет аккаунта для создания, нет водяного знака и нет лимита на загрузку. Это по-настоящему бесплатно и по-настоящему приватно.

Советы для чётких фавиконов

Начните с квадратного источника, чтобы ничего не обрезалось неожиданно. Используйте жирные формы и высокий контраст, чтобы иконка оставалась разборчивой при 16 пикселях. Избегайте тонких линий и мелкого текста — они пропадают на малых размерах. Если вы используете режим буквы, насыщенный цвет фона с белым текстом чисто читается и в светлой, и в тёмной темах браузера. И всегда проверяйте свой фавикон в настоящей вкладке браузера после развёртывания, потому что ничто не сравнится с тем, чтобы увидеть его в реальном размере.

Попробуйте прямо сейчас

Откройте Генератор фавиконов, загрузите логотип или введите букву и скачайте полный набор фавиконов за секунды. Раз уж вы здесь, вам также могут понравиться Изменение размера изображений, Конвертер форматов изображений и Генератор мета-тегов — всё бесплатно, всё приватно, всё работает целиком в вашем браузере.