Favicon-Größen: Komplette Tabelle und das nötige HTML

Die Favicon-Größen laufen heute auf fünf Dateien hinaus: eine favicon.ico mit 32×32, ein SVG-Icon, ein Apple Touch Icon mit 180×180 und zwei PNGs im Web-App-Manifest mit 192×192 und 512×512, von denen eines maskable ist. Alles andere, etwa Apple-Icons mit 57×57, Windows-Kacheln oder zusätzliche PNG-Größen, ist veraltet und kann entfallen.

Die Größentabelle

Datei	Größe	Verwendet von	Hinweise
`favicon.ico`	32×32 (kann zusätzlich 16 und 48 enthalten)	Allen Browsern, RSS-Readern und allem, was `/favicon.ico` abfragt	Legen Sie sie im Stammverzeichnis ab, auch wenn Ihr HTML andere Icons deklariert.
`favicon.svg`	Beliebig, quadratische viewBox	Tabs in Chrome, Edge und Firefox	Bei jeder Größe scharf und kann im Dark Mode die Farben wechseln.
`favicon-96x96.png`	96×96	Google-Suche	Optional, wenn das Apple Touch Icon deklariert ist; Google liest beide.
`apple-touch-icon.png`	180×180	Home-Bildschirm von iPhone und iPad, Google-Suche	Deckender Hintergrund. Die Ecken rundet iOS selbst ab.
Manifest-Icon	192×192	Android-Home-Bildschirm	Steht unter `icons` im Web-App-Manifest.
Manifest-Icon	512×512	Installationsdialog, Startbildschirm	Die Installationskriterien von Chrome verlangen ein Icon mit 192 und eines mit 512.
Maskable Icon	512×512	Adaptive Icons unter Android	`"purpose": "maskable"`, Logo innerhalb des mittleren Kreises mit 80 %.

Browser-Tabs: favicon.ico und SVG

Ein Tab zeigt das Icon mit 16 CSS-Pixeln, das sind auf einem hochauflösenden Bildschirm 32 Gerätepixel. Deshalb ist das Bild mit 32×32 in der favicon.ico das wichtigste. Sie können 16 und 48 in dieselbe Datei packen; Browser nehmen das passendste.

Ein SVG-Icon deckt alle Größen auf einmal ab. Es kann außerdem eine prefers-color-scheme-Media-Query enthalten, sodass ein dunkles Logo in dunklen Tabs hell wird. Deklarieren Sie zuerst die ICO mit sizes="32x32" und danach das SVG: Browser mit SVG-Unterstützung nehmen es, die übrigen greifen auf die ICO zurück.

Google-Suche

Die Favicon-Richtlinien von Google verlangen ein quadratisches Icon von mindestens 8×8 Pixeln und empfehlen eines mit mehr als 48×48. Unterstützt werden BMP, GIF, ICO, PNG, JPEG, PPM und TIFF. SVG steht nicht auf dieser Liste, eine Website nur mit SVG gibt Google also nichts, was es verwenden kann. Google liest sowohl rel="icon" als auch rel="apple-touch-icon", ein deklariertes Apple Touch Icon mit 180×180 erfüllt daher bereits die Größenempfehlung. Wollen Sie eine eigene Datei, genügt ein PNG mit 96×96.

iPhone und iPad

iOS verwendet das Apple Touch Icon, wenn jemand Ihre Website zum Home-Bildschirm hinzufügt. 180×180 ist die Größe für aktuelle iPhones (60 Punkte bei dreifacher Skalierung); iPads skalieren es problemlos herunter, eine Datei reicht also. Transparente Bereiche werden auf dem Home-Bildschirm schwarz, geben Sie dem Icon deshalb einen deckenden Hintergrund. Ohne das Icon verwendet iOS einen Seitenscreenshot oder einen Buchstaben auf einer einfarbigen Kachel.

Android und installierbare Web-Apps

Android und Chrome lesen die Icons aus dem Web-App-Manifest. Das Icon mit 192×192 landet auf dem Home-Bildschirm; das mit 512×512 erscheint im Installationsdialog und auf dem Startbildschirm.

Ein maskable Icon ist ein eigenes Bild mit 512×512, dessen Motiv das ganze Quadrat füllt. Android beschneidet es auf die Form, die das Telefon verwendet: Kreis, Squircle oder abgerundetes Quadrat. Liegt das Logo innerhalb eines zentrierten Kreises mit 80 % der Bildbreite als Durchmesser, übersteht es jede Maske. Ohne maskable Icon verkleinert Android Ihr normales Icon und setzt es auf einen weißen Kreis.

Das HTML

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Und der Icons-Teil der site.webmanifest:

"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
  { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]

Liefern Sie das Manifest als application/manifest+json aus und jedes Icon mit seinem echten Bildtyp. Ein Server, der /favicon.ico mit einer HTML-Seite und Status 200 beantwortet, macht das Icon kaputt, obwohl der Netzwerk-Tab unauffällig aussieht. Single-Page-Apps tun das oft.

Größen, auf die Sie verzichten können

Apple Touch Icons mit 57, 60, 72, 76, 114, 120, 144 und 152 px. iOS skaliert das mit 180 px.
mstile-*.png, browserconfig.xml und msapplication-*-Tags. Sie bedienten die Startkacheln von Windows 8 und 10.
Das mask-icon von Safari. Safari 12 und neuer verwenden für angeheftete Tabs das normale Favicon.
Getrennte Links auf PNGs mit 16×16 und 32×32, wenn die favicon.ico beide schon enthält.

Ihr Set prüfen

Favicon Checker ruft jede oben genannte Datei von Ihrer Website ab, misst die tatsächliche Größe und das Format und zeigt, wie die Icons in Tabs, Google, iOS und Android aussehen.