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.

Favicon: Wofür wird die Grafik benötigt?

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

Welche Favicon-Größe ist empfehlenswert?

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.

Tipp

Im Digital Guide finden Sie viele Tipps rund um Ihr wichtigstes Erkennungszeichen: Hier beantworten wir die Frage, was ein gutes Logo auszeichnet und stellen Ihnen die wichtigsten Programme für die Logo-Gestaltung vor. Auch wenn Sie einen Styleguide für Ihre Website oder ein Logo für Ihr Startup erstellen möchten, werden Sie hier fündig.

Die Größe des Favicons für Google

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.

Die Favicon-Größe für Apple-Devices

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.

Die wichtigsten Favicon-Größen auf einen Blick

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:

Browser oder Device Größe
Die meisten modernen Browser 16 x 16 oder 32 x 32 Pixel
Google und Android 48 x 48 oder 192 x 192 Pixel
iPhone (neuere Modelle) 60 x 60 oder 180 x 180 Pixel
iPad (neuere Modelle) 83,5 x 83,5 oder 167 x 167 Pixel
Chrome Webstore 128 x 128 Pixel
Google TV 96 x 96 Pixel
Internet Explorer 9 24 x 24 Pixel
iPad Startbildschirm 72 x 72 Pixel
iPhone (ältere Modelle) und iPod Touch 57 x 57 Pixel
iPhone 4 Startbildschirm 114 x 114 Pixel
Opera Kurzwahl 195 x 195 Pixel

Dateiendungen: Welche Favicon-Formate sind möglich?

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.

Favicon erstellen mit einem Generator

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:

Tipp

Das optimale Favicon mit wenigen Klicks: Mit dem Favicon Generator von IONOS erstellen Sie kostenlos das perfekte Icon für Ihren Online-Auftritt. So profitieren Sie von allen Vorteilen, die die kleinen Bilder Ihnen bieten.