Favicon-Größe: Format und Maße der kleinen Bilder

Unterschiedliche Browser benötigen verschiedene Favicon-Größen. Neben dem Favicon-Format 16 x 16 beziehungsweise 32 x 32 Pixel sind daher einige weitere Varianten empfehlenswert.

Das Favicon (Kofferwort aus „favorite“ und „icon“) ist eine kleine Grafik, die über der Adressleiste in den Tabs angezeigt wird und es so einfacher macht, eine Website wiederzufinden. Bei Favicons kann es sich um das Logo einer Marke oder Firma handeln, da es allerdings enge Grenzen bei der Größe eines Favicons gibt, werden häufig nur ein Teilbereich oder eine Abwandlung des Logos verwendet. Auf mobilen Endgeräten werden die kleinen Grafiken auch für Touch-Icons genutzt. Alles Wissenswerte zum Thema finden Sie ausführlich in unserem Ratgeber „Was ist ein Favicon“.

Es ist für jede Website empfehlenswert, ein Favicon einzubinden. Die jeweilige Seite wird so dadurch deutlich besser gefunden, wirkt professioneller und schneidet unter SEO-Gesichtspunkten besser ab. Bei der Größe des Website-Icons gibt es allerdings sehr strenge Vorschriften. Für die meisten Browser sind die Maße 16 x 16 beziehungsweise 32 x 32 Pixel passend. Sie sollten daher Ihr Favicon in diesem Format anlegen. Die größere Favicon-Größe ist für hochauflösende Bildschirme empfehlenswert, das kleinere Format ist für zahlreiche andere Verwendungszwecke geläufig. Am einfachsten ist es daher, wenn Sie beide Formate in den Code einbinden.

Zusätzlich zu diesen beiden Größen für Favicons gibt es Formate, die ebenfalls sinnvoll sind und am besten zusätzlich eingepflegt werden sollten. Besonders wichtig ist das für Google, und zwar in doppelter Hinsicht. Suchergebnisse werden auf der Plattform mit einem Favicon ausgestattet, dessen Größe bei 48 x 48 Pixeln liegen sollte. Möglich wäre alternativ ein Format, das ein Vielfaches dieser Maße beträgt. Auch für Android sind diese Abmessungen wichtig. Das Betriebssystem nutzt Favicons dieser Größe, um Shortcuts auf dem Startbildschirm zu platzieren. Für Devices mit einer hohen Bildschirmauflösung ist außerdem das Favicon-Format 192 x 192 Pixel nützlich.

Noch ein wenig komplizierter wird es beim Konkurrenten Apple. Je nach Endgerät sind unterschiedliche Favicon-Größen optimal. Für das iPhone wird das Format 60 x 60 Pixel genutzt. Möglich ist allerdings auch eine deutlich höhere Auflösung, solange diese ein Vielfaches dieses Wertes ist. Das ermöglicht die optimale Darstellung bei hoher Auflösung und wird für andere Zwecke runtergerechnet. Ein Bild mit den Maßen 180 x 180 Pixel ist daher eine gute Wahl. Icons auf dem iPad werden hingegen mit 83,5 x 83,5 Pixeln abgebildet. Für moderne Retina und Super Retina Displays bietet sich das Favicon-Format 167 x 167 Pixel an.

Für einige Browser und Endgeräte gelten weitere Ausnahmen. Gerade bei älteren Devices sind daher theoretisch weitere Abmessungen nötig, damit die Größe des Browser-Icons stimmt. Hier finden Sie die gängigsten Maße noch einmal übersichtlich aufgelistet:

Sie können verschiedene Grafikformate für Ihr Favicon verwenden. Besonders häufig wird allerdings das Windows-Icon-Format .ico genutzt, welches von zahlreichen Browsern unterstützt wird. Insbesondere für größere Grafiken, die zum Beispiel auch als Touch-Icons fungieren können, ist ein Favicon im Format .png gut geeignet. Weitere mögliche Formate sind .svg oder .gif.

Es gibt also einige Punkte zu beachten, wenn Sie nach der richtigen Favicon-Größe für Ihre Website suchen. Aus diesem Grund führt der einfachste Weg über einen entsprechenden Generator. Dieser begleitet Sie durch alle Arbeitsschritte und sorgt dafür, dass das Format des Favicons für alle relevanten Browser passt.

Wie Sie das Favicon auf Ihrer Website einfügen, erfahren Sie in folgenden Artikeln:

• Favicon in WordPress einfügen
• Favicon mit HTML einbinden