Генератор SVG Favicon

Преобразует SVG или растровый логотип в полный набор favicon с ICO, PNG-версиями, Apple touch icon и web manifest

Примеры результатов

2 Примеры

Сгенерировать стандартный favicon-набор из SVG

Создает ICO, PNG, Apple touch icon, manifest и готовый HTML-фрагмент из векторного логотипа

svg-favicon-generator-example1.zip Показать файл
Показать параметры ввода
{ "sourceFile": "/public/samples/svg/01-basic-shapes.svg", "backgroundColor": "#ffffff", "fitMode": "contain", "paddingPercent": 10, "siteName": "Studio Atlas", "themeColor": "#0f172a" }

Собрать набор иконок приложения из растрового логотипа

Использует режим cover и темную тему для создания полного набора favicon из PNG-источника

svg-favicon-generator-example2.zip Показать файл
Показать параметры ввода
{ "sourceFile": "/public/samples/images/logo.png", "backgroundColor": "#020617", "fitMode": "cover", "paddingPercent": 4, "siteName": "North Grid", "themeColor": "#020617" }

Click to upload file or drag and drop file here

Maximum file size: 20MB Supported formats: image/svg+xml, image/png, image/jpeg, image/webp

0 8 35

Ключевые факты

Категория
Изображения, аудио и видео
Типы входных данных
file, color, select, range, text
Тип результата
file
Покрытие примерами
4
API доступен
Yes

Обзор

Генератор SVG Favicon — это удобный инструмент для создания полного набора иконок сайта из одного SVG или растрового логотипа. Он автоматически генерирует файлы формата ICO, различные размеры PNG, Apple Touch Icon и файл web manifest, обеспечивая корректное отображение фавиконки на любых устройствах и во всех современных браузерах.

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

  • •При запуске нового веб-сайта, когда нужно быстро создать все необходимые форматы фавиконок из одного исходного логотипа.
  • •При адаптации дизайна под мобильные устройства, чтобы добавить поддержку Apple Touch Icon и манифеста для PWA.
  • •При обновлении брендинга, когда требуется массово сгенерировать новые иконки с правильными отступами и фоном.

Как это работает

  • •Загрузите исходный файл логотипа в формате SVG, PNG, JPEG или WebP (до 20 МБ).
  • •Настройте параметры отображения: выберите цвет фона, режим вписывания (contain или cover) и размер отступов.
  • •Укажите название сайта и цвет темы для корректной генерации файла web manifest.
  • •Скачайте готовый ZIP-архив со всеми сгенерированными иконками и HTML-кодом для вставки на сайт.

Сценарии использования

Подготовка графических ассетов для Progressive Web Apps (PWA) с использованием файла manifest.
Создание универсального пакета иконок для корпоративного сайта или лендинга.
Адаптация сложного векторного логотипа под стандарты отображения в закладках браузеров и на домашних экранах iOS и Android.

Примеры

1. Сгенерировать стандартный favicon-набор из SVG

Веб-разработчик
Контекст
Разработчик создает новый сайт-визитку для дизайн-студии и имеет на руках только векторный логотип.
Проблема
Нужно быстро получить все форматы фавиконок (ICO, PNG) и HTML-код для вставки без использования сложных графических редакторов.
Как использовать
Загрузите файл логотипа в формате SVG, установите белый цвет фона, режим «contain» и отступ 10%. Укажите название сайта и темный цвет темы.
Пример конфигурации
Цвет фона: #ffffff, Режим: contain, Отступ: 10%, Название: Studio Atlas, Цвет темы: #0f172a
Результат
Получен ZIP-архив с готовыми иконками, манифестом и HTML-фрагментом, который сразу можно добавить в <head> сайта.

2. Собрать набор иконок приложения из растрового логотипа

