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">
Um ältere Browser weiter zu unterstützen, sollte man weiterhin eine Datei namens favicon.ico
im Root-Ordner der Webseite speichern.