# 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](https://www.ionos.de/digitalguide/websites/webdesign/was-ist-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](https://www.ionos.de/digitalguide/websites/webdesign/favicon-einbinden/). Es trägt zum Wiedererkennungswert einer Website bei, verleiht ihr ein professionelles Erscheinungsbild und lässt sie unter [SEO-Gesichtspunkten](https://www.ionos.de/digitalguide/online-marketing/suchmaschinenmarketing/seo-lexikon-suchmaschinenoptimierung-von-a-bis-z/) 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](https://www.ionos.de/digitalguide/websites/web-entwicklung/progressive-web-apps-welche-vorteile-bieten-sie/), 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. ## 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 `` der Seite eingebunden: ```html ``` ## 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](https://www.ionos.de/digitalguide/websites/webdesign/grafikformate-welche-formate-wirklich-wichtig-sind/) 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) Tipp 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](https://www.ionos.de/tools/favicon-generator). Dieser begleitet Sie durch alle Arbeitsschritte und sorgt dafür, dass das Format des Bildes für alle relevanten Browser passt. This is a markdown version of: [https://www.ionos.de/digitalguide/websites/webdesign/favicon-groesse-und-format/](https://www.ionos.de/digitalguide/websites/webdesign/favicon-groesse-und-format/) for AI/LLM consumption.