Генератор favicon

Новое

Создайте полный набор favicon из изображения или букв и скачайте ZIP.

Drop an image, click to browse, or paste PNG, JPG, SVG or WebP — a square 512×512+ logo works best. Processed on your device.

Background Transparent

Shape

Padding 0% App name (for manifest)

Drop an image above to generate your favicon set — or switch to Text or Emoji to build one from a letter or emoji.

Live preview

Browser tab

My App

Bookmarks bar

My App

iOS home screen

My App

Android home screen

My App

Generated sizes

Apple touch (180) and Android (192/512) icons use a solid background; the 192 and 512 are maskable with a built-in safe zone.

HTML for your <head>

site.webmanifest

Runs entirely in your browser. Nothing is uploaded.

Создайте полный набор favicon в браузере

Этот генератор favicon создаёт все иконки, необходимые современному сайту или веб-приложению: favicon для браузера, многоразмерный favicon.ico, Apple touch icon и маскируемые PWA-иконки для манифеста — из единого исходника. Выберите изображение, текстовый монограмм или эмодзи, настройте фон, форму и отступы, и скачайте готовый ZIP-архив со всеми файлами и точным HTML-фрагментом для вставки в <head>.

В отличие от инструментов, которые отправляют ваше изображение на сервер, здесь всё рендерится локально на HTML canvas: быстро, бесплатно, без регистрации, а ваш логотип остаётся полностью конфиденциальным. Никаких аккаунтов, ожидания серверной обработки и рекламы.

Из изображения, SVG, букв или эмодзи

Три режима ввода охватывают любую отправную точку. Изображение принимает PNG, JPG, SVG и WebP — загрузите квадратный логотип, и он будет отцентрирован под каждый размер; загрузите SVG, и он также пройдёт без изменений как чёткий масштабируемый favicon.svg. Текст превращает от одной до трёх букв в аккуратный монограмм с выбранными шрифтом и цветами — удобно, когда логотипа ещё нет. Эмодзи одним кликом превращает любой эмодзи в favicon — самый быстрый способ придать проекту индивидуальность.

Что бы вы ни выбрали, вы получаете полный набор: каждый размер PNG, настоящий favicon.ico, опциональный favicon.svg, манифест веб-приложения и HTML-код. Это покрывает все браузеры, все ОС, все размеры устройств — от вкладки Chromebook до главного экрана Android.

Все размеры плюс настоящий favicon.ico

Инструмент генерирует PNG 16×16, 32×32 и 48×48 для вкладок браузера и Windows, Apple touch icon 180×180, а также иконки 192×192 и 512×512 для главных экранов Android и PWA. Затем биткарты 16, 32 и 48 пикселей кодируются в настоящий многоразмерный favicon.ico — контейнерный файл, который браузеры запрашивают по умолчанию, — полностью в вашем браузере без обращения к серверу.

Формат ICO важен. Многие инструменты создают PNG 32×32 и переименовывают его в favicon.ico — это работает, но означает, что браузер всегда масштабирует из одного источника. Настоящий многоразмерный ICO позволяет браузеру выбирать наиболее чёткий размер для каждого контекста.

Apple touch icon и маскируемые PWA-иконки — всё правильно

Правильная генерация мобильных иконок — слабое место большинства favicon-инструментов. apple-touch-icon рендерится в 180×180 с непрозрачным фоном (iOS не поддерживает прозрачность и скругляет углы автоматически). Иконки манифеста 192 и 512 генерируются как маскируемые — их содержимое удерживается внутри безопасной зоны (~80% иконки), чтобы Android мог обрезать их в круг, squircle или скруглённый квадрат без потери логотипа.

Живые предпросмотры показывают вашу иконку во вкладке браузера, панели закладок и на главных экранах iOS и Android — так вы видите результат до публикации. Это избавляет от необходимости деплоить, проверять на телефоне, корректировать и деплоить снова.

Сравнение UtiloKit с favicon.io и RealFaviconGenerator.net

favicon.io — самый популярный favicon-инструмент и действительно хороший, но он загружает ваше изображение на сервер, а значит, неопубликованный логотип или клиентский актив покидает ваше устройство. RealFaviconGenerator.net — самый функциональный вариант, но многошаговый мастер перегружен для быстрых проектов, и он тоже обрабатывает изображения на сервере. favicon-generator.org устарел: генерирует только базовые PNG без маскируемой иконки манифеста и без SVG.

