Перейти к содержимому

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

Превратить логотип в favicon.ico и все иконки, нужные сайту.

Добавьте логотип, выберите нужный квадрат и получите favicon.ico с версиями 16, 32 и 48 пикселей внутри, PNG для современных браузеров и телефонов, готовый site.webmanifest и три строки HTML для вставки. Каждый размер рисуется из оригинала именно в этом размере, а не уменьшается из одного большого.

Как пользоваться

  1. Добавьте логотип — PNG, JPG или SVG.
  2. Наведите квадрат на то, что должно стать иконкой, и выберите фон.
  3. Нажмите «Собрать набор фавиконок» и распакуйте файлы в корень сайта.

Почему этот инструмент

Полная конфиденциальность

Всё работает внутри браузера. Ваши файлы и текст никогда не отправляются на сервер.

Бесплатно и без ограничений

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

Мгновенный результат

Не нужно ничего загружать и ждать очереди — результат появляется так быстро, как позволяет ваше устройство.

Работает на любом устройстве

Любой современный браузер на телефоне, планшете или компьютере. Ничего устанавливать не нужно.

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

Почему favicon.ico — это не одна картинка?
Потому что это контейнер. Браузер читает файл и берёт размер, ближайший к нужному: 16 пикселей для вкладки, 32 для панели закладок, 48 для ярлыка Windows. Если внутри лежит только одна большая картинка, браузер уменьшает её сам, а делает он это плохо: тонкие линии и мелкий текст на 16 пикселях превращаются в кашу. Здесь каждый размер рисуется из вашего оригинала отдельно.
Нужен ли favicon.ico, если есть PNG?
Да, и он ничего не стоит. Браузеры до сих пор запрашивают /favicon.ico по имени, даже если на него не указывает ни один тег, а некоторые старые ничего другого не читают. PNG закрывают современные браузеры, домашний экран iPhone и установку на Android — поэтому в архиве есть и то и другое.
Делать ли фон прозрачным?
Для иконки во вкладке обычно да: тогда она нормально смотрится и на светлой, и на тёмной теме браузера. Исключение — иконка на домашнем экране iPhone: Apple накладывает её на чёрный, поэтому ей автоматически даётся сплошной фон, даже если вы выбрали прозрачный, иначе тёмный логотип на чёрном просто не виден.
Можно ли использовать SVG?
Да, и результат будет лучшим. SVG отрисовывается заново в каждом размере, а не растрируется один раз и масштабируется, поэтому иконка 16 пикселей — это настоящая отрисовка в 16 пикселей. Всё работает в браузере, так что SVG не покидает ваше устройство.
Куда класть файлы?
Все — в корневую папку сайта, на один уровень с index.html, чтобы они открывались по адресам /favicon.ico и /apple-touch-icon.png. Затем вставьте три строки из how-to-use.txt в секцию head ваших страниц. Если старая иконка не меняется, это кэш браузера — обычно помогает жёсткое обновление страницы.

Похожие инструменты