Welche Favicon-Größen brauchen Sie 2026? Das ideale Set

2026 besteht das ideale Favicon-Set aus: einer favicon.ico mit Bildern in 16, 32 und 48 px, einem 96x96-PNG (für die Google-Suche), einem optionalen SVG-Favicon, einer apple-touch-icon.png mit 180x180 sowie PNGs in 192x192 und 512x512 (plus einem maskierbaren 512er), die in einem Web-App-Manifest deklariert werden. Windows-Kacheln und alte Apple-Größen brauchen Sie nur, wenn Sie sehr alte Geräte unterstützen müssen. Im Folgenden erfahren Sie, warum – mit Größentabelle, sofort nutzbarem HTML und typischen Fehlern, die Sie vermeiden sollten.

Die Favicon-Landschaft war früher unübersichtlich: Jeder Browser und jedes Betriebssystem verlangte eine eigene Größe, was die berüchtigten 20-zeiligen <head>-Blöcke hervorbrachte. Heute ist das meiste davon überholt. Moderne Browser skalieren ein gutes Icon, iOS möchte eine einzige Größe, und Android liest das Manifest. Dieser Artikel trennt, was wirklich nötig ist, von dem, was nur nett zu haben ist.

Die kurze Antwort: das ideale Set an Favicon-Dateien

• favicon.ico (16, 32, 48 px in einer Datei) im Stammverzeichnis der Website. Browser, Feed-Reader und viele Tools fordern weiterhin automatisch /favicon.ico an.
• favicon.svg (optional, aber empfohlen) für gestochen scharfe Darstellung in jeder Größe und Unterstützung des Dark Mode.
• PNG 16x16, 32x32 und 96x96 als explizite Fallbacks. Die 96-px-Version hilft in der Google-Suche, die ein Vielfaches von 48 px verlangt.
• apple-touch-icon.png mit 180x180, deckend, ohne Transparenz.
• PNG in 192x192 und 512x512 in der manifest.json, plus ein maskierbares 512x512-Icon für Android.
• theme-color-Meta-Tag zum Einfärben der Browser-Oberfläche auf Mobilgeräten.
• Windows-Kacheln (70, 150, 310 px) mit browserconfig.xml nur für ältere Windows-Versionen und angeheftete Websites im IE11.

Favicon-Größen im Überblick: Zweck, Dateinamen und Priorität

Nutzen Sie diese Tabelle als Checkliste. "Erforderlich" bedeutet, dass eine normale Website ohne das Icon kaputt oder unfertig wirkt; "Empfohlen" steht für einen klaren Qualitätsgewinn; "Optional" steht für Nischen- oder Legacy-Einsatz.

favicon.ico: 16, 32 und 48 px in einer Datei

