Über SVG zu Favicon
Zyffs SVG-zu-Favicon-Generator reicht Ihr SVG Byte für Byte als icon.svg durch und rendert die Raster-Rückfallebenen drum herum — die PNG-Größen, die .ico mit mehreren Größen, das apple-touch-Symbol und den Android-Satz — und schreibt dann die link-Tags in der Reihenfolge, in der ein Browser sie auflöst. Ein Vektorsymbol ist das eine Favicon, das wirklich auflösungsunabhängig ist, und deshalb bevorzugen aktuelle Browser es, wenn beides angeboten wird — allein reicht es aber nicht: iOS ignoriert es für Startbildschirm-Symbole, und alles Ältere fällt auf die .ico zurück. Das Rendern läuft auf Zyffs Servern und nur im Arbeitsspeicher.
So machen Sie ein SVG-Favicon
Laden Sie das SVG hoch
Es wird unverändert als icon.svg durchgereicht, was Sie hochladen, ist also genau das, was ausgeliefert wird. Wandeln Sie Text zuerst in Pfade um, wenn das SVG eine Schrift nutzt — ein Browser, der Ihr Symbol darstellt, hat keinen Zugriff auf Ihre Webschrift.
Lassen Sie die Raster-Rückfallebenen an
Sie sind aus gutem Grund voreingestellt an. Das SVG deckt aktuelle Desktop- und Android-Browser ab; die PNGs und die .ico decken alles andere ab, und iOS nutzt apple-touch-icon unabhängig davon, was das SVG sagt.
Prüfen Sie die gerasterten Vorschauen
Die PNGs werden aus Ihrem SVG in einer je Größe gewählten Auflösung gerendert. Ein Vektor mit haarfeinen Konturen oder Details von 1 px rastert bei 16 px schlecht, und genau hier sehen Sie es.
Kopieren Sie den head-Schnipsel
Der SVG-Link kommt zuerst, mit type="image/svg+xml", dann die PNG-Links mit ausdrücklichen Größen, dann die .ico. Ein Browser nimmt den ersten Typ, den er versteht, und deshalb ist die Reihenfolge nicht bloß Kosmetik.
Fügen Sie eine Dunkelmodus-Variante hinzu, wenn Sie eine wollen
Die lebt in Ihrem eigenen SVG, nicht im Tag: Eine prefers-color-scheme-Media-Query im style-Block des SVG schaltet die Füllung um. Zyff reicht die Datei unangetastet durch, was Sie dort hineinschreiben, wird also ausgeliefert.
Was SVG zu Favicon kann
SVG unverändert durchgereicht
Byte für Byte, als icon.svg. Nichts wird neu serialisiert oder minimiert, kein Optimierer kann also still verändern, wie Ihre Marke dargestellt wird.
Rückfallebenen drum herum erzeugt
PNG-Größen, eine .ico mit mehreren Größen, apple-touch und der Android-Satz, alle aus demselben SVG in der Auflösung gerastert, die jede Größe braucht.
link-Tags in Auflösungsreihenfolge
Zuerst das SVG mit seinem MIME-Typ, dann die PNGs mit Größenangabe, dann die .ico. Ein Browser hält beim ersten Typ an, den er lesen kann.
Transparenz bleibt erhalten
Voreingestellt an, denn der ganze Vorteil eines Vektorsymbols ist, sauber auf jeder Browser-Oberfläche zu sitzen.
Der Dunkelmodus bleibt Ihrer
Eine prefers-color-scheme-Query in Ihrem SVG übersteht das Durchreichen. Nichts hier schreibt Ihre Datei um, um eine dunkle Variante zu erraten.
At a glance
| Umgang mit dem SVG | Byte für Byte als icon.svg durchgereicht |
|---|---|
| Gerasterte Rückfallebenen | PNG 16-512 px, .ico mit mehreren Größen, apple-touch 180, Android 192 und 512 |
| Link-Reihenfolge im Schnipsel | icon.svg, dann PNGs mit Größenangabe, dann favicon.ico |
| Transparenz | Standardmäßig erhalten |
| Akzeptierte Eingabe | SVG (auch PNG, JPG, WebP, AVIF — ohne das Durchreichen) bis zu 25 MB |
| Manifest | site.webmanifest, das die Android-Größen referenziert |
Frequently asked questions
Kann ein Favicon ein SVG sein?
Ja, und aktuelle Browser bevorzugen es, wenn eine Seite sowohl ein SVG als auch PNGs anbietet. Es wird mit <link rel="icon" href="/icon.svg" type="image/svg+xml"> deklariert, und das type-Attribut ist das, was einen Browser es überspringen lässt, wenn er keines darstellen kann. Es ersetzt die anderen Dateien nicht: iOS nutzt für Startbildschirm-Symbole ohnehin apple-touch-icon, und ältere Browser brauchen die .ico.
Brauche ich noch PNG-Favicons, wenn ich ein SVG habe?
Ja. Das SVG deckt aktuelle Desktop- und Android-Browser ab, aber apple-touch-icon ist per Spezifikation ein PNG, und /favicon.ico wird weiterhin aus Ihrem Wurzelverzeichnis angefragt, ohne deklariert zu sein. Der praktische Satz ist das SVG plus ein apple-touch mit 180 px, 192 und 512 für Android und eine kleine .ico.
Wie mache ich ein Favicon für den Dunkelmodus?
Setzen Sie eine prefers-color-scheme-Media-Query in das SVG selbst, in einen eigenen <style>-Block, der Füllung oder Kontur umschaltet. Das Tag ändert sich nicht. Zyff reicht Ihr SVG unverändert durch, die Query wird also genau so ausgeliefert, wie Sie sie geschrieben haben — testen Sie sie aber, denn ein Browser, der ein Favicon darstellt, wendet nicht immer denselben Farbschema-Kontext an wie auf die Seite.
Warum sieht mein SVG-Favicon bei 16 px falsch aus?
Weil Vektorgenauigkeit ein Raster von 16 Pixeln nicht übersteht. Haarfeine Konturen verschwinden, kleine Binnenformen laufen zu, und Details verschmelzen. Zeichnen Sie für das Symbol eine bewusst vereinfachte Fassung, statt Ihr volles Logo wiederzuverwenden, und prüfen Sie hier die gerasterte 16-px-Vorschau, bevor Sie ausliefern.
Soll mein SVG eine Schrift verwenden?
Nein. Wandeln Sie Text vor dem Hochladen in Pfade um. Ein Browser, der Ihr Favicon darstellt, hat keinen Zugriff auf Ihre Webschrift, ein textbasiertes SVG fällt also auf irgendeine Schrift zurück, die der Renderer zufällig hat, oder auf gar keine. Aus demselben Grund ist Zyffs eigene Wortmarke ein Pfad und keine Schrift.
Wird das SVG in irgendeiner Weise verändert?
Nein — es wird als genau die Bytes gespeichert und ausgeliefert, die Sie hochgeladen haben. Die PNG- und ICO-Rückfallebenen werden daraus gerendert, aber die Vektordatei selbst wird durchgereicht, nichts hier kann also verändern, wie Ihre Marke gezeichnet wird.