Ein Favicon ist das kleine Symbol Ihrer Website im Browser-Tab, in Lesezeichen, im Google-Suchergebnis und auf dem Home-Bildschirm. Jede dieser Stellen verlangt eine andere Datei. Mit diesen sechs Dateien sind alle gängigen Browser und Geräte abgedeckt:
| Datei | Größe | Wofür |
|---|---|---|
favicon.ico | 16, 32 und 48 px | Browser-Tab, Lesezeichen, ältere Browser, Windows |
favicon.svg | Vektor | Browser-Tab in Chrome, Edge, Firefox und Safari ab 26, auch mit dunklem Design |
apple-touch-icon.png | 180 × 180 px | iPhone und iPad, deckend ohne Transparenz |
icon-192.png, icon-512.png | 192 und 512 px | Android und Chrome, über das Manifest |
icon-maskable-512.png | 512 px | Android-Masken (rund, eckig, Tropfen) |
site.webmanifest | Text | Name, Farben und Symbole für Android |
Dazu kommen vier Zeilen im HTML-Kopf. Wer WordPress oder Shopify nutzt, braucht davon fast nichts: Dort laden Sie eine quadratische Datei hoch, das System erzeugt die Größen selbst. Die Anleitung für Ihr System steht oben im Abschnitt „Einbau“.
Ein Zeichen statt drei
Bei 16 Pixeln bleiben für zwei Buchstaben nur rund sieben Pixel Höhe. Ein einzelnes Zeichen wird fast doppelt so groß und bleibt erkennbar. Kräftige Schriften halten bei dieser Größe besser als dünne. Der Prüfbericht rechnet Zeichenhöhe und Strichstärke für Ihr Favicon aus.
Kontrast und dunkles Design
Ein Favicon ohne eigene Fläche sitzt direkt auf dem Tab. Ein schwarzes Logo verschwindet dann im dunklen Design des Browsers. Abhilfe schafft eine Fläche hinter dem Motiv oder ein SVG-Favicon mit eigenen Farben für das dunkle Design. Für Text empfiehlt die WCAG einen Kontrast von 4,5 : 1.
Nach dem Einbau prüfen
Der Favicon-Checker ruft Ihre Seite ab und zeigt, ob jede Datei erreichbar ist, die Tags stimmen und Google das Symbol abrufen darf.
Häufige Fragen
Welche Größe muss ein Favicon haben?
Es gibt nicht die eine Größe. Der Browser-Tab zeigt 16 Pixel, auf hochauflösenden Bildschirmen 32. Google verlangt ein quadratisches Bild und empfiehlt mehr als 48 × 48 Pixel. Das iPhone nimmt 180 × 180 Pixel für den Home-Bildschirm, Android 192 und 512 Pixel aus dem Manifest. Deshalb erzeugt der Generator ein Paket: favicon.ico mit 16, 32 und 48 Pixeln, ein SVG, das Apple-Touch-Icon und die Android-Symbole.
Brauche ich 2026 noch eine favicon.ico?
Ja, als Rückfallebene. Ältere Browser, manche Programme und Dienste rufen /favicon.ico direkt ab, ohne in den HTML-Kopf zu schauen. Auch die Google-Suche liest laut Google ICO, PNG und einige andere Pixelformate, aber kein SVG. Moderne Browser nehmen das favicon.svg. Damit Chrome nicht trotzdem die ICO-Datei wählt, steht im Snippet sizes="32x32" an der ICO.
Warum hat mein Favicon auf dem iPhone schwarze Ecken?
iOS duldet keine Transparenz im Apple-Touch-Icon und füllt transparente Stellen schwarz. Runde oder abgerundete Favicons mit transparenten Ecken sehen auf dem Home-Bildschirm deshalb schwarz umrandet aus. Der Generator legt das Apple-Touch-Icon immer deckend und quadratisch an; die Ecken rundet iOS selbst.
Was ist ein maskable Icon?
Android schneidet App-Symbole je nach Gerät rund, eckig oder tropfenförmig zu. Ein maskable Icon füllt die ganze Fläche und hält das Motiv in einem Kreis mit 40 Prozent Radius. So schneidet keine Maske etwas Wichtiges ab. Im Manifest steht es mit "purpose": "maskable".
Wie lange dauert es, bis Google das neue Favicon zeigt?
Google zeigt es erst, nachdem es Ihre Startseite erneut abgerufen hat. Das kann laut Google einige Tage bis einige Wochen dauern. Über die URL-Prüfung in der Search Console können Sie die Startseite neu einreichen. Googlebot und Googlebot-Image müssen Startseite und Datei abrufen dürfen.
Darf ich ein Emoji als Favicon verwenden?
Ja, wenn die Grafik frei lizenziert ist. Die Emojis auf Ihrem Gerät kommen mit dem Betriebssystem und sind nicht automatisch für eigene Grafiken freigegeben. Der Generator nimmt deshalb Twemoji (CC BY 4.0) und legt die nötige Quellenangabe als Kommentar ins favicon.svg und ins HTML. Nutzen Sie nur die PNG-Dateien, nennen Sie die Quelle einmal auf der Website, etwa im Impressum.
Quellen: Google Search Central, web.dev, Evil Martians, WordPress-Dokumentation, Shopify-Hilfe. Stand 02.10.2026.