Favicon-Paket aus SVG oder PNG

Nein. Die Umwandlung läuft vollständig in deinem Browser. Die Datei verlässt dein Gerät nicht – es gibt keinen Server, der sie sehen könnte. Sobald die Seite geladen ist, funktioniert das Werkzeug sogar offline.

favicon.ico (16, 32 und 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), icon-192.png und icon-512.png für Android und installierbare Web-Apps, site.webmanifest mit App-Name und Farben, snippet.html mit den <link>- und <meta>-Tags – und, wenn du von einem SVG ausgegangen bist, favicon.svg für Browser, die Vektoren bevorzugen.

Entpacke alles ins Wurzelverzeichnis deiner Website, sodass /favicon.ico erreichbar ist, und füge den Inhalt von snippet.html in den <head> deiner Seiten ein. Liegen die Dateien in einem Unterordner, passe die Pfade im Schnipsel und in site.webmanifest an.

SVG, wann immer du eines hast: Jede Grösse wird aus dem Vektor gerendert und bleibt scharf, und das Paket enthält das SVG-Favicon. Ein PNG geht auch, sollte aber mindestens 512 × 512 px haben – kleinere Bilder werden vergrössert und wirken in den grossen Grössen weich. Nicht quadratische Bilder werden zentriert und transparent aufgefüllt.

iOS zeigt hinter transparenten Bereichen des Startbildschirm-Symbols Schwarz, deshalb wird apple-touch-icon.png auf die gewählte Hintergrundfarbe gelegt. Alle anderen Dateien behalten ihre Transparenz.

Der Renderer läuft in deinem Browser ohne Schriften und kann deshalb keinen Text zeichnen. Statt ein Bild zu liefern, in dem der Text stillschweigend fehlt, weisen wir Dateien mit <text> ab. Wandle den Text in deinem Editor zuerst in Pfade um (Inkscape: Pfad → Objekt in Pfad umwandeln; Illustrator: Schrift → In Pfade umwandeln) und versuche es erneut.