SVG-zu-Favicon-Generator

Lade ein SVG-Logo hoch und erhalte alles, was eine moderne Website braucht: eine echte favicon.ico mit mehreren Auflösungen, PNG-Icons in jeder Größe, die Browser und Smartphones tatsächlich verlangen, und die HTML-<link>-Tags zum Einfügen in dein <head>. Das gesamte Rendering läuft in deinem Browser — das SVG verlässt nie dein Gerät.

Was ist dieses Tool?

Eine favicon.ico ist nicht nur ein kleines Bild — es ist ein Containerformat, das mehrere Größen desselben Icons in einer Datei speichern kann, damit Browser, Taskleiste oder Lesezeichenleiste sich die Auflösung heraussuchen, die an der jeweiligen Stelle am schärfsten wirkt. Eine PNG-Datei einfach in favicon.ico umzubenennen, erreicht das nicht: Es bleibt ein einzelnes Bild mit der falschen Dateiendung. Manche Browser tolerieren das, aber viele Tools, Crawler und ältere Browser, die die rohen Bytes lesen, erwarten die echte ICO-Containerstruktur und scheitern sonst oder zeigen ein leeres Icon.

Dieses Tool baut einen echten ICO-Container: Es rendert dein SVG in 16×16, 32×32 und 48×48, kodiert jede Größe intern als PNG und packt alle drei in eine gültige favicon.ico — im selben „PNG-in-ICO“-Format, das jeder Browser und jedes Betriebssystem seit Windows Vista unterstützt. Dazu bekommst du separate PNG-Dateien in 180×180 (die Größe, die iOS verwendet, wenn jemand deine Website zum Home-Bildschirm hinzufügt) und in 192×192 / 512×512 (die Größen, die Android und PWA-Installationsaufforderungen aus deinem Web-App-Manifest ziehen).

Warum sollte man es nutzen?

Erzeugt eine wirklich gültige favicon.ico mit mehreren Auflösungen, kein umbenanntes PNG.
Deckt in einem Durchgang alle Icon-Größen ab, die ein echtes Deployment braucht: 16, 32, 180, 192, 512px.
Fertiger HTML-Code für den <head> — kein Rätselraten bei rel/sizes/type.
Nicht quadratische SVGs werden auf einem transparenten Quadrat zentriert statt verzerrt.
Alles läuft lokal in deinem Browser; das SVG wird nie hochgeladen.

Anleitung

Klicke auf das Feld oder ziehe deine SVG-Logodatei hinein.
Das Tool rendert automatisch alle Favicon-Größen — es gibt nichts einzustellen.
Lade favicon.ico für dein Wurzelverzeichnis herunter, dazu die einzelnen PNG-Icons.
Kopiere den HTML-Codeblock und füge ihn in den <head> deiner Seite ein.

Beispiel

Eingabe

logo.svg — ein Firmenlogo, 3 KB Vektordatei

Ausgabe

favicon.ico (16/32/48px kombiniert), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.png

Ein SVG rein, alle Icon-Dateien für ein echtes Deployment raus.

Welche Icon-Größe wird wo verwendet

Datei	Größe	Verwendet für
favicon.ico	16/32/48px (kombiniert)	Browser-Tab, Lesezeichenleiste, Taskleiste
favicon-16.png / favicon-32.png	16×16 / 32×32	Fallback für Browser, die PNG-Favicons bevorzugen
apple-touch-icon.png	180×180	iOS-Home-Bildschirm-Icon beim Hinzufügen der Website
icon-192.png	192×192	Android-Home-Bildschirm-Icon, Web-App-Manifest
icon-512.png	512×512	PWA-Installationsaufforderung, Android-Splashscreen-Icon

Warum die SVG-Quelle wichtig ist

Da SVG Formen als Mathematik statt als Pixel speichert, geht das Rendering bei 16px und bei 512px jeweils von exakt denselben Pfaddaten aus — es gibt keine Vergrößerungsartefakte am großen Ende und keine erzwungenen Pixel-Snapping-Kompromisse am kleinen Ende. Wenn du nur ein PNG-Logo hast, kann dieses Tool nicht helfen; konvertiere oder erstelle das Logo zuerst als SVG, denn ein kleines PNG auf 512px hochzuskalieren würde nur ein unscharfes Ergebnis liefern.

→ SVG-Konverter

Häufig gestellte Fragen

Warum nicht einfach ein PNG in favicon.ico umbenennen?

Eine .ico-Datei hat ihr eigenes binäres Containerformat (ein ICONDIR-Header, der angibt, wie viele Bilder enthalten sind, gefolgt von einem Verzeichniseintrag pro Bild) — ein in .ico umbenanntes PNG bleibt innen nur ein PNG mit falscher Endung. Die meisten modernen Browser sind nachsichtig und zeigen es trotzdem an, aber dieses Tool baut einen echten ICO-Container mit drei tatsächlichen Auflösungen — genau dafür wurde das Format entworfen, und genau das erwarten strengere Reader.

Warum brauche ich PNG-Icons, wenn ich schon favicon.ico habe?

favicon.ico deckt nur den klassischen Browser-Tab-/Lesezeichen-Fall ab. Das 180×180-PNG nutzt iOS, wenn jemand deine Website zum Home-Bildschirm hinzufügt (apple-touch-icon), und die 192×192-/512×512-PNGs holen sich Android und PWA-Installationsaufforderungen aus deinem Web-App-Manifest. Ohne sie fällt das Icon auf dem Home-Bildschirm eines Handys auf einen generischen Screenshot oder ein leeres Quadrat zurück.

Mein Logo ist nicht quadratisch — was passiert damit?

Es wird bei jeder Zielgröße auf einem transparenten Quadrat zentriert statt gestreckt, sodass ein breites oder hohes Logo seine korrekten Proportionen behält, statt in ein Quadrat gepresst zu werden.

Wo lege ich die heruntergeladenen Dateien ab?

Lege favicon.ico, apple-touch-icon.png, icon-192.png und icon-512.png im Stammverzeichnis deiner Website ab (neben index.html) und füge dann die generierten <link>-Tags in den <head> deiner Seite ein.

Wird mein SVG irgendwohin hochgeladen?

Nein. Das SVG wird auf lokalen <canvas>-Elementen gerendert, und die ICO-/PNG-Dateien werden in deinem Browser zusammengesetzt. Es wird nichts an einen Server gesendet.