AI-Mall
Бесплатный инструмент

Генератор Favicon

Создайте favicon для сайта из текста, эмодзи или изображения. Все размеры: ICO, Apple Touch Icon, Android Chrome, PWA — в одном архиве.

Текст

Шрифт

Фон

Превью

16×16 вкладка
16×16 вкладка
32×32 закладки
180×180 iOS

HTML-код

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#3b82f6">
<meta name="theme-color" content="#3b82f6">

Скачать

Архив содержит: favicon.ico, PNG всех размеров (16, 32, 48, 150, 180, 192, 512), site.webmanifest, browserconfig.xml и README.

Что такое favicon и зачем он нужен

Favicon (favorite icon) — маленькая иконка, которая отображается во вкладке браузера, в закладках, на домашнем экране мобильных устройств и в результатах поиска.

Favicon повышает узнаваемость сайта и выглядит профессионально. Сайт без favicon выглядит незавершённым.

Рекомендации по дизайну favicon

Простота

Favicon отображается в размере 16×16 пикселей. Сложные детали будут неразличимы. Используйте простые формы и 1-2 цвета.

Контрастность

Favicon должен быть заметен на тёмном и светлом фоне. Используйте контрастные цвета или обводку.

Читаемость

Если используете букву — выбирайте жирный шрифт. Тонкие шрифты плохо читаются в мелком размере.

Соответствие бренду

Favicon должен быть связан с вашим логотипом или названием сайта. Используйте первую букву или символ бренда.

Требования к favicon: размеры и форматы

favicon.ico (16+32+48) — Классический формат, поддерживается всеми браузерами. Содержит несколько размеров в одном файле.
PNG 16×16 и 32×32 — Современный формат для вкладок и закладок браузера.
Apple Touch Icon 180×180 — Иконка для домашнего экрана iPhone/iPad. Автоматически скругляется.
Android Chrome 192×192 и 512×512 — Иконки для PWA и домашнего экрана Android.

Как добавить favicon на сайт

Скачайте архив с favicon, распакуйте файлы в корень вашего сайта. Добавьте HTML-код из блока выше в секцию <head> каждой страницы.

Для Next.js — поместите файлы в папку public/. Для WordPress — используйте раздел "Внешний вид → Настроить → Идентичность сайта".

Больше AI-инструментов на AI-Mall

Генератор Favicon — один из бесплатных инструментов нашей платформы.

Зарегистрироваться бесплатно