UI/UX Дизайнер
Контекст
Дизайнер готовит графику для веб-приложения, исходник логотипа доступен только в формате PNG.
Проблема
Необходимо создать иконки для домашнего экрана смартфонов (Apple Touch Icon) с темным фоном, чтобы логотип занимал максимум пространства.
Как использовать
Загрузите PNG-файл, выберите темный цвет фона, установите режим «cover» и минимальный отступ 4%.
Пример конфигурации
Цвет фона: #020617, Режим: cover, Отступ: 4%, Название: North Grid, Цвет темы: #020617
Результат
Сгенерирован полный набор иконок, оптимизированный для мобильных устройств, где логотип гармонично заполняет темный квадрат.

Проверить на примерах

xml, image, png
SVG Примеры
Примеры масштабируемой векторной графики (SVG) демонстрирующие различные возможности и техники SVG
title token svg
image
Примеры Обработки Изображений Web Python
Примеры обработки изображений Web Python используя PIL/Pillow включая чтение, сохранение, изменение размера и преобразование формата
preferred input family image
image
Примеры Обработки Изображений Android Java
Примеры обработки изображений Android Java включая чтение/сохранение, масштабирование и преобразование формата
preferred input family image
image
Примеры Обработки Изображений Android Kotlin
Примеры обработки изображений Android Kotlin включая чтение/сохранение, масштабирование и преобразование формата
preferred input family image
image

Связанные хабы

Инструменты конвертации форматов изображений и анимированного экспорта
Сравните конвертеры JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 и инструменты экспорта анимированных изображений в одном хабе.
Инструменты конвертации видео в аудио и анимационные форматы
Сравните инструменты, которые превращают видео в аудио, извлекают потоки и переводят ролики в анимированные форматы изображений, в одном хабе.
Инструменты XML для конвертации, маппинга и XPath
Подборка инструментов для конвертации XML, маппинга, объединения и извлечения через XPath в одном хабе.
Инструменты для очистки, оформления и пакетной подготовки изображений
Соберите в одном хабе инструменты для очистки изображений, обрезки, добавления полей и рамок, пакетного изменения размера и сжатия, водяных знаков и финальной визуальной подготовки.

FAQ

Какие форматы файлов поддерживаются на входе?

Вы можете загрузить векторные изображения в формате SVG, а также растровые файлы PNG, JPEG и WebP размером до 20 МБ.

Что входит в итоговый ZIP-архив?

Архив содержит файл favicon.ico, набор PNG-иконок разных размеров, Apple Touch Icon, файл site.webmanifest и текстовый файл с готовым HTML-кодом для секции head.

Зачем нужен параметр «Режим вписывания» (fitMode)?

Режим «contain» сохраняет пропорции логотипа, вписывая его в квадрат с учетом отступов, а «cover» заполняет всю область иконки, что полезно для создания сплошных фоновых плашек.

Для чего используется цвет темы (themeColor)?

Цвет темы прописывается в файле web manifest и метатегах HTML. Он указывает мобильным браузерам, в какой цвет окрашивать элементы интерфейса, например, адресную строку.

Как работает настройка отступов (paddingPercent)?

Эта настройка позволяет добавить пустое пространство вокруг логотипа (от 0 до 35%), чтобы иконка не прилипала к краям и смотрелась аккуратно на любых экранах.

Документация API

Конечная точка запроса

POST /ru/api/tools/svg-favicon-generator

Параметры запроса

Имя параметра Тип Обязательно Описание
sourceFile file (Требуется загрузка) Да -
backgroundColor color Нет -
fitMode select Нет -
paddingPercent range Нет -
siteName text Нет -
themeColor color Нет -

Параметры типа файл должны быть загружены сначала через POST /upload/svg-favicon-generator для получения filePath, затем filePath должен быть передан в соответствующее поле файла.

Формат ответа

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Файл: Файл

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-svg-favicon-generator": {
      "name": "svg-favicon-generator",
      "description": "Преобразует SVG или растровый логотип в полный набор favicon с ICO, PNG-версиями, Apple touch icon и web manifest",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=svg-favicon-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Поддерживает ссылки на файлы URL или кодирование Base64 для параметров файла.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]