Favicon-Größen – Leitfaden (2026)

Die Favicon-Größen, die 2026 Browser, iOS und Android abdecken, sind 16×16, 32×32, 180×180 (Apple Touch Icon), 192×192 und 512×512 (PWA-Manifest) plus eine legacy favicon.ico im Root-Verzeichnis. Ein einzelnes 32×32-PNG reicht nicht, wenn Lesezeichen, Homescreen-Icons und installierbare PWAs sauber aussehen sollen.

Dieser Leitfaden listet jede Größe, erklärt wo sie erscheint, und zeigt wie du deine Live-Seite prüfst ohne in DevTools zu raten.

Kurzübersicht

Exportiere von einem quadratischen Master mit mindestens 512×512 px. Verkleinere für kleinere Größen. Skaliere niemals eine 16×16-Quelle auf 512×512 hoch. Das ist der schnellste Weg zu einem unscharfen Tab-Icon.

Browser-Tab-Icons (16×16 und 32×32)

Desktop-Browser wählen die passendste deklarierte Größe. Chrome und Firefox rendern in der Tab-Leiste meist 16×16 oder 32×32, je nach Display-Dichte.

Was du ausliefern solltest

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Behalte beide Dateien. Ein einzelnes 32×32-Tag funktioniert auf vielen Sites, aber 16×16 deckt Retina-Tabs und ältere Clients ab, die größere Deklarationen ignorieren.

favicon.ico ist weiterhin relevant

Browser rufen /favicon.ico automatisch ab, auch wenn du PNG-Links deklarierst. Das ICO-Format kann mehrere Auflösungen (16, 32, 48) in einer Datei bündeln.

Lege favicon.ico im Root ab:

https://example.com/favicon.ico

Wenn du nur PNGs auslieferst und das ICO weglässt, zeigen manche Crawler, E-Mail-Clients und Legacy-Tools weiterhin ein generisches Globus-Symbol. Der Favicon Check scannt sowohl deine HTML-link-Tags als auch den Standardpfad /favicon.ico in einem Durchlauf.

Apple Touch Icon (180×180)

iOS nutzt dein 32×32-Tab-Icon nicht, wenn jemand die Seite auf den Homescreen legt. Es sucht nach apple-touch-icon.

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

Apples dokumentierte Größe ist 180×180 px. Nutze ein quadratisches PNG ohne Transparenz-Tricks. iOS rundet die Ecken automatisch ab.

Typische iOS-Fehler

• 152×152 oder 120×120 aus alten Templates
• Breites Logo statt quadratischem Crop
• Tag komplett vergessen und hoffen, das Tab-Icon skaliert hoch

Nach dem Deploy: Favicon Check öffnen, URL eingeben und prüfen, ob die 180×180-Datei mit dem richtigen rel gelistet ist. Das Tool zeigt jedes deklarierte Icon und lässt dich jede Datei herunterladen, um die Pixel zu prüfen.

Android- und PWA-Icons (192×192 und 512×512)

Installierbare Web-Apps und Android-Homescreen-Verknüpfungen lesen Icons aus dem Web App Manifest, nicht allein aus dem Tab-Favicon.

Beispiel manifest.webmanifest:

{
  "name": "Meine App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512×512",
      "type": "image/png"
    }
  ]
}

Verlinke das Manifest im HTML:

<link rel="manifest" href="/site.webmanifest">

192×192 ist das Arbeitspferd für Homescreen-Icons. 512×512 wird für Splashscreens und den Install-Prompt genutzt. Google empfiehlt beide für PWAs.

Der Favicon Check parst Manifest-Einträge und listet Manifest-Icons neben link rel-Tags. Das spart dir, während eines Audits JSON in einem separaten Tab zu öffnen.

SVG-Favicons: wann sie helfen und wann nicht

SVG-Favicons skalieren sauber auf Desktop-Browsern, die sie unterstützen:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

SVG zuerst, PNG als Fallback. Safari auf iOS will weiterhin apple-touch-icon als Rasterbild. Android will Manifest-PNGs. SVG ersetzt nicht das volle Größen-Set. Es ist eine zusätzliche scharfe Schicht für unterstützende Browser.