Eine ICO-Datei ist ein Container, der mehrere Bitmaps enthält. Eine gute favicon.ico enthält Bilder in 16x16, 32x32 und 48x48, sodass der Browser oder das Betriebssystem die passendste Variante auswählen kann. Legen Sie sie im Stammverzeichnis Ihrer Domain ab (https://example.com/favicon.ico). Selbst wenn Ihr HTML auf einen anderen Ort verweist, fordern viele Crawler, RSS-Reader und ältere Browser genau diese URL an. Ist die Datei vorhanden, vermeiden Sie 404-Einträge in Ihren Logs.

Benennen Sie nicht einfach ein PNG in .ico um. Die meisten Browser tolerieren das, aber manche Tools lehnen es ab, und Sie verlieren den Vorteil mehrerer Auflösungen. Exportieren Sie eine echte ICO-Datei.

PNG-Favicons: 16, 32 und 96 px

PNG-Links mit expliziten sizes-Angaben lassen den Browser das beste Bitmap wählen, ohne die ICO-Datei zu parsen. In der Praxis deckt 32x32 hochauflösende Tabs ab, und 16x16 ist heute fast überflüssig. Die Größe 96x96 lohnt sich, weil Google Favicons neben den Suchergebnissen anzeigt und ein quadratisches Icon verlangt, dessen Größe ein Vielfaches von 48 px ist (48x48, 96x96, 144x144 usw.). Eine 96-px-Datei liefert Google eine schärfere Quelle als eine 48-px-Datei, wenn es für mobile Ergebnisse herunterskaliert.

Design-Tipp: Bei 16 px verschwinden feine Details. Verwenden Sie eine kräftige, einfache Form, hohen Kontrast und wenig oder gar keinen Text. Im MakeFav-Editor können Sie Ihr Icon vor dem Export anpassen und in der Vorschau prüfen.

SVG-Favicon und Dark Mode

Ein SVG-Favicon ist eine einzige winzige Datei, die auf jeder Bildschirmdichte scharf bleibt. Chromium-basierte Browser und Firefox unterstützen es. Die Unterstützung in Safari war historisch eingeschränkt, verlassen Sie sich also nie allein auf SVG: Behalten Sie die ICO- und PNG-Fallbacks.

Der größte Vorteil ist das Theming. Da ein SVG CSS enthalten kann, passen Sie das Icon mit prefers-color-scheme an das Farbschema des Nutzers an:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Beachten Sie, dass die Media Query das Design des Browsers oder Betriebssystems widerspiegelt, das auch die Tab-Leiste verwendet. Sie folgt keinem Theme-Umschalter auf Ihrer eigenen Website.

Eine bekannte Eigenheit: Sind sowohl eine ICO als auch ein SVG aufgelistet, wählt Chrome unter Umständen die ICO. Wenn Sie die ICO mit sizes="32x32" deklarieren und das SVG danach auflisten, bevorzugt Chrome das SVG, wie im Code unten gezeigt.

Apple Touch Icon: 180x180 und die alten Größen

Wenn ein Nutzer Ihre Website zum Home-Bildschirm von iOS oder iPadOS hinzufügt, verwendet Safari das apple-touch-icon. Heute genügt ein einziges 180x180-px-PNG: iOS skaliert es für ältere Geräte und iPads herunter. Nennen Sie es apple-touch-icon.png und legen Sie es im Stammverzeichnis ab; iOS sucht standardmäßig sogar nach dieser Datei, wenn kein Link-Tag existiert.

Regeln für das Apple-Icon:

• Keine Transparenz. iOS füllt transparente Pixel mit Schwarz, sodass aus einem transparenten Logo oft ein schwarzer Klecks wird. Fügen Sie eine einfarbige Hintergrundfarbe hinzu.
• Keine abgerundeten Ecken. iOS wendet seine eigene Rundungsmaske an. Liefern Sie ein vollständiges Quadrat.
• Halten Sie wichtige Inhalte von den äußersten Rändern fern, da die Ecken abgeschnitten werden.

Wann brauchen Sie die alten Größen (57, 72, 76, 114, 120, 144, 152, 167)? Nur wenn Sie iOS 6 oder älter unterstützen oder pixelgenaue Kontrolle pro Gerät für das iPad Pro (167 px) und das iPad (152 px) wünschen. Für nahezu jede Website reicht 2026 die 180x180-Datei allein. Das Setup für maximale Kompatibilität weiter unten enthält der Vollständigkeit halber einige davon.

Android- und PWA-Icons: 192, 512 und maskierbar

Chrome unter Android und andere PWA-fähige Browser lesen Icons aus dem Web-App-Manifest, nicht aus <link rel="icon">. Für die Installierbarkeit brauchen Sie mindestens ein 192x192- und ein 512x512-PNG. Das 192-px-Icon wird auf dem Startbildschirm und im App-Launcher verwendet; das 512-px-Icon erscheint auf Splashscreens und in Installationsdialogen.

Maskierbare Icons und die Safe Zone

Adaptive Android-Icons können je nach Gerät zu einem Kreis, Squircle oder einer anderen Form zugeschnitten werden. Ein maskierbares Icon ist so gestaltet, dass es sicher zugeschnitten werden kann: Die wichtigen Inhalte müssen innerhalb der Safe Zone liegen, einem zentrierten Kreis mit einem Durchmesser von 80 % des Bildes (Radius gleich 40 % der Seitenlänge). Bei einer 512x512-Datei bedeutet das, dass Ihr Logo in einem Kreis mit etwa 410 px Durchmesser bleiben sollte und die Hintergrundfarbe bis an alle vier Kanten reichen muss, damit nach dem Maskieren keine Lücken sichtbar sind.

Deklarieren Sie das maskierbare Icon als eigenen Eintrag mit "purpose": "maskable". Vermeiden Sie "any maskable" bei einer einzelnen Datei: Der für die Maskierung nötige Rand wirkt zu klein, wenn das Icon unmaskiert angezeigt wird.

Beispiel für eine manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Liefern Sie die Datei als application/manifest+json (oder application/json) aus und verlinken Sie sie auf jeder Seite mit <link rel="manifest" href="/manifest.json">. Manche Projekte nennen sie site.webmanifest; auf den Namen kommt es nicht an, wohl aber auf den Link.

Windows-Kacheln und browserconfig.xml

Unter Windows 8.1 und 10 können Nutzer eine Website ans Startmenü anheften, und IE11 sowie der alte Edge lesen Kachelbilder aus der browserconfig.xml. Die üblichen Größen sind 70x70 (klein), 150x150 (mittel), 310x150 (breit) und 310x310 (groß). Der Chromium-basierte Edge verwendet stattdessen das Manifest und normale Favicons, daher handelt es sich um ein Legacy-Feature. Binden Sie es nur ein, wenn Ihr Publikum weiterhin ältere Windows-Umgebungen umfasst, zum Beispiel in Unternehmen.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: die Browser-Oberfläche einfärben

Der theme-color-Meta-Tag teilt mobilen Browsern (und einigen Desktop-Browsern) mit, welche Farbe für die Adressleiste oder Titelleiste verwendet werden soll. Er ist kein Favicon, gehört aber zum selben Branding-Set. Sie können getrennte Werte für den hellen und den dunklen Modus angeben:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Minimales modernes Setup vs. maximale Kompatibilität

Minimales modernes Setup (für die meisten Websites empfohlen)

Fünf Dateien decken über 99 % der realen Nutzung ab: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) und die beiden Manifest-Icons (192 und 512). Fügen Sie das 96x96-PNG hinzu, wenn die Sichtbarkeit in der Google-Suche wichtig ist, und ein maskierbares Icon, wenn Sie eine PWA ausliefern.

