untief.org

HTML5: rel="icon" (Favicon)

veröffentlicht
2012-05-23
verschlagwortet
HTML

HTML5 spezifiziert den Link-Typ icon für das link-Element. Demnach repräsentiert ein Icon die Webseite oder die Website. Entsprechend sollen User-Agents das Icon verwenden, um die Seite bzw. die Site in ihrer Benutzeroberfläche zu repräsentieren. Favicons nennt man solche Icons auch. Üblicherweise handelt es sich bei einem Favicon um eine Bilddatei, das ist aber keine Bedingung (Icons could be auditory icons, visual icons, or other kinds of icons.).

Erforderliche Attribute

Ein link-Element, das als Favicon dienen soll, muss diese beiden Attribute haben:

rel
Wert: icon (aus historischen Gründen darf man auch shortcut icon verwenden).
href
Wert: URL des Icons.
<link rel="icon" href="/favicon.png">

Optionale Attribute

Neben den globalen Attributen, kann man folgende Attribute für link verwenden:

hreflang
Wert: Sprachcode. Falls das Favicon sprachliche Informationen enthält (was eher selten der Fall sein dürfte), kann man die verwendete Sprache angeben. Falls es keine sprachlichen Informationen enthällt, kann man den Sprachcode zxx verwenden.
media
Wert: Media-Query.
sizes
Wert: Größe (in Pixeln) des Favicons. Breite mal Höhe. Trennzeichen: x oder X. Man kann mehrere Größen angeben; mit Leerzeichen trennen. Kann den Wert any haben, wenn es eine Vektorgrafik ist.
type
Wert: MIME-Typ des Icons.
<link rel="icon" href="/favicon.png" type="image/png" media="all" sizes="16x16" hreflang="zxx">

Falls mehrere link-Elemente mit rel="icon" angegeben sind

Werden mehrere Icons verlinkt, dann muss der User-Agent das geeignetste Icon anhand der Werte der Attribute type, media und sizes bestimmen. Sind mehrere Icons gleichwertig, muss der User-Agent das unterste Icon verwenden.

Falls kein link-Element mit rel="icon" angegeben ist

Wenn kein Icon verlinkt ist, dann darf der User-Agent die Datei namens favicon.ico im Rootverzeichnis des Hosts als Icon verwenden, falls vorhanden.