SVG-Favicon-Generator

Erzeugt aus einem SVG- oder Rasterlogo ein komplettes Favicon-Paket mit ICO, PNG-Varianten, Apple-Touch-Icon und Web-Manifest

Beispielergebnisse

2 Beispiele

Standard-Favicon-Paket aus SVG erzeugen

Erstellt ICO, PNG, Apple-Touch-Icon, Manifest und ein direkt einsetzbares HTML-Snippet aus einem Vektorlogo

svg-favicon-generator-example1.zip Datei anzeigen
Eingabeparameter anzeigen
{ "sourceFile": "/public/samples/svg/01-basic-shapes.svg", "backgroundColor": "#ffffff", "fitMode": "contain", "paddingPercent": 10, "siteName": "Studio Atlas", "themeColor": "#0f172a" }

App-Icon-Set aus einem Rasterlogo erstellen

Verwendet Cover-Anpassung und dunkles Theme, um aus einer PNG-Quelle ein komplettes Favicon-Paket zu erstellen

svg-favicon-generator-example2.zip Datei anzeigen
Eingabeparameter anzeigen
{ "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

Wichtige Fakten

Kategorie
Bilder, Audio & Video
Eingabetypen
file, color, select, range, text
Ausgabetyp
file
Sample-Abdeckung
4
API verfügbar
Yes

Überblick

Der SVG-Favicon-Generator wandelt Ihr Logo im SVG-, PNG-, JPEG- oder WEBP-Format in ein komplettes Favicon-Paket um. Das Ergebnis enthält alle gängigen Dateiformate wie ICO, PNG in verschiedenen Auflösungen, Apple-Touch-Icon sowie eine site.webmanifest-Datei für Progressive Web Apps.

Wann verwenden

  • •Bei der Erstellung einer neuen Website, die ein vollständiges Favicon-Set für alle Browser und Geräte benötigt
  • •Beim Rebranding oder Redesign, um alle Icon-Varianten konsistent zu aktualisieren
  • •Bei der Entwicklung von Progressive Web Apps, die ein Web-Manifest und plattformspezifische Icons erfordern

So funktioniert es

  • •Laden Sie Ihre Quelldatei (SVG, PNG, JPEG oder WEBP, maximal 20 MB) hoch
  • •Passen Sie Hintergrundfarbe, Anpassungsmodus (Contain oder Cover), Innenabstand, Seitennamen und Themenfarbe an
  • •Das Tool generiert automatisch ICO-Dateien, PNG-Varianten in Standardgrößen, Apple-Touch-Icons und das Web-Manifest
  • •Laden Sie das ZIP-Paket mit allen Dateien und einem fertigen HTML-Snippet für die Integration herunter

Anwendungsfälle

Website-Relaunch mit vollständigem Cross-Browser-Favicon-Set
Erstellung von App-Icons für Progressive Web Apps mit Manifest-Unterstützung
Markenpflege durch konsistente Icon-Darstellung auf allen Endgeräten

Beispiele

1. Corporate Favicon-Set für Website-Launch

Webdesignerin
Hintergrund
Für den Launch einer neuen Unternehmenswebsite muss ein vollständiges Favicon-Paket erstellt werden, das in allen Browsern und auf mobilen Geräten korrekt angezeigt wird.
Problem
Manuelle Erstellung aller erforderlichen Dateiformate und Größen ist zeitaufwändig und fehleranfällig.
Verwendung
SVG-Logo hochladen, Hintergrundfarbe auf Weiß setzen, Anpassungsmodus 'Contain' mit 10% Innenabstand wählen und Themenfarbe definieren.
Beispielkonfiguration
{
  "backgroundColor": "#ffffff",
  "fitMode": "contain",
  "paddingPercent": 10,
  "themeColor": "#0f172a",
  "siteName": "Studio Atlas"
}
Ergebnis
Fertiges ZIP-Paket mit ICO, PNG-Varianten, Apple-Touch-Icon und HTML-Code-Snippet für direkte Integration in den Website-Header.

2. Dark-Mode PWA Icon-Package

Frontend-Entwickler
Hintergrund
Bei der Entwicklung einer Progressive Web App müssen Icons für die Installation auf dem Homescreen und für die Browser-Oberfläche bereitgestellt werden.
Problem
Das vorhandene Rasterlogo muss in ein komplettes Icon-Set mit dunklem Theme umgewandelt werden, das alle PWA-Anforderungen erfüllt.
Verwendung
PNG-Logo hochladen, dunkle Hintergrundfarbe (#020617) wählen, Modus 'Cover' mit minimalem Innenabstand (4%) für maximale Ausnutzung des Bildraums.
Beispielkonfiguration
{
  "backgroundColor": "#020617",
  "fitMode": "cover",
  "paddingPercent": 4,
  "themeColor": "#020617",
  "siteName": "North Grid"
}
Ergebnis
Optimiertes Icon-Set mit Web-Manifest für nahtlose PWA-Installation und konsistente Darstellung im Dark Mode.

Mit Samples testen

xml, image, png
SVG Beispiele
Beispiele für skalierbare Vektorgrafiken (SVG), die verschiedene SVG-Funktionen und -Techniken demonstrieren
title token svg
image
Web Python Bildverarbeitung Beispiele
Web Python Bildverarbeitungsbeispiele mit PIL/Pillow einschließlich Lesen, Speichern, Skalieren und Formatkonvertierung
preferred input family image
image
Android Java Bildverarbeitungsbeispiele
Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung
preferred input family image
image
Android Kotlin Bildverarbeitungsbeispiele
Android Kotlin Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung
preferred input family image
image

Verwandte Hubs

Tools fur Bildformat-Konvertierung und animierten Export
Vergleiche Bildkonverter fur JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 und animationsgeeignete Exporte in einem Hub.
Tools fur Video-zu-Audio- und Animationskonvertierung
Vergleiche Werkzeuge, die Video in Audio umwandeln, Streams extrahieren und zwischen Kurzvideo- und animierten Bildformaten konvertieren, in einem Hub.
XML-Werkzeuge fur Konvertierung, Mapping und XPath
Gebundelte Werkzeuge fur XML-Konvertierung, Mapping, Zusammenfuhrung und XPath-Extraktion in einem Hub.
Werkzeuge fur Bildbereinigung, Rahmen und Batch-Vorbereitung
Bunde Bildbereinigung, Beschneiden, Padding, Rahmen, Batch-Resize/Kompression, Wasserzeichen und visuelle Veredelung in einem Hub fur Asset-Vorbereitung.

FAQ

Welche Eingabeformate werden unterstützt?

SVG, PNG, JPEG und WEBP-Dateien bis zu einer Größe von 20 MB.

Was ist der Unterschied zwischen Contain und Cover?

Contain skaliert das Logo vollständig sichtbar mit Abstand zum Rand, Cover füllt den gesamten Raum aus und schneidet bei Bedarf zu.

Welche Ausgabedateien enthält das Paket?

Eine ICO-Datei, PNGs in gängigen Größen (16×16 bis 512×512), Apple-Touch-Icon und eine site.webmanifest-Datei.

Kann ich einen transparenten Hintergrund verwenden?

Ja, wählen Sie eine transparente Hintergrundfarbe oder passen Sie die Einstellungen an, wenn Ihre Quelldatei Transparenz unterstützt.

Gibt es Einschränkungen bei der Quelldatei?

Die maximale Dateigröße beträgt 20 MB. Für beste Ergebnisse eignen sich hochauflösende SVG- oder PNG-Dateien.

API-Dokumentation

Request-Endpunkt

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

Request-Parameter

Parameter-Name Typ Erforderlich Beschreibung
sourceFile file (Upload erforderlich) Ja -
backgroundColor color Nein -
fitMode select Nein -
paddingPercent range Nein -
siteName text Nein -
themeColor color Nein -

Dateitypparameter müssen erst über POST /upload/svg-favicon-generator hochgeladen werden, um filePath zu erhalten, dann filePath an das entsprechende Dateifeld übergeben.

Antwortformat

{
  "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)"
}
Datei: Datei

MCP-Dokumentation

Fügen Sie dieses Tool zu Ihrer MCP-Server-Konfiguration hinzu: 

{
  "mcpServers": {
    "elysiatools-svg-favicon-generator": {
      "name": "svg-favicon-generator",
      "description": "Erzeugt aus einem SVG- oder Rasterlogo ein komplettes Favicon-Paket mit ICO, PNG-Varianten, Apple-Touch-Icon und Web-Manifest",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=svg-favicon-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Sie können mehrere Tools verketten, z.B.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, maximal 20 Tools.

Unterstützt URL-Dateilinks oder Base64-Codierung für Dateiparameter.

Wenn Sie auf Probleme stoßen, kontaktieren Sie uns bitte bei [email protected]