Haben Sie schon von Favicons aus SVG gehört? Wenn Sie regelmäßiger Leser von CSS-Tricks sind, wahrscheinlich schon. Aber nutzt Ihre Website tatsächlich eines?
Die Aufgabe ist nicht so trivial, wie man vielleicht denkt. Wie wir in diesem Artikel sehen werden, erfordert die Erstellung eines nützlichen SVG-Favicons die manuelle Bearbeitung einer SVG-Datei, was viele von uns zu vermeiden versuchen oder womit wir uns unwohl fühlen. Außerdem sprechen wir hier über ein *Favicon*. Wir können Stunden damit verbringen, mit einem brandneuen CSS-Framework herumzuspielen. Aber ein Favicon? Es fühlt sich manchmal zu klein an, um unsere Zeit wert zu sein.
Dieser Artikel handelt von der Erstellung eines SVG-Favicons – *wirklich*. Wenn Sie vor Ihrem Laptop sitzen, halten Sie die Vektordatei eines Logos bereit. Am Ende Ihrer (aktiven!) Lektüre wird Ihr SVG-Favicon bereit sein zu glänzen.
Warum überhaupt ein SVG-Favicon?
Wir sind hier für das "Wie", aber es lohnt sich nachzudenken: Wofür ist ein SVG-Favicon überhaupt gut? Wir haben bereits andere Dateitypen, die das erledigen, richtig?
SVG ist ein Vektorformat. Als solches hat es wertvolle Vorteile gegenüber Rasterformaten, einschließlich derer, die typischerweise für Favicons verwendet werden, wie PNG. SVGs skalieren und sind oft kompakter als ihre binären Verwandten, weil sie eben nur Code sind! Alles wird in Zahlen und Buchstaben gezeichnet!
Das sind gute Nachrichten, aber wie hilft uns das bei unserem Favicon? Desktop-Favicons sind klein, maximal 64x64 Pixel. Und Sie können Ihre Icons in mehreren Auflösungen liefern. Skalierbarkeit ist eine Funktion, die wir hier nicht wirklich brauchen.
Die Dateigröße ist eine weitere Quelle der Enttäuschung. Während SVG einen klaren Vorteil gegenüber einer hochauflösenden PNG-Datei hat, kehrt sich das Blatt bei niedriger Auflösung. Es ist üblich, dass ein 48x48 Pixel großes PNG-Favicon eine kleinere Dateigröße ergibt als sein SVG-Äquivalent.
Dennoch haben wir einen guten Grund, dem SVG-Favicon Aufmerksamkeit zu schenken: Unterstützung für den Dunkelmodus.
Der Dunkelmodus hat in letzter Zeit viel Aufmerksamkeit erhalten. Vielleicht haben Sie sogar den Dunkelmodus für Ihre eigenen Websites implementiert. Was bedeutet das für das Favicon? Es bedeutet die Möglichkeit, verschiedene Icons anzuzeigen, je nach Helligkeit des Hintergrunds des Browser-Tabs.
Wir werden ein solches Icon vorbereiten.
Wie man ein SVG-Favicon erstellt (in der Theorie)
Die Unterstützung des Dunkelmodus für ein SVG-Favicon beruht auf einem CSS-Trick (10 Punkte für Gryffindor), nämlich dass wir ein `