TF

Дизайн и CSS

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

Создайте фавиконку из текста, эмодзи или картинки и скачайте favicon.ico, PNG-иконки, apple-touch-icon и манифест.

180×180
48×48
32×32
16×16
My App

В ZIP: favicon.ico (16, 32, 48 px), PNG-иконки до 512 px, apple-touch-icon.png, site.webmanifest и HTML-теги ниже.

Добавьте в <head>
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#0f766e" />

Что это за инструмент?

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

В ZIP входят favicon.ico с изображениями 16, 32 и 48 px, PNG-иконки, apple-touch-icon 180 px для главного экрана iPhone и iPad, иконки 192 и 512 px для Android и PWA, а также ссылающийся на них site.webmanifest.

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

Как пользоваться: Генератор фавиконок

  1. Выберите «Текста или эмодзи» и введите до четырёх символов либо «Изображения» и загрузите логотип.
  2. Выберите цвет фона, форму (квадрат, скруглённая или круг) и размер содержимого — или прозрачный фон.
  3. Проверьте превью размером 16, 32, 48 и 180 пикселей, включая макет вкладки браузера.
  4. Скачайте ZIP (или только favicon.ico) и вставьте HTML-теги в раздел <head> страницы.

Примеры

HTML-теги

<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Частые вопросы

Какие размеры фавиконки нужны?

favicon.ico с изображениями 16, 32 и 48 px покрывает настольные браузеры. Добавьте apple-touch-icon 180 px для iOS и PNG 192 и 512 px в манифесте для Android и устанавливаемых веб-приложений. В ZIP есть всё.

Куда положить файлы?

Загрузите их в корень сайта (туда же, где главная страница) и вставьте HTML-теги в раздел <head> каждой страницы.

Можно ли сделать фавиконку из эмодзи?

Да. Введите эмодзи в текстовое поле. Он рисуется шрифтом эмодзи вашего устройства и, сохранённый как картинка, выглядит одинаково везде.

Почему новая фавиконка не появляется?

Браузеры упорно кешируют фавиконки. Принудительно обновите страницу, откройте её в приватном окне или очистите кеш браузера.

Понадобится больше возможностей?

Премиум-инструменты, повышенные лимиты и доступ через API — в наших планах. Версия 1 остаётся бесплатной и приватной в вашем браузере.