---
title: 'SVG als Favicon'
url: 'https://gerfficient.com/de/home/svg-favicons'
markdown: 'https://gerfficient.com/de/home/svg-favicons.md'
lang: de
date: '2024-01-09'
description: '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 a…'
---

# 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.

![favicon-example](https://gerfficient.com/user/pages/home/svg-favicons/favicon-example.png "favicon-example")

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

```html
<link rel="icon" type="image/png" href="https://gerfficient.com/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:

```html
<link rel="icon" href="https://gerfficient.com/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:

```html
<link rel="mask-icon" href="https://gerfficient.com/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:

```html
<link rel="apple-touch-icon" href="https://gerfficient.com/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:

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

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

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

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

```json
{
    "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](https://developers.google.com/web/tools/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:

```xml
<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:

```html
<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.

---

## Navigation

- Parent: [Home](https://gerfficient.com/de/index.md)
- Previous: [IPMI - Hardwareverwaltung aus der Ferne](https://gerfficient.com/de/home/ipmi.md)
- Next: [Wie langsam ist MATLAB wirklich?](https://gerfficient.com/de/home/how-slow-is-matlab-really.md)