Das rel="icon"-Link-Tag erklärt
Das <link rel="icon">-Tag im <head> einer Seite sagt dem Browser, welche Datei als Favicon zu verwenden ist. href verweist auf das Bild, type gibt den MIME-Typ an, und sizes listet die Pixelmaße, die die Datei enthält, damit der Browser die beste Passform wählen kann. Du kannst mehrere Icon-Link-Tags einbinden (eines pro Größe oder Format), und der Browser wählt das geeignetste.
Die vier Dinge, die das Tag trägt
rel="icon" deklariert die Beziehung: Diese Datei ist ein Icon für das Dokument. href ist der Pfad zum Bild. type ist der MIME-Typ (image/x-icon, image/png, image/svg+xml), der einem Browser erlaubt, ein Format zu überspringen, das er nicht nutzen kann. sizes listet die Maße, die die Datei enthält, wie "32x32", oder "any" für ein skalierbares SVG.
Der Browser liest jeden Icon-Link im Head und wählt dann den, der am besten zur gezeichneten Oberfläche passt: dem Tab, einem Lesezeichen, einer größeren Kachel. Deshalb trägt ein realer Head mehrere dieser Tags statt eines, und deshalb gehören sie alle in den Head, vor den Body.
Ein moderner Icon-Link-Satz
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Fünf Tags, jedes auf einen anderen Consumer ausgerichtet. Der Browser ignoriert die, die er nicht versteht, und wählt das beste vom Rest.
Was jedes Attribut tut
| Attribut | Zweck |
|---|---|
| rel | Die Beziehung: "icon" für ein Favicon, "apple-touch-icon" für iOS |
| href | Der Pfad zur Bilddatei |
| type | Der MIME-Typ, damit ein Browser Formate überspringen kann, die er nicht rendern kann |
| sizes | Die Maße, die die Datei enthält, z. B. "32x32", oder "any" für SVG |
FAQ zu rel="icon"
Brauche ich das type-Attribut an einem Icon-Link?
Es ist optional, aber nützlich. type lässt den Browser ein Format überspringen, das er nicht nutzen kann, ohne es erst herunterzuladen. Lohnt sich an PNG- und SVG-Links und ist überall sonst harmlos.
Kann ich mehr als ein Icon-Link-Tag haben?
Ja, und in der Regel solltest du das. Mehrere Größen und Formate zu deklarieren lässt jede Oberfläche die nächstliegende Passform wählen, statt ein großes Bild für den Tab herunterzurechnen und für den Home-Bildschirm hochzurechnen.
Wohin gehört das Link-Tag?
In den <head> des Dokuments. Der Browser fragt das Favicon beim Parsen des Head an, sodass ein Tag im Body zu spät kommt, um beim ersten Laden verwendet zu werden.