Wie Browser die Datei auswählen

Grobe Priorität:

1. Explizites link rel="icon" mit passendem sizes-Attribut
2. apple-touch-icon für iOS-Homescreen
3. Icons aus manifest.json für Installation / Android-Launcher
4. /favicon.ico als Fallback-Anfrage
5. Generischer Platzhalter, wenn alles fehlschlägt

Browser laden nicht jede deklarierte Datei bei jedem Seitenaufruf. Sie wählen, was zum Kontext passt. Mehrere Größen zu deklarieren ist deshalb kein Verschwendung. Jeder Kontext bekommt die richtige Auflösung.

Design-Regeln für winzige Größen

Favicons werden auf dem Bildschirm bei 16 px gelesen. Feine Details verschwinden.

Empfohlen

• Einfache Silhouette oder Monogramm
• Hoher Kontrast zwischen Vorder- und Hintergrund
• Quadratisches Artboard, zentriertes Symbol
• Vor dem Export in echter Pixelgröße testen

Vermeiden

• Vollständige Wortmarken mit dünnen Buchstaben
• Verläufe, die in klein matschig wirken
• Text kleiner als 40 % der Fläche
• Nicht-quadratische Quellen (werden gestaucht)

Das Size-Lab im Favicon Check lässt dich ein quadratisches PNG hochladen und in Browser-Tab, Lesezeichen, iOS-Homescreen und Android-Homescreen ansehen. Nutze es, bevor du sechs Dateien aus Figma exportierst.

Welche Dateien liegen im Root-Verzeichnis?

Ein typisches Set nach dem Export:

/public
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  favicon.svg
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest

Pfade in den link-Tags müssen exakt zu diesen Dateien passen. Ein häufiger Deploy-Fehler: Icons landen unter /assets/icons/, die Tags zeigen aber auf /favicon-32x32.png. Der Favicon Check zeigt dir sofort, welche URLs der Server wirklich ausliefert.

CDN und Subpath-Deployments

Wenn Icons über ein CDN laufen, nutze absolute HTTPS-URLs in jedem href und src:

<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.example.com/favicon-32x32.png">

Achte darauf, dass CORS und Cache-Header für statische Assets gesetzt sind. Manche Teams vergessen, Manifest-Icons auf dem CDN zu invalidieren, während HTML schon die neue Version referenziert. Nach CDN-Umstellung immer Produktions-URL scannen, nicht nur lokal testen.

Schritt-für-Schritt Export

1. 512×512-Master im Design-Tool anlegen. Logo innerhalb einer zentrierten Safe Zone (ca. 80 % der Fläche).
2. PNGs exportieren bei 512, 192, 180, 32 und 16 px per Downscaling. Bicubic oder Lanczos nutzen.
3. favicon.ico bauen mit 16-, 32- und 48-px-Ebenen. Die meisten Generatoren machen das aus einem PNG-Upload.
4. Optional: SVG aus einer vereinfachten Pfadversion exportieren.
5. HTML und Manifest schreiben. Siehe Favicon einbinden (HTML) für Copy-Paste-Snippets.
6. Deploy auf Produktion über HTTPS.
7. Live-URL scannen mit Favicon Check. Fehlende Größen vor dem Rebrand-Announcement fixen.

Favicon-Größen auf der Live-URL testen

Lokale Vorschauen täuschen. Cache, CDN-Pfade und falsche href-Werte zeigen sich erst auf dem deployten Host.

Schnelles Audit mit Favicon Check

