GGogotem
Вернуться на главную

Генератор favicon

Превратите логотип или короткие инициалы бренда в комплект иконок для браузера, закладок, домашнего экрана и PWA с готовыми HTML-тегами.

Категории Ожидание результата
Сообщить о проблеме

Пакет иконок

Предпросмотр favicon

Перед скачиванием проверьте маленькие, мобильные и PWA-размеры. Маленьким иконкам нужны контраст и простая форма.

Готово

Источник

Текстовая иконка

6 размеров

Перетащите логотип или начните с букв

По возможности используйте квадратный логотип. Подойдут прозрачный PNG, JPG, WebP и SVG.

upload_fileВыбрать изображение

Перетащите логотип или начните с букв

Созданные размеры

Скачайте отдельные PNG или скопируйте код подключения.

HTML-теги link

Загрузите файлы в /favicon и добавьте эти теги внутрь head страницы.

<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Иконки Manifest

Добавьте эти записи в manifest веб-приложения для установки PWA.

{
  "icons": [
    {
      "src": "/favicon/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Проверка качества

  • Используйте простую форму, различимую при 16px.
  • Сохраняйте сильный контраст фона и знака.
  • Для текстовой иконки используйте 1 или 2 буквы.
  • Проверьте светлые и тёмные вкладки и экран телефона.

Важные замечания

Расчёты основаны на стандартных формулах. Значения могут округляться для удобства чтения. Для важных решений проверьте официальный источник.

Рабочая область результатов

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

Что создаёт генератор favicon

Для хорошего набора недостаточно одной картинки 16px. Инструмент готовит распространённые PNG-размеры и показывает теги, которые можно добавить в head сайта.

Важные замечания

  • 16x16 и 32x32 для вкладок браузера.
  • 48x48 для старых ярлыков.
  • 180x180 для Apple touch icon.
  • 192x192 и 512x512 для Android и PWA.

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

Изображение отправляется на сервер?expand_more

Нет. Оно читается и масштабируется через Canvas в вашем браузере.

Нужен ли файл .ico?expand_more

Современным сайтам достаточно PNG. Для очень старых браузеров можно отдельно преобразовать PNG 32px в .ico.