F
Favicon.pub

Генератор Favicon

Загрузите изображение, чтобы сгенерировать favicon всех размеров для вашего сайта.

Кликните или перетащите изображение сюда

Поддерживаются PNG, JPG, SVG, WEBP

Генерация в один клик

Загрузите изображение и получите favicon всех размеров и форматов: ICO, PNG, SVG и др.

Кроссплатформенная совместимость

Поддержка всех браузеров и устройств: iOS, Android, Windows и др.

Профессиональное качество

Автоматическая оптимизация качества изображения, генерация файлов favicon высокого качества для всех платформ.

Что такое Favicon?

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

Как использовать Favicon

Чтобы добавить Favicon на ваш сайт, выполните следующие шаги:

  1. Используйте наш инструмент для конвертации изображения в ICO и другие форматы.
  2. Распакуйте скачанный ZIP-архив и поместите все файлы в корневую папку сайта.
  3. Добавьте следующий 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">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">HTML

Лучшие практики

  • Делайте просто: Favicon очень маленький, сложный дизайн будет плохо различим.
  • Бренд-консистентность: Используйте ваш логотип или характерные элементы, которые представляют ваш бренд.
  • Учитывайте разные темы: Убедитесь, что ваш иконка четко видна как в светлой, так и в темной теме браузера.
  • Предоставьте несколько форматов: Помимо .ico, также предоставьте форматы .png и .svg для совместимости с современными браузерами, как делает наш инструмент.

Различные форматы

Формат ICO (.ico)

Традиционный формат favicon, совместимый со всеми браузерами, включая устаревшие версии Internet Explorer. Обычно содержит несколько размеров (16x16, 32x32, 48x48).

Формат PNG (.png)

Предпочитаемый формат современных браузеров, поддерживает прозрачный фон, маленький размер файла. 16x16 для вкладок, 32x32 для панели задач, 48x48 для десктопных ярлыков.

Иконки Android Chrome

192x192 и 512x512 для устройств Android, отображаемые при добавлении сайта на главный экран PWA (Прогрессивный веб-приложение).

Иконки Apple Touch

180x180 специально для устройств iOS (iPhone, iPad), используемых при добавлении на главный экран. Apple автоматически добавляет скругление и эффекты блеска.

Иконка для закрепленных вкладок Safari

Векторная иконка в формате SVG, используемая для функции закрепления вкладок Safari, поддерживает настраиваемый цвет.

Формат SVG (.svg)

Современный векторный формат, который можно бесконечно масштабировать без потери качества, поддерживает адаптивность темной теме, маленький размер файла, является будущим трендом.