1. Favicon Check öffnen.
2. Produktions-URL eingeben (mit https://).
3. Liste prüfen: jeder Eintrag zeigt rel, sizes, Format und Vorschau.
4. Verdächtige Datei herunterladen und Pixelmaße im Editor prüfen.
5. Size-Lab nutzen, um gegen ein neues Upload zu vergleichen.

Findet der Scanner weniger Icons als erwartet, prüfe Tippfehler in Pfaden, fehlenden Manifest-Link oder Icons, die nur clientseitig per JavaScript injiziert werden. Favicons gehören ins serverseitig gerenderte HTML.

Social Previews mitprüfen

Favicons und Open-Graph-Bilder haben verschiedene Jobs. Ein perfektes Tab-Icon fixiert kein kaputtes og:image. Dieselbe Domain durch den Open-Graph-Scanner laufen lassen, um Link-Vorschauen für Facebook, LinkedIn, WhatsApp und X zu validieren. Beide Scans zusammen dauern unter einer Minute und decken die zwei sichtbarsten Brand-Touchpoints ab.

Häufige Größen-Fehler

Nur favicon.ico ausliefern

Legacy-Format allein lässt iOS und Android ohne passende Assets. Moderne Setups brauchen PNG-Größen und Manifest-Einträge.

Ein 512×512-PNG als sizes="32x32" deklariert

Browser können herunterskalieren, aber falsche sizes verwirren Crawler und Audit-Tools. Attribut und echte Dateigröße müssen zusammenpassen.

Kleine Quelle hochskalieren

Von 64×64 auf 512×512 strecken erzeugt weiche Kanten auf Android-Splashscreens. Immer groß designen, klein exportieren.

Cache nach Rebrand vergessen

Browser cachen Favicons aggressiv. Nach Dateiwechsel Hard-Refresh oder privates Fenster testen. Dateien umbenennen (favicon-v2.ico) oder Cache-Header setzen, wenn das alte Icon tagelang bleibt.

Quadrat-Annahme bei rechteckigen Logos

Nicht-quadratische Bilder werden in ein Quadrat gezwungen. Bewusst croppen statt ungleichmäßiges Padding vom Browser erhalten.

Checkliste nach Projekttyp

FAQ

Welche Favicon-Größe ist am wichtigsten?

32×32 für Desktop-Tabs und 180×180 für iOS-Homescreens. Wenn du nur zwei fixst, fix diese.

Braucht man 16×16 noch 2026?

Ja. High-DPI-Tabs und manche Lesezeichen-UIs fordern weiterhin 16×16. Die Datei ist winzig. Liefere sie aus.

Reicht ein 512×512-PNG für alles?

Browser skalieren herunter, aber iOS und Manifest-Konsumenten erwarten korrekte sizes-Metadaten. Eine übergroße Datei mit falschen Deklarationen scheitert bei Audits und wirkt unscharf.

Welche Größen stecken in favicon.ico?

Typisch 16×16, 32×32 und 48×48 in einem ICO-Container. Manche Generatoren packen auch 64×64 rein.

Nutzt Google Search Favicon-Größen?

Google kann Favicons in Suchergebnissen zeigen. Es holt, was die Site deklariert, oft 48×48 oder größere Vielfache. Ein vollständiges Set verbessert Konsistenz über SERP, Tabs und Mobile-Shells.

Wie prüfe ich Größen ohne jede Datei herunterzuladen?

Mit dem Favicon Check. Er listet Maße aus sizes-Attributen und Manifest-Einträgen und zeigt Vorschauen inline.

Braucht man verschiedene Favicons für Dark Mode?

Die meisten Sites liefern ein Icon. Ist dein Mark weiß auf transparent, gib einen dezenten Hintergrundkreis dazu, damit es auf hellem und dunklem Browser-Chrome sichtbar bleibt. Beide Themes im Size-Lab testen.

Was ist der Unterschied zwischen favicon und apple-touch-icon?

rel="icon" zielt auf Tabs und Lesezeichen. apple-touch-icon ist iOS-spezifisch für Homescreen und Safari. Beide Tags brauchst du für volle Abdeckung.

Fazit

Liefere 16×16, 32×32, 180×180, 192×192, 512×512 und favicon.ico aus einem 512×512-Master. Passe echte Pixel zu jedem sizes-Attribut an, verlinke dein Manifest und validiere die Live-URL mit dem Favicon Check. Kombiniere das mit dem Open-Graph-Scanner - dann wirkt deine Site in Tabs, auf Homescreens und in geteilten Link-Karten scharf.