Генератор фавиконов

Фавикон — маленькая иконка 16×16 или 32×32 пикселя, которая показывается во вкладках браузера, закладках и адресной строке. Она помогает быстро найти ваш сайт среди десятка открытых вкладок и работает на узнаваемость бренда. Современные сайты отдают сразу несколько размеров (16×16, 32×32, 48×48, 180×180), чтобы иконка выглядела чётко на разных устройствах — включая экран «Домой» на телефоне и список закладок.

Для максимальной совместимости стоит отдать несколько размеров:

• 16x16px — обычная иконка вкладки браузера
• 32x32px — вкладки на экранах Retina и панель задач
• 48x48px — иконки сайтов в Windows
• 180x180px — Apple Touch Icon для экрана «Домой» в iOS
• Формат SVG — масштабируемый вектор, который останется чётким в любом размере

Генератор создаёт все эти размеры из вашего макета автоматически.

У обоих форматов есть свои плюсы:

PNG (рекомендуем для максимальной совместимости):Поддерживается всеми браузерами, работает везде, позволяет сложные градиенты и эффекты. Берите для детальных многоцветных макетов.

SVG (современный и масштабируемый):Идеален для простых макетов: масштабируется без потери качества, а для базовых фигур весит меньше. Поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge).

Лучшая практика — использовать оба: SVG для современных браузеров и PNG как запасной вариант для старых систем. Инструмент выгружает оба формата.

Да. Генератор поддерживает линейные градиенты с настраиваемым направлением (вправо, вниз, по диагонали). В PNG градиенты работают безупречно, современные SVG-фавиконы их тоже понимают.

Выберите два цвета и направление (→ вправо, ↓ вниз, ↘ вправо-вниз, ↗ вправо-вверх). Градиент отрисовывается одинаково и в предпросмотре, и в выгруженных файлах. Для полной совместимости скачайте вместе с SVG ещё и PNG.

Да. В генераторе больше 50 популярных шрифтов Google Fonts — Roboto, Montserrat, Poppins, Inter и другие. Выберите любой в списке, и предпросмотр обновится сразу.

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

Конечно. Нажмите кнопку загрузки PNG или SVG и выберите свой логотип. Поддерживаются форматы PNG и SVG. Изображение обрабатывается целиком в вашем браузере — на наши серверы ничего не отправляется.

После загрузки можно:

• Изменить размер ползунком масштаба (от 30% до 200%)
• Сдвинуть по горизонтали и вертикали соответствующими ползунками
• Поменять цвет фона или добавить градиент
• Выбрать форму — квадрат, скруглённый квадрат или круг

Загруженное изображение живёт только в памяти браузера и исчезает при закрытии страницы — полная приватность.

Все современные браузеры:

• Chrome/Edge — полная поддержка PNG, SVG и ICO
• Firefox — полная поддержка всех форматов, включая SVG
• Safari — PNG и ICO (SVG начиная с Safari 12)
• Мобильные браузеры — Safari на iOS берёт apple-touch-icon, Chrome на Android — обычный фавикон

Скачав из генератора несколько размеров, вы получите иконку, которая корректно показывается везде.

Чем меньше, тем быстрее грузится. Рекомендуемые размеры файлов:

• PNG 16×16: меньше 1 КБ
• PNG 32×32: 1–3 КБ
• SVG: от 500 байт до 2 КБ (для простых макетов заметно меньше PNG)

Генератор оптимизирует вес сам. Текстовые фавиконы выгружаются совсем маленькими, сложные загруженные изображения — чуть больше, но всё равно пригодными для веба.

Современные браузеры (Chrome, Firefox, Safari, Edge) полностью понимают PNG-фавиконы, так что .ico не обязателен. PNG даёт лучшее качество и прозрачность, чем формат ICO.

Но если нужна поддержка совсем старых браузеров (IE10 и ниже) или хочется положить favicon.ico в корень по традиции, выгруженный PNG можно перегнать в ICO любым онлайн-конвертером. Современному сайту достаточно PNG и SVG.

Случайные цвета подбираются так, чтобы автоматически проходить требования WCAG: контраст между текстом и фоном не ниже 4,5:1, то есть иконка остаётся читаемой и для людей с нарушениями зрения. Жмите несколько раз, чтобы перебрать варианты, не теряя доступности. Удобный способ найти небанальное фирменное сочетание, которое при этом работает.

В блоке предпросмотра есть ползунки горизонтального и вертикального положения. Каждый работает в диапазоне от −50 до +50 пикселей, так что текст или логотип можно поставить в любое место холста.

Особенно пригодится, если загруженный логотип сам по себе не отцентрован или вы намеренно хотите смещённую композицию. Сдвиг применяется и к PNG, и к SVG, поэтому итог совпадёт с предпросмотром.

Напрямую на позиции фавикон не влияет, но помогает косвенно — через удобство для человека:

• Узнаваемость — сайт легче найти и в выдаче, и среди вкладок
• Аккуратность — внимание к мелочам вызывает доверие
• Меньше отказов — по заметной иконке проще вернуться к вашей вкладке
• Закладки на телефоне — красивую иконку охотнее сохраняют на экран «Домой»

Google к тому же показывает фавиконы в мобильной выдаче, так что иконка — часть вашего вида в поиске.

Нет. Вся обработка идёт в браузере на клиентском JavaScript. Когда вы загружаете изображение:

• Файл читается через браузерный FileReader API
• Данные лежат только в оперативной памяти браузера
• Отрисовка идёт через HTML5 Canvas
• На наши серверы не уходит ничего
• При закрытии страницы всё стирается

Ваши логотипы и фирменные материалы остаются полностью приватными. После загрузки страницы генератором можно пользоваться даже без сети.

Рисовать — бесплатно и без ограничений: загружайте логотипы, берите любой из 50 шрифтов, применяйте градиенты и смотрите все размеры без входа в аккаунт. Сборка готового набора для скачивания стоит 3 кредита, а на бесплатном тарифе начисляется 50 кредитов в месяц — это примерно 16 наборов бесплатно и без карты. Никаких водяных знаков и ограничений: результат можно использовать в личных проектах, на коммерческих сайтах и в клиентской работе.