UtiloKit делает всё локально. Ваше изображение никогда не покидает браузер. В результате вы получаете настоящий многоразмерный ICO, корректные маскируемые иконки манифеста с отступами безопасной зоны, масштабируемый SVG и готовый к вставке фрагмент <head> — тот же полный набор, что у RealFaviconGenerator, но без загрузки и мастера. Работает и на iPhone, и на Android.

Манифест и HTML-фрагмент — готовы к вставке

Вместе с иконками вы получаете полный site.webmanifest — с именем приложения, цветом темы и записями маскируемых иконок — и готовый к копированию фрагмент <head>, связывающий .ico, .svg, Apple touch icon и манифест, а также соответствующий мета-тег theme-color. Вставьте его в HTML, загрузите файлы в корень сайта — и готово.

Фрагмент работает с любым стеком: чистый HTML, Next.js, Astro, Nuxt, SvelteKit, Remix. Если в вашем фреймворке есть собственная конфигурация favicon (Next.js app/icon.png, Astro head config), PNG-файлы подойдут и туда.

Frequently asked questions

Что такое favicon?

Favicon (сокращение от «favorite icon» — «избранная иконка») — это маленькая квадратная иконка, которую браузер отображает рядом с названием страницы: во вкладке, панели закладок, истории и иногда в результатах поиска. Обычно размером 16×16 или 32×32 пикселя, она хранится в корне сайта как favicon.ico. Современные сайты также добавляют favicon.svg, Apple touch icon и PWA-иконки для главных экранов. Узнаваемый favicon повышает кликабельность в закладках и результатах поиска.

Какой размер должен быть у favicon?

Начните с 16×16 и 32×32 — два размера, которые браузеры показывают во вкладках и закладках — упакованных в единый favicon.ico. Для полного охвата добавьте 48×48 (используется Windows), apple-touch-icon 180×180 для iOS и PNG 192×192 и 512×512 для Android и главных экранов PWA. Этот генератор создаёт все эти размеры сразу из одного источника — без ручного изменения размеров и без нескольких инструментов.

Как создать favicon?

Выберите источник — загрузите изображение (PNG, JPG, SVG или WebP), введите от одной до трёх букв или вставьте эмодзи — затем выберите цвет фона, форму (квадрат, скруглённый или круг) и отступы. Инструмент рендерит все размеры favicon на canvas, упаковывает 16/32/48 в favicon.ico и выдаёт ZIP со всеми файлами и HTML-фрагментом для вставки в <code><head></code>. Весь процесс займёт меньше минуты без каких-либо программ для дизайна.

Безопасно ли загружать свой логотип?

Да — потому что ничего не загружается на самом деле. Каждый шаг выполняется в браузере с помощью HTML <code><canvas></code> и JavaScript: изображение читается локально, изменяется в размере, кодируется в PNG и ICO и архивируется в ZIP на вашем устройстве. Никакой файл никогда не отправляется на сервер, в отличие от таких инструментов, как favicon.io и RealFaviconGenerator.net. Ваш логотип никогда не покидает ваш компьютер — это важно при работе над клиентскими проектами или неопубликованными продуктами.

Почему мой favicon не отображается?

Почти всегда это кэширование в браузере. Браузеры агрессивно кэшируют favicon, поэтому выполните жёсткую перезагрузку (Ctrl+F5), откройте URL иконки напрямую (yoursite.com/favicon.ico), чтобы убедиться в загрузке, или попробуйте в приватном окне. Также проверьте, что файлы находятся в корне сайта, пути в тегах <code><link></code> правильные (ведущий слэш важен) и все размеры загружены. Новые favicon могут некоторое время не обновляться в закладках и результатах поиска — подождите несколько часов после деплоя.

Работает ли генератор favicon на iPhone и Android?

Да — Canvas API и скачивание файлов работают в Safari iOS, Chrome для Android и Samsung Internet. Можно загрузить фото из галереи, ввести букву или вставить эмодзи, а затем скачать полный ZIP прямо на телефон. Это удобно для быстрого прототипирования favicon вдали от компьютера. Интерфейс адаптируется к маленьким экранам и комфортно работает при ширине 375px.

Что такое маскируемая иконка?

Иконки манифеста (PNG 192×192 и 512×512, указанные в site.webmanifest) используются Android и установленными PWA. «Маскируемая» иконка удерживает важное содержимое внутри центральной безопасной зоны — около 80% иконки — чтобы при обрезке системой в круг, squircle или скруглённый квадрат она выглядела правильно. Этот генератор автоматически добавляет отступы безопасной зоны к иконкам 192 и 512 и помечает их как <code>purpose: maskable</code>. Вам не нужно вычислять безопасную область вручную.