Текстовый генератор иконки Favicon
Рекомендуется использовать 1-2 символа для лучшего результата
Текст в иконку
Введите любой текст, и автоматически сгенерируйте профессиональную иконку Favicon, поддерживающую множество шрифтов и стилей
Настраиваемый стиль
Богатые настраиваемые параметры, включая шрифт, цвет, форму фона и изображение фона
Реальный предварительный просмотр
Реальный предварительный просмотр "как есть", настройте параметры, чтобы увидеть результат сразу
Что такое Favicon?
Favicon (сокращение от favorite icon) — это маленькая иконка, отображаемая на вкладках браузера, в закладках и других элементах интерфейса.
Как использовать Favicon
Чтобы добавить Favicon на ваш сайт, вам нужно:
- Используйте наш инструмент для генерации и загрузки архива Favicon.
- Распакуйте загруженный ZIP-архив и поместите все файлы в корневую директорию вашего сайта.
- Добавьте следующий HTML-код в раздел <head> вашего сайта：
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">HTMLОбъяснение различных форматов
Формат ICO (.ico)
Классический формат Favicon, совместимый со всеми браузерами, обычно содержит несколько размеров (16x16, 32x32, 48x48).
Формат PNG (.png)
Современные браузеры предпочитают формат PNG, поддерживающий прозрачный фон; 16x16 для вкладок, 32x32 для панели задач, 48x48 для ярлыков.
Android Chrome иконки
192x192 и 512x512 используются для PWA на Android, отображаются при добавлении сайта на главный экран.
Apple Touch иконки
180x180 для iOS-устройств (iPhone, iPad), используются при добавлении сайта на главный экран.
Дизайн текстовых фавиконов, читаемых при 16 px
Текстовые фавиконы решает размер вкладки. В генераторе фавиконов из текста эти параметры важнее, чем в любом инструменте для изображений — то, что выглядит чётко в превью 512 px, может превратиться в нечитаемое пятно в реальной вкладке браузера.
Семейство шрифта
Жирные шрифты без засечек (Arial Black, Helvetica Bold, Futura) лучше всего переносят рендеринг 16×16. Тонкие штрихи serif, рукописных и узких шрифтов при размере вкладки часто исчезают полностью, хотя кажутся чёткими в превью.
Количество символов
Идеальна одна буква. Монограмма из двух букв работает, если уменьшить кегль на шаг; три и более символа в 16-пиксельной вкладке нечитаемы — длинные тексты оставьте для иконки Apple 180×180.
Контраст текста и фона
Стремитесь к контрасту выше 7:1. Вкладки отображаются в светлой и тёмной темах браузера: серый текст на прозрачном фоне исчезает в одной из них, а залитая фигура с белым текстом читается в обеих.
Форма фона
Радиус скругления 15-20 % при любом размере выглядит как современная иконка приложения. Полностью прозрачный фон чист в превью, но нечитаем на тёмных панелях вкладок — проверьте обе темы перед публикацией.
Внутренние отступы
Удерживайте глиф в пределах 60-70 % холста. Браузеры рисуют фавиконы меньше номинального размера (иконку 16 px в более крупном слоте на экранах высокой плотности), и глифы у краёв визуально обрезаются.