Moderne Favicons müssen in mehreren Größen und Formaten vorliegen – von 16×16 px für Browser bis 512×512 px für PWAs. Dabei ersetzen PNG und SVG zunehmend das alte ICO-Format, definiert in der manifest.json für Web-Apps.

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

Ein Favicon (Kof­fer­wort aus „favorite“ und „icon“) ist eine kleine Grafik, die über der Adress­leis­te in den Browser-Tabs angezeigt wird. Es ist für jede Website emp­feh­lens­wert, ein Favicon ein­zu­bin­den. Es trägt zum Wie­der­erken­nungs­wert einer Website bei, verleiht ihr ein pro­fes­sio­nel­les Er­schei­nungs­bild und lässt sie unter SEO-Ge­sichts­punk­ten besser ab­schnei­den.

Bei Favicons kann es sich um das Logo einer Marke oder Firma handeln, da es al­ler­dings enge Grenzen bei der Größe eines Favicons gibt, werden häufig nur ein Teil­be­reich oder eine Ab­wand­lung des Logos verwendet. Auf mobilen End­ge­rä­ten werden die kleinen Grafiken auch für Touch-Icons genutzt.

Welche Favicon-Größe ist emp­feh­lens­wert?

Un­ter­schied­li­che Browser und Geräte verwenden un­ter­schied­li­che Favicon-Größen. Stan­dard­mä­ßig sind 16 × 16 Pixel und 32 × 32 Pixel die wich­tigs­ten Formate, da sie in klas­si­schen Browser-Tabs genutzt werden.

Für Pro­gres­si­ve Web Apps, also Websites, die eher wie Apps funk­tio­nie­ren, sollten zu­sätz­lich Favicons mit 192 × 192 px und 512 × 512 px vorhanden sein. Diese Formate werden im Manifest für die App-Icons definiert und von Browsern wie Chrome oder Edge beim „In­stal­lie­ren“ einer Website genutzt.

Profi-Website in Sekunden dank KI.
  • Profi-Website in Sekunden dank KI
  • Aus tausenden Vorlagen auswählen
  • 30 Tage kostenlos testen

Weitere wichtige Größen – Google und Apple

Die Größe der Favicons für Google ist eine besonders wichtige, denn Google nutzt Favicons nicht nur im Browser, sondern auch in den Such­ergeb­nis­sen. Dort werden sie mit einer Größe von 48 × 48 Pixeln angezeigt. Für Android sollten Sie zudem eine Variante mit 192 × 192 Pixeln be­reit­stel­len – diese dient als App-Icon, wenn Nutzende Ihre Website auf dem Start­bild­schirm ablegen.

Bei Apple sind je nach Endgerät un­ter­schied­li­che Favicon-Größen optimal. Für das iPhone wird das Format 60 x 60 Pixel genutzt. Möglich ist al­ler­dings auch eine deutlich höhere Auflösung, solange diese ein Viel­fa­ches dieses Wertes ist. Das er­mög­licht die optimale Dar­stel­lung bei hoher Auflösung und wird für andere Zwecke her­un­ter­ge­rech­net. 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 ab­ge­bil­det. Für moderne Retina und Super Retina Displays bietet sich das Favicon-Format 167 x 167 Pixel also doppelter Wert davon an.

Die Icons werden als so­ge­nann­te Apple Touch Icons hin­ter­legt und über den folgenden HTML-Tag im <head> der Seite ein­ge­bun­den:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
html

Die wich­tigs­ten Favicon-Größen auf einen Blick

Für einige Browser und Endgeräte gelten Ausnahmen. Gerade bei älteren Devices sind daher theo­re­tisch weitere Ab­mes­sun­gen nötig, damit die Größe des Browser-Icons stimmt. Hier finden Sie die gän­gigs­ten Maße noch einmal über­sicht­lich auf­ge­lis­tet:

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 Start­bild­schirm 72 x 72 Pixel
iPhone (ältere Modelle) und iPod Touch 57 x 57 Pixel
iPhone 4 Start­bild­schirm 114 x 114 Pixel
Opera Kurzwahl 195 x 195 Pixel

Da­tei­endun­gen: Welche Favicon-Formate sind möglich?

Sie können ver­schie­de­ne Gra­fik­for­ma­te für Ihr Favicon verwenden. Das klas­si­sche .ico-Format ist zwar nach wie vor kom­pa­ti­bel, gilt aber als veraltet. Moderne Browser be­vor­zu­gen PNG- oder SVG-Favicons. Für PWAs wird bei­spiels­wei­se das PNG-Format in der Manifest-Datei verwendet, da es ver­lust­frei skaliert werden kann.

Hier sind die Da­tei­for­ma­te im Überblick:

  • .ico: maximale Kom­pa­ti­bi­li­tät, aber begrenzte Ska­lier­bar­keit
  • .png: scharfe Dar­stel­lung auf allen Displays, trans­pa­rent möglich
  • .svg: vek­tor­ba­sier­te Al­ter­na­ti­ve, ideal für ska­lier­ba­re Favicons und dunkle Designs
  • .gif: nur in Aus­nah­me­fäl­len (z. B. animierte Icons)
Tipp

Achten Sie darauf, dass Ihr Server den passenden MIME-Type über­mit­telt (z. B. image/png oder image/svg+xml), um eine korrekte Dar­stel­lung in allen Browsern zu ge­währ­leis­ten.

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 ein­fachs­te Weg über einen ent­spre­chen­den Favicon-Generator. Dieser begleitet Sie durch alle Ar­beits­schrit­te und sorgt dafür, dass das Format des Bildes für alle re­le­van­ten Browser passt.

Zum Hauptmenü