SVG zu Favicon

SVG zu Favicon: Alle Größen und favicon.ico auf einmal erzeugen

Websites benötigen normalerweise eine vollständige Sammlung von Icons: Browser verwenden 16 und 32, Windows-Verknüpfungen können ein Favicon.ico mit mehreren Auflösungen verwenden, iOS nutzt 180 für den Startbildschirm und PWA-Manifeste häufig 192 und 512. Jede Größe einzeln zu exportieren ist aufwendig und kann zu unterschiedlichen Abmessungen führen. Mit einer einzigen SVG-Quelldatei erzeugt dieses Tool alle Größen auf einmal und erstellt auch .ico und Referenzcode. Alles wird lokal im Browser verarbeitet und Dateien werden nicht auf den Server hochgeladen.

Zwei Eingabemethoden und sofortige Validierung

Sie können eine .svg-Datei hochladen oder den SVG-Quellcode direkt in das Textfeld einfügen, beispielsweise aus einem Designprogramm kopierten Code. Die Eingabe wird sofort geprüft: Das Tool überprüft, ob der SVG-Code gültig ist, ob ein viewBox vorhanden ist, welche Abmessungen vorliegen und ob das Bild quadratisch im Verhältnis 1:1 ist. Für Favicon wird ein 1:1-Icon empfohlen. Bei nicht quadratischen Bildern wird eine Warnung angezeigt, die Verarbeitung kann jedoch fortgesetzt werden. SVG wird als Bild geladen und gerendert; Skripte innerhalb der Datei werden nicht ausgeführt.

Größenauswahl

Die Größen sind nach Verwendungszweck gruppiert. Die gängigen Größen 16, 32, 48, 180, 192 und 512 sind standardmäßig ausgewählt. Weitere Größen sind 64, 128 und 256. Zusätzlich kann eine benutzerdefinierte Größe eingegeben werden. Die Seite bietet die drei Presets „Empfohlene Website-Icons“, „Alle“ und „Leeren“. Die Verwendung der einzelnen Größen wird ebenfalls erläutert: 16 für Browser-Tabs, 32 und 48 für Browser und Windows-Verknüpfungen, 180 für iOS-Startbildschirme, 192 und 512 für PWA-Manifeste sowie 64 und 128 für allgemeine Icons.

Hintergrund und Innenabstand

Der Standardhintergrund ist transparent und eignet sich für Icons, die bereits quadratisch sind oder über eigenen Freiraum verfügen. Wenn das Quellbild zu nah an den Rändern liegt oder auf einem dunklen Hintergrund verwendet werden soll, kann eine Füllfarbe und Hintergrundfarbe gewählt werden. Der Innenabstand wird als Prozentsatz festgelegt und bietet Schnellwerte wie 0, 5%, 10%, 15% und 20%, damit das Icon nicht am Rand der Arbeitsfläche anliegt. Alle Größen verwenden dieselben Hintergrund- und Abstandseinstellungen, damit das Erscheinungsbild einheitlich bleibt.

Ergebnisse und Downloads

Nach der Generierung werden die Ergebnisse nach Verwendungszweck gruppiert. Oben befindet sich eine Browser-Tab-ähnliche Vorschau, die das Icon in seiner tatsächlichen Größe von 16 Pixeln zeigt. Die Favicon-Gruppe listet Größen unter 180 und erklärt den Aufbau von favicon.ico. Die Website- und PWA-Gruppe listet Größen ab 180. Jede Größe zeigt eine Vorschau, die Dateigröße und eine eigene Download-Schaltfläche. Es gibt vier Downloadmethoden: einzelne Größe herunterladen, alle PNGs nacheinander herunterladen, favicon.ico mit mehreren Standardauflösungen herunterladen oder ein ZIP mit allen PNGs und favicon.ico herunterladen.

HTML-Referenzcode

Die Seite erzeugt anhand der ausgewählten Größen automatisch HTML-Referenzcode und einen Icon-Abschnitt für webmanifest. Enthalten sind Referenzen für favicon.ico, jede PNG-Größe und apple-touch-icon. Der Code kann direkt in das Projekt kopiert werden. Die Pfade im Code sind relativ zum Stammverzeichnis der Website organisiert.

Häufige Fragen und Fehlerbehandlung

Warum enthält das erzeugte ico keine 512? ICO-Container sind bei PNG-Einträgen über 256 weniger kompatibel. Deshalb schreibt das Tool automatisch nur Größen bis 256 in die ico-Datei. Die 512-PNG wird weiterhin separat bereitgestellt und die tatsächlich enthaltenen Größen werden angezeigt.
Was tun, wenn Schriftarten im SVG nicht gerendert werden? Beim Rendern eines eigenständigen SVG laden Browser keine externen Systemschriftdateien. Wandeln Sie Text im SVG stattdessen in Pfade um.
Was passiert, wenn keine Größe ausgewählt wurde? Das Tool fordert dazu auf, mindestens eine Ausgabegröße auszuwählen.
Was tun bei ungültigem SVG oder fehlgeschlagenem Rendering? Häufig sind unvollständiger Code oder ungültige Tags die Ursache. Exportieren Sie das SVG erneut aus dem Designprogramm und versuchen Sie es noch einmal.

Anwendungsfälle und Datenschutz

Geeignet zum Einrichten von Browser-Tab-Icons für Websites und Verwaltungssysteme, Startbildschirm-Icons für mobile Websites, PWA-Manifest-Icons und zur schnellen Umwandlung von Vektorlogos in vollständige Icon-Sammlungen. SVG-Rendering, PNG-Kodierung und ICO-Paketierung erfolgen vollständig lokal im Browser. Die Seite besitzt keine Upload-Schnittstelle, Dateien werden weder auf den Server hochgeladen noch gespeichert.