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

Этот генератор фавиконов создаёт все нужные сайту размеры — из загруженного изображения, набранных инициалов или эмодзи. Выберите источник и получите ICO-файлы 16×16, 32×32 и 48×48, масштабируемый SVG, а также PNG-версии для Apple Touch и домашнего экрана Android, готовые к размещению в проекте.

Начните с изображения, наберите от одной до трёх букв с выбором шрифта и формы или выберите эмодзи — затем инструмент отрендерит шесть PNG (16, 32, 48, 180, 192, 512 пикселей), чёткий SVG и многослойный ICO с тремя маленькими размерами, которые до сих пор требуют вкладки Windows. Всё упаковано в ZIP вместе с site.webmanifest и готовыми тегами link для вставки в head. Квадратный SVG или PNG на входе даёт самое чистое масштабирование.

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

1. Выберите источник: загрузите квадратное изображение (PNG, JPG или SVG, лучше 512×512 или больше), наберите инициалы с выбором шрифта и формы либо выберите эмодзи.
2. Просмотрите сгенерированные фавиконы во всех стандартных размерах (16px, 32px, 48px, 180px, 192px, 512px).
3. Скачайте полный набор фавиконов в ZIP-архиве, включая ICO-файл, все размеры PNG и HTML-теги link для вставки в head вашей страницы.

Когда использовать

• Добавление значков вкладки и домашнего экрана для нового сайта или веб-приложения.
• Обновление айдентики на действующем сайте после редизайна логотипа.
• Генерация PWA-иконок, соответствующих спецификации manifest, для функции «Добавить на главный экран».

Результат

Разработчик загружает логотип стартапа размером 1024×1024. Инструмент генерирует полный набор фавиконов: favicon.ico (16/32/48), apple-touch-icon.png (180×180), иконки для Android (192/512), а также HTML-метатеги.

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

Зачем мне столько разных размеров favicon?

Каждая платформа просит свой размер. Вкладки Chrome — 32 px, закладки — 16, домашний экран iOS — 180, домашний экран Android — 192, splash-экран PWA — 512. Когда все размеры на месте, иконка остаётся чёткой везде, где появляется.

Что лучше загружать: PNG, SVG или JPG?

Лучший вариант — SVG: он масштабируется без потерь до любого размера. Второй — PNG 512 на 512. JPG тоже подходит, но из-за сжатия с потерями вокруг иконки появляются ореолы, особенно заметные на 16 и 32 пикселях.

Что лежит внутри ICO-файла?

ICO — это контейнерный формат. В версии, которую делает инструмент, лежат три bitmap-слоя (16, 32 и 48 пикселей), чтобы Windows автоматически подбирала нужный в зависимости от места показа: панель задач, список файлов, вкладка браузера.

Куда положить файлы в проекте?

Распакуйте пакет в публичный корень сайта рядом с index.html. Готовые теги link используют корневые пути (/favicon.ico, /apple-touch-icon.png), поэтому в чистом HTML и фреймворках вроде Next.js, Astro, Vite дополнительная настройка не нужна.

Я заменил favicon, а браузер всё ещё показывает старый. Почему?

Браузеры очень агрессивно кешируют favicon. Сделайте принудительную перезагрузку (Ctrl+Shift+R в Windows, Cmd+Shift+R в Mac) или добавьте к тегу link query-параметр, например /favicon.ico?v=2, чтобы заставить браузер скачать новую иконку. Обычно кеш сам сбрасывается в течение дня.

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