<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="/manifest.json">

Setup für maximale Kompatibilität

Wählen Sie dieses Setup, wenn Sie ein breites oder Unternehmenspublikum bedienen oder jeden möglichen Client abdecken möchten. Es ergänzt explizite PNG-Größen, alte Apple-Größen, Windows-Kacheln und Theme-Farben.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Beachten Sie die Pfade relativ zum Stammverzeichnis, die mit / beginnen. Sie funktionieren in jeder Seitentiefe, womit wir bei den häufigsten Fehlern wären.

Häufige Favicon-Fehler und wie Sie sie beheben

1. Falsche Pfade

Ein Link wie href="favicon.ico" wird relativ zur aktuellen URL aufgelöst, funktioniert also auf /, bricht aber auf /blog/post/. Verwenden Sie Pfade relativ zum Stammverzeichnis (/favicon.ico) oder absolute URLs. Prüfen Sie außerdem, ob die Dateien wirklich existieren: Öffnen Sie jede URL direkt im Browser und stellen Sie sicher, dass sie HTTP 200 liefert und nicht auf eine 404-Seite oder eine Login-Wand weiterleitet.

2. Fehlendes oder falsches sizes-Attribut

Ohne sizes müssen Browser Icons herunterladen, um sie zu prüfen, und wählen eventuell das falsche. Deklarieren Sie sizes immer bei PNG-Links und achten Sie darauf, dass die Angabe den tatsächlichen Pixelmaßen entspricht. Eine Datei, die mit 32x32 beschriftet ist, aber tatsächlich 64x64 misst, führt zu uneinheitlichen Ergebnissen.

3. Aggressives Caching

Browser speichern Favicons lange im Cache, oft unabhängig vom Seiten-Cache. Nach einem Rebranding kann das alte Icon tagelang bestehen bleiben. Ändern Sie den Dateinamen oder fügen Sie einen Versions-Query-String hinzu (/favicon.ico?v=2) und aktualisieren Sie die Link-Tags. Ein hartes Neuladen aktualisiert das Tab-Icon oft nicht; die Icon-URL direkt zu öffnen und neu zu laden, funktioniert meist.

4. Nicht quadratische Bilder

Favicons müssen quadratisch sein. Ein rechteckiges Logo wird unvorhersehbar gestreckt, beschnitten oder mit Rändern versehen. Gestalten Sie ein eigenes quadratisches Zeichen, etwa einen Initialbuchstaben oder ein Symbol, statt eine breite Wortmarke zu verkleinern.

5. Transparente Apple Touch Icons werden schwarz

iOS füllt Transparenz mit Schwarz. Geben Sie dem 180x180-Icon einen deckenden Hintergrund und runden Sie die Ecken nicht vorab ab.

6. Maskierbare Icons ohne Safe Zone

Berührt das Logo bei einem maskierbaren Icon die Ränder, schneidet Android es ab. Halten Sie es innerhalb des zentralen 80-%-Kreises und füllen Sie die gesamte Fläche mit der Hintergrundfarbe.

7. Icons für Crawler blockieren

Wenn die robots.txt Ihren Favicon-Pfad sperrt, kann Google ihn nicht abrufen und zeigt in den Suchergebnissen ein generisches Globus-Icon an. Bedenken Sie außerdem, dass Google das Favicon auf demselben Host wie die Seite benötigt und es nur gelegentlich aktualisiert, sodass Änderungen Tage oder Wochen brauchen können, bis sie erscheinen.

8. Manifest-Link oder purposes vergessen

Ein Manifest, das nicht verlinkt ist oder keine Icons mit 192 und 512 px enthält, verhindert die Installationsaufforderung in Chrome. Validieren Sie es in den Entwicklertools Ihres Browsers im Tab "Application".

Das ganze Set mit einem Klick erzeugen

Ein Dutzend Dateien von Hand in einem Bildeditor zu erstellen, dann in ICO zu konvertieren und das Manifest zu schreiben, ist mühsam und fehleranfällig. MakeFav erzeugt alle oben genannten Dateien aus einem einzigen Bild, Text oder Emoji: favicon.ico mit mehreren Größen, PNGs, SVG, Apple Touch Icon, 192/512-PNGs, ein maskierbares Icon, Windows-Kacheln, manifest.json und browserconfig.xml, dazu ein HTML-Snippet zum Einfügen, alles in einem ZIP-Download. Im Editor können Sie Hintergrund, Innenabstand und Form feinjustieren, mit dem Favicon-Checker eine bestehende Website prüfen und die Erzeugung über die Entwickler-Ressourcen automatisieren.

Checkliste für die Bereitstellung

1. Laden Sie alle Dateien in das Stammverzeichnis Ihrer Website hoch.
2. Fügen Sie das HTML-Snippet in den <head> jeder Seite ein (oder in Ihr gemeinsames Layout).
3. Stellen Sie sicher, dass die Pfade relativ zum Stammverzeichnis sind und HTTP 200 liefern.
4. Prüfen Sie den hellen und dunklen Modus, eine Installation auf dem iOS-Home-Bildschirm und eine Android-Installation.
5. Führen Sie den Checker aus, um fehlende oder abweichende Größen zu finden.
6. Umgehen Sie Caches mit einem Versions-String, wenn Sie ein altes Icon ersetzt haben.

Häufig gestellte Fragen

Brauche ich 2026 noch eine favicon.ico?

Ja. Zwar akzeptieren moderne Browser PNG und SVG, aber viele Crawler, Feed-Reader, E-Mail-Clients und ältere Browser fordern weiterhin direkt /favicon.ico an. Eine ICO mit mehreren Größen (16, 32 und 48 px) ist eine kleine Datei, die fehlende Icons und 404-Fehler verhindert.

Welche Größe sollte ein Favicon für die Google-Suche haben?

Google verlangt ein quadratisches Favicon, dessen Größe ein Vielfaches von 48 px ist, mindestens 48x48. Ein 96x96-PNG ist eine sichere Wahl, auch ein SVG wird unterstützt. Außerdem muss die Datei crawlbar sein, blockieren Sie sie also nicht in der robots.txt. Aktualisierungen können Tage oder Wochen dauern, bis sie sichtbar werden.

Reicht 180x180 für das Apple Touch Icon?

Für fast alle Websites ja. iOS und iPadOS skalieren ein 180x180-PNG für jedes aktuelle Gerät herunter. Die älteren Größen (57 bis 152 px) sind nur für sehr alte iOS-Versionen relevant. Denken Sie daran, einen deckenden Hintergrund zu verwenden, damit das Icon nicht schwarz wird.

Was ist ein maskierbares Icon und brauche ich eines?

Ein maskierbares Icon ist ein 512x512-PNG, das für die adaptiven Icon-Formen von Android gestaltet ist. Die wichtigen Inhalte liegen in einem Kreis mit 80 % Durchmesser in der Mitte, und der Hintergrund füllt das gesamte Quadrat. Sie brauchen es nur, wenn Sie eine installierbare PWA anbieten, aber es lässt das Icon nativ wirken, statt in einem weißen Kreis zu sitzen.

Warum wird mein altes Favicon nach der Änderung weiterhin angezeigt?

Browser speichern Favicons separat und lange im Cache. Benennen Sie die Datei um oder fügen Sie einen Versions-Query-String wie ?v=2 hinzu, aktualisieren Sie die Link-Tags und öffnen Sie dann die Icon-URL direkt und laden Sie sie neu. Suchmaschinen brauchen möglicherweise länger, um ihre eigene Kopie zu aktualisieren.