SVG als Favicon

09. Jan. 2024

Webseiten nutzen oft ein einschlägiges Bild oder ihr Logo, um als Tab in der Tableiste erkennbar zu bleiben. Dieses Bild oder Logo wird auch als das favicon (favorite icon für bevorzugtes Icon) genannt. Insbesondere wenn die Tableiste so voll ist, dass die Titel der einzelnen Webseiten nicht mehr angezeigt werden können, ist es wichtig, das richtige favicon einzusetzen.

Ein favicon wird mit der folgenden HTML-Syntax in eine Webseite eingebettet:

<link rel="icon" type="image/png" href="/images/favicon.png">

Hierbei ist sollte das Bild 32x32 Pixel groß und ein PNG-Bild sein. Da ein so kleines Bild auf modernen Bildschirmen qualitativ minderwertig aussehen kann, lohnt es sich, skalierbare Bilder einzusetzen.

Icon

Ein SVG-Bild könnte mit dem Typenattribut type="image/svg+xml" als favicon angegeben werden. Bei modernen Browsern ist die nicht mehr nötig, sodass die Syntax kurz und knapp ist, und ein perfek skalierbares Bild als favicon einbettet:

<link rel="icon" href="/images/favicon.svg">

Mask Icon

Safari benötigt ein maskiertes Icon also ein mask-icon. Dies ist auch ein SVG-Bild, das allerdings eine einzige Farbe aufweisen und auf transparentem Hintergrund gezeichnet werden muss. Safari fügt dann die Farbe über das Farbattribut color="#000000" hinzu:

<link rel="mask-icon" href="/images/favicon-mask.svg" color="#000000">

Touch Icon

Für iOS-Geräte wird ein Bild mit einer Größe von 180x180 Pixeln als apple-touch-icon eingebettet. Das Größenattribt size ist in der HTML-Syntax nicht nötig:

<link rel="apple-touch-icon" href="/images/favicon-apple.png">

Leider kann hier kein SVG-Bild verwendet werden. Allerdings ist die Größe bereits für die Anzeige auf iOS-Geräten optimiert.

Manifest

Für Android- und Google-Geräte wird das favicon über eine Datei namens manifest.json eingebettet:

<link rel="manifest" href="manifest.json">

Für Chrome unter Andriod muss zudem auch ein Meta-Tag namens theme-color angegeben werden:

<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="manifest.json">

Die manifest.json Datei enthält dann die folgenden Angaben:

{
    "name": "Starter",
    "short_name": "Starter",
    "icons": [{
        "src": "favicon-google.png",
        "sizes": "512x512"
    }],
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "display": "fullscreen"
}

Diese Angaben sind notwendig, um den Lighthouse-Test zu bestehen.

Dark Mode

Neben der perfekten Skalierbarkeit ist ein weiterer Vorteil eines SVG-Bildes, dass man die Anzeigefarbe abhängig vom Modus des Browsers wechseln kann. Hierfür bedient man sich der CSS-Mediaabfrage (bzw. media query auf Englisch) prefers-color-scheme, die die Farbe des favicon automatisch zwischen dem hellen und dunklen Modus wechselt. Diese Mediaabfrage wird als <style> in die SVG-Datei geschrieben:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
    <style>
        path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path {
                fill: #fff;
            }
        }
    </style>
    <path d="M.5 0A.5.5 90 ... 2.5852Z" />
</svg>

Zusammenfassung

Der vollständige Code, der im <head> der Webseite eingebettet werden sollte, um für alle Greäte ein optimiertes favicon anzuzegen, sieht dann wie folgt aus:

<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="favicon-mask.svg" color="#000000">
<link rel="apple-touch-icon" href="favicon-apple.png">
<link rel="manifest" href="manifest.json">