Favicon Generator - Text to Favicon.ico

Мгновенно создавайте собственные значки — идеально подходит для веб-сайтов, приложений и PWA.

Создайте свой значок

Включить SVG

Как установить значки на ваш сайт

Улучшите внешний вид вашего веб-сайта на всех устройствах, установив собственные значки. Выполните следующие простые шаги, чтобы интегрировать недавно созданный пакет значков:

  1. **Создайте свой значок **. Используйте наш генератор значков, чтобы создавать собственные значки с желаемым текстом, цветами, формой и шрифтом. Нажмите «Создать значок», чтобы загрузить пакет значков.

  2. Загрузить и разархивировать. После создания загрузите пакет значков и извлеките файлы в корневой каталог вашего веб-сайта.

  3. Добавьте HTML-код. Вставьте следующий код в раздел «head» вашего HTML-файла, чтобы обеспечить совместимость с различными устройствами и браузерами:

<link rel="apple-touch-icon" sizes="57x57" href="/favicon-57x57.png" type="image/png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60x60.png" type="image/png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72x72.png" type="image/png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114x114.png" type="image/png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120x120.png" type="image/png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144x144.png" type="image/png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" type="image/png" />
<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/png" />
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png" />
<link rel="icon" sizes="96x96" href="/favicon-96x96.png" type="image/png" />
<link rel="icon" sizes="192x192" href="/favicon-192x192.png" type="image/png" />
<link rel="icon" sizes="512x512" href="/favicon-512x512.png" type="image/png" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#FFFFFF" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="/favicon-512x512.png" />

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

  1. Введите желаемый текст (1-2 символа).
  2. Настройте цвета, форму и шрифт.
  3. Нажмите "Создать фавикон".
  4. Скачайте пакет фавиконов.
  5. Внедрите его, используя предоставленный код.

Размеры создаваемых фавиконов

Наш генератор фавиконов создает иконки в следующих основных размерах:

Общие размеры значков Apple Touch:

  • 57x57px: iPhone и iPod touch.
  • 60x60px: Иконки для последних моделей iPhone.
  • 72x72px: Иконки для iPad.
  • 76x76px: iPad с дисплеем Retina.
  • 114x114px: iPhone с дисплеем Retina.
  • 120x120px: Иконки Retina для последних моделей iPhone.
  • 144x144px: iPad с дисплеем Retina.
  • 152x152px: iPad с дисплеем Retina.
  • 180x180px: iPhone 6+ и новые иконки Retina.

Общие размеры иконок:

  • 16x16px: Фавиконы для вкладок браузера.
  • 32x32px: Фавиконы стандартного размера.
  • 48x48px: Ярлыки Windows.
  • 64x64px: Ярлыки Windows.
  • 96x96px: Устройства Chrome и Android.
  • 192x192px: Устройства Android.
  • 512x512px: Иконки для экранов с высоким разрешением и некоторых Прогрессивных Веб-Приложений (PWA).

Дополнительные форматы:

  • favicon.ico (32x32px): Файл иконки с несколькими разрешениями для максимальной совместимости со старыми системами и браузерами.
  • Формат SVG: Если включено, пакет также содержит масштабируемую векторную иконку (SVG), идеальную для различных размеров и устройств благодаря своей масштабируемости.

Почему важны несколько размеров фавиконов

В современном мире с множеством устройств наличие фавиконов разных размеров крайне важно:

  • Обеспечивает совместимость на всех устройствах и в браузерах
  • Улучшает визуальную четкость на экранах с высоким разрешением
  • Соответствует требованиям для Прогрессивных Веб-Приложений (PWA)
  • Повышает узнаваемость на загруженных вкладках браузера

Часто задаваемые вопросы