Favicon-Größe: Format und Maße der kleinen Bilder
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 (Kofferwort aus „favorite“ und „icon“) ist eine kleine Grafik, die über der Adressleiste in den Browser-Tabs angezeigt wird. Es ist für jede Website empfehlenswert, ein Favicon einzubinden. Es trägt zum Wiedererkennungswert einer Website bei, verleiht ihr ein professionelles Erscheinungsbild und lässt sie unter SEO-Gesichtspunkten besser abschneiden.
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.
Welche Favicon-Größe ist empfehlenswert?
Unterschiedliche Browser und Geräte verwenden unterschiedliche Favicon-Größen. Standardmäßig sind 16 × 16 Pixel und 32 × 32 Pixel die wichtigsten Formate, da sie in klassischen Browser-Tabs genutzt werden.
Für Progressive Web Apps, also Websites, die eher wie Apps funktionieren, sollten zusätzlich 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 „Installieren“ einer Website genutzt.
- Modernste Vorlagen, KI-generiert
- Integrierte Marketingtools für Ihren Online-Erfolg
- 24/7 Premium-Support und persönlicher Berater inklusive
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 Suchergebnissen. Dort werden sie mit einer Größe von 48 × 48 Pixeln angezeigt. Für Android sollten Sie zudem eine Variante mit 192 × 192 Pixeln bereitstellen – diese dient als App-Icon, wenn Nutzende Ihre Website auf dem Startbildschirm ablegen.
Bei Apple sind je nach Endgerät 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 heruntergerechnet. 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 also doppelter Wert davon an.
Die Icons werden als sogenannte Apple Touch Icons hinterlegt und über den folgenden HTML-Tag im <head> der Seite eingebunden:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Die wichtigsten Favicon-Größen auf einen Blick
Für einige Browser und Endgeräte gelten 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. Das klassische .ico-Format ist zwar nach wie vor kompatibel, gilt aber als veraltet. Moderne Browser bevorzugen PNG- oder SVG-Favicons. Für PWAs wird beispielsweise das PNG-Format in der Manifest-Datei verwendet, da es verlustfrei skaliert werden kann.
Hier sind die Dateiformate im Überblick:
- .ico: maximale Kompatibilität, aber begrenzte Skalierbarkeit
- .png: scharfe Darstellung auf allen Displays, transparent möglich
- .svg: vektorbasierte Alternative, ideal für skalierbare Favicons und dunkle Designs
- .gif: nur in Ausnahmefällen (z. B. animierte Icons)
Achten Sie darauf, dass Ihr Server den passenden MIME-Type übermittelt (z. B. image/png oder image/svg+xml), um eine korrekte Darstellung in allen Browsern zu gewährleisten.
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 Favicon-Generator. Dieser begleitet Sie durch alle Arbeitsschritte und sorgt dafür, dass das Format des Bildes für alle relevanten Browser passt.