Benötige ich im Jahr 2026 noch eine Datei namens „favicon.ico“?

Ja. Browser, Webcrawler und Feed-Reader fordern standardmäßig die Datei „/favicon.ico“ vom Stammverzeichnis Ihrer Website an, ohne Ihr HTML zu lesen. Wenn diese Datei fehlt, führt dies zu 404-Fehlern und leeren Symbolen in diesen Fällen. Erstellen Sie stattdessen eine ordnungsgemäße ICO-Datei mit mehreren Größen (16, 32 und 48 Pixel), anstatt eine einzelne, konvertierte Datei zu verwenden, damit keine Skalierung erforderlich ist.

Warum wird mein Symbol auf iPhones als schwarzes Quadrat angezeigt?

iOS füllt die transparenten Bereiche eines „apple-touch“-Symbols mit einheitlich Schwarz anstelle eines neutralen Hintergrunds. Bevor Sie das Symbol exportieren, sollten Sie es auf einen expliziten Hintergrund legen. Der Favicon-Generator von FileTinker erledigt dies automatisch, indem er die von Ihnen gewählte Hintergrundfarbe verwendet. Außerdem sollten Sie vorgefertigte abgerundete Ecken überspringen, da iOS seine eigene Eckenmaske anwendet.

Kann ich einfach nur ein einzelnes SVG-Favicon verwenden und auf die PNG-Dateien verzichten?

Noch nicht als einziges Symbol verwenden. SVG-Favicons sind dort, wo sie unterstützt werden, eine ausgezeichnete Lösung – sie sind unendlich scharf, klein und können sich dank einer eingebetteten Media-Abfrage an den Dunkelmodus anpassen. Die Unterstützung ist jedoch nicht einheitlich, und Safari ist das bemerkenswerteste Beispiel dafür, dass sie nicht unterstützt wird. Außerdem findet man kein SVG, wenn man sich an die Konvention hält und nach /favicon.ico sucht. Stellen Sie das SVG als Ergänzung zum ICO- und PNG-Set bereit, nicht als Ersatz dafür.

Warum benötigt Android ein Symbol mit einer Auflösung von 512 Pixeln, wenn die Registerkarten nur 16 Pixel groß sind?

Die Manifest-Symbole erfüllen eine andere Funktion. Die Version mit 192 Pixeln wird zum Symbol auf dem Startbildschirm, wenn ein Nutzer Ihre Website hinzufügt, und die Version mit 512 Pixeln wird für die Installationsaufforderung und den Begrüßungsbildschirm verwendet, der beim Start einer installierten Web-App angezeigt wird. Auf einem hochauflösenden Bildschirm werden diese Symbole in großer Größe dargestellt. Die Symbole werden nur dann heruntergeladen, wenn sie tatsächlich benötigt werden.

Ich habe mein Favicon ausgetauscht, aber das alte wird immer noch angezeigt. Warum?

Favicons werden besonders stark zwischengespeichert – Browser speichern sie deutlich länger als normale Bilder, manchmal sogar wochenlang. Überprüfen Sie dies in einem privaten Browserfenster, um sicherzustellen, dass die neuen Dateien korrekt geladen werden. Für regelmäßige Besucher dauert es zwar eine Weile, aber wenn Sie den Icon-URLs in Ihren Link-Tags eine Versionsnummer hinzufügen, wird eine neue Version abgerufen.

Favicon-Größen und -Formate im Jahr 2026: Was Ihre Website tatsächlich benötigt.

5. Juli 20267 Min. Lesezeit

Wenn Sie nach Tipps für das Favicon-Design suchen, werden Sie auf Checklisten stoßen, die mehr als zwanzig verschiedene Bilddateien verlangen: eine PNG-Datei für jede iPad-Generation, Kachelbilder für Windows, die Datei „browserconfig.xml“ und Masken für angeheftete Browser-Tabs. Der Großteil davon ist ein Relikt aus dem Jahr 2014, das für Plattformen gedacht war, die inzwischen nicht mehr verwendet werden oder auf Standard-Icons zurückgegangen sind. Im Jahr 2026 benötigen Sie sechs Bilddateien, eine Manifestdatei und etwa fünf Zeilen HTML. Damit sind Browser-Tabs, Lesezeichen, Google-Suchergebnisse, der Startbildschirm von iOS und Android einschließlich installierter Web-Apps abgedeckt. Diese Anleitung zeigt, welche Dateien wichtig sind, warum jede einzelne Datei existiert, welche Dateien Sie gefahrlos löschen können und wie Sie das gesamte Set aus einem einzigen Logo erstellen können, ohne etwas installieren oder Ihre Grafiken irgendwo hochladen zu müssen.

Wo Ihr Symbol tatsächlich angezeigt wird.

Ein Favicon ist längst nicht mehr nur eine Art von Dekoration für Browser-Tabs. Die gleiche kleine Bildersammlung wird heutzutage in überraschend vielen wichtigen Bereichen eingesetzt, wobei jedes dieser Bereiche seine eigenen bevorzugten Größen- und Formatvorgaben hat.

Browser-Register, Lesezeichen und Verlauf zeigen Ihr Icon in 16 mal 16 CSS-Pixeln an, auf hochauflösenden Bildschirmen verdoppelt auf 32 mal 32. Google zeigt Favicon neben Suchergebnissen, sodass ein fehlendes oder unscharfes Icon Ihre Eintragung weniger vertrauenswürdig wirken lässt als den darüberliegenden Wettbewerber. Wenn jemand Ihre Website auf dem iPhone-Startbildschirm speichert, verwendet iOS Ihr apple-touch-icon als vollständiges App-Icon. Auf Android nutzt Chrome Ihre Manifest-Icons für denselben Zweck; wenn Ihre Website als Web-App installierbar ist, wird das 512-Pixel-Icon zum Splash-Screen-Grafik während des Ladens.

Das ist die vollständige Liste, für die es sich lohnt, Designs zu erstellen. Die Kacheln für den Windows-Startbildschirm, die angehefteten Tabs von Safari und ein Dutzend ältere iPad-Bildschirmauflösungen sind nicht enthalten – weitere Informationen dazu finden Sie weiter unten.

Das Paket für 2026: Sieben Dateien, fünf Zeilen HTML-Code.

Hier finden Sie alles, was eine normale Website benötigt. Wenn eine Checkliste vorschreibt, dass mehr Elemente erstellt werden sollen, handelt es sich um unnötigen Ballast.

Die Dateien werden in das Stammverzeichnis Ihrer Website gelegt (insbesondere die Datei „favicon.ico“). Das HTML besteht aus einigen wenigen Link-Tags im Header: jeweils einer für die ICO-Datei und die beiden PNG-Dateien, einer mit dem Attribut „rel“ für „apple-touch-icon“ und einer mit dem Attribut „rel“ für „manifest“, die auf die Datei „webmanifest“ verweist.

favicon.ico – eine einzelne ICO-Datei, die Versionen mit den Größen 16, 32 und 48 Pixel enthält. Sie dient als Kompatibilitätsanker; weiter unten wird erläutert, warum sie weiterhin verwendet wird.
favicon-16x16.png und favicon-32x32.png – hochauflösende PNG-Dateien für die Verwendung als Symbol in Browser-Tabs und in der Lesezeichenleiste, optimiert für Standard- und hochauflösende Bildschirme.
apple-touch-icon.png mit den Abmessungen 180x180 – das Symbol für den Startbildschirm auf iOS-Geräten. Eine einzige Größe ist jetzt für alle aktuellen iPhones und iPads geeignet; iOS passt die Größe bei Bedarf an.
android-chrome-192x192.png und android-chrome-512x512.png – diese Dateien werden in der Manifestdatei referenziert und für den Android-Startbildschirm, den App-Umschalter und den Installationsbildschirm verwendet.
site.webmanifest – eine kleine JSON-Datei, die die beiden Android-Symbole sowie den Namen Ihrer App und die Designfarbe enthält. Sie ist erforderlich, damit die Android-Symbole erkannt und die Website als installierbare Anwendung behandelt werden können.
Optional: Ein SVG-Favicon kann über ein Link-Tag mit dem Typ „image/svg+xml“ eingebunden werden. Es passt sich perfekt an und kann sich mithilfe einer eingebetteten Media-Query für dunkle Tab-Designs neu gestalten. Behalten Sie jedoch die PNG- und ICO-Alternativen bei.

Warum das Favicon-Symbol einfach nicht verschwinden will.

Das ICO-Format ist ein Format für Windows aus den 1990er Jahren, und dennoch wäre es im Jahr 2026 ein Fehler, darauf zu verzichten. Der Grund dafür ist, dass Browser, Webcrawler, RSS-Reader und unzählige Scraper standardmäßig die Datei /favicon.ico im Stammverzeichnis Ihrer Website anfordern, ohne Ihr HTML überhaupt zu lesen – jedes Webserver-Protokoll zeigt einen stetigen Strom dieser Anfragen. Wenn die Datei fehlt, erhalten sie eine 404-Fehlermeldung, und Ihr Symbol wird in diesen Kontexten leer angezeigt.

Das Format hat auch einen cleveren Trick: Eine einzelne .ico-Datei ist ein Container, der mehrere Größen gleichzeitig speichern kann. Eine korrekte favicon.ico-Datei enthält intern Bilder mit den Größen 16, 32 und 48 Pixel, und das Programm, das sie ausliest, wählt die am besten passende Größe aus, anstatt eine falsche Größe zu vergrößern oder zu verkleinern, was zu einem unscharfen Ergebnis führen würde. Deshalb ist eine favicon.ico-Datei, die aus einer einzelnen PNG-Datei in einer bestimmten Größe konvertiert wurde, eine Verschlechterung – kleine Darstellungen werden bei Bedarf in der Größe angepasst und verlieren dabei ihre Schärfe.

Daher lautet die praktische Regel: Stellen Sie eine Favicon-Datei im Format „favicon.ico“ in verschiedenen Größen im Stammverzeichnis bereit, damit sie von allen Anwendungen, die dies gemäß den üblichen Konventionen anfordern, abgerufen werden kann. Stellen Sie die PNG-Dateien mit den Größen 16 und 32 Pixel über Link-Tags für moderne Browser bereit, da diese diese bevorzugen.

Die iOS-Falle: Transparenz wird zur Dunkelheit.

Das apple-touch-icon hat eine scharfe Kante, die fast jeden einmal trifft. iOS legt transparente Icons nicht auf einen ansprechenden Hintergrund – stattdessen füllt es die transparenten Bereiche mit festem Schwarz. Ein Logo mit transparentem Hintergrund sieht ansonsten überall gut aus, erscheint auf dem iPhone-Startbildschirm jedoch als schwarzes Quadrat mit einem schwebenden Symbol.

Die Lösung besteht darin, das Symbol vor dem Export auf einer bestimmten Hintergrundfarbe zu platzieren: weiß, die Farbe Ihrer Marke oder eine andere Farbe, die Sie bewusst wählen. iOS rundet dann die Ecken selbst ab. Runden Sie die Ecken also nicht vorher ab, da ein bereits abgerundetes Symbol erneut zugeschnitten wird und in den Ecken dunkle Bereiche sichtbar werden.

Lassen Sie dem Logo auch etwas Freiraum: Da iOS eine eigene Art von Eckmaske verwendet, werden Grafiken, die den Rand der 180x180 Pixel großen Fläche berühren, abgeschnitten. Es ist ratsam, das Logo ungefähr in der Mitte, also in etwa 80 Prozent der Fläche, zu platzieren. Außerdem wirkt es so als App-Symbol besser.

Was ist überholt (vergessen Sie das)?

Alte Favicon-Markups verursachen selten Probleme, aber sie verlangsamen das Laden jeder Seite und zwingen die Entwickler dazu, nach Bilddateien zu suchen, die niemand verwendet. Folgendes kann entfernt werden:

Die Dateien „browserconfig.xml“ und die Meta-Tags „msapplication-TileColor“ bzw. „TileImage“ sind nicht mehr relevant. Sie dienten dazu, die Kacheln auf dem Startbildschirm von Windows 8 und in Internet Explorer 11 zu gestalten. Beide sind inzwischen veraltet.
apple-touch-icon-precomposed. Dadurch wurde der Glanzeffekt, den iOS 6 den Symbolen verlieh, unterdrückt. Mit iOS 7 im Jahr 2013 verschwand dieser Glanz; das einfache apple-touch-icon-Attribut ist alles, was Sie benötigen.
Die Größen für das Apple-Touch-Symbol sind: 57, 72, 76, 114, 120, 144, 152. Diese entsprachen den spezifischen Auflösungen älterer iPhone- und iPad-Modelle. Ein einzelnes Symbol mit den Maßen 180x180 ist für alle aktuellen Geräte geeignet.
„rel shortcut icon“ war eine Eigenheit des Internet Explorer und nie ein Standard. Die einfache Variante „rel icon“ funktioniert seit über einem Jahrzehnt überall einwandfrei.
Safari verwendet für angeheftete Tabs das normale Favicon, daher ist die monochrome Maskendatei unnötig.
PNG-Verknüpfungstags mit den Größen 96, 128, 196 und 228 Pixeln für ältere Versionen von Chrome und Opera. In Android wurden diese durch Manifest-Symbole ersetzt; auf Desktop-Computern waren sie nie erforderlich.

Entwurf einer Marke, die 16 Pixel übersteht

Fragen zur Formatierung sind die einfachere Aufgabe. Die größere Herausforderung besteht darin, dass Ihr Symbol auch in der Größe 16x16 Pixel gut aussehen muss, denn ein Logo mit 256 Pixeln wird in dieser Größe zu einem verschwommenen Fleck. Einige Regeln können dabei helfen.

Vereinfachen Sie das Design konsequent. Verwenden Sie das Symbol aus Ihrem Logo und nicht den Schriftzug – Text ist bei einer Größe von weniger als etwa 32 Pixeln kaum lesbar, es sei denn, es handelt sich um ein oder zwei Buchstaben. Wenn Ihre Marke typografisch geprägt ist, erzielt ein Monogramm aus einem einzelnen Buchstaben auf einem einfarbigen Hintergrund immer bessere Ergebnisse als ein verkleinertes, vollständiges Logo.

Bevorzugen Sie klare Formen und einen hohen Kontrast gegenüber feinen Details. Dünne Linien werden bei kleinen Größen kaum sichtbar, und subtile Farbverläufe gehen in einem Hintergrundrauschen unter. Überprüfen Sie, wie das Symbol sowohl auf einem hellen als auch auf einem dunklen Tab-Hintergrund aussieht. Ein dunkles, marineblaues Symbol verschwindet in einem dunklen Design, es sei denn, es hat einen helleren Rand, einen farbigen Hintergrund oder eine SVG-Variante, die die Farben mithilfe einer Regel für bevorzugte Farbschemata ändert.

Betrachten Sie abschließend das Ergebnis bei 100-Prozent-Zoom, nicht vergrößert in Ihrem Designtool. Eine Vorschau in Tabulatorgröße ist die einzige ehrliche Vorschau.

Erstellen Sie das gesamte Design anhand eines einzigen Logos – und zwar direkt im Browser.

Für all dies benötigen Sie weder Photoshop noch eine komplexe Befehlszeilenanwendung wie ImageMagick. Der Favicon-Generator von FileTinker nimmt ein einzelnes Bild und erstellt in einem einzigen Schritt das oben beschriebene vollständige Paket: die Favicon-Datei „favicon.ico“ in verschiedenen Größen (16, 32 und 48 Pixel), die PNG-Dateien „favicon-16x16.png“ und „favicon-32x32.png“, eine „180x180 apple-touch-icon.png“-Datei, die auf einem farbigen Hintergrund platziert wird, damit sie auf iOS-Geräten nicht schwarz dargestellt wird, sowie die Dateien „android-chrome-192x192.png“ und „android-chrome-512x512.png“, eine „site.webmanifest“-Datei, die die Android-Symbole verknüpft, und ein Code-Snippet, das Sie einfach kopieren und einfügen können, zusammen mit den entsprechenden Link-Tags. Alles wird als eine einzige ZIP-Datei bereitgestellt, und die Verarbeitung erfolgt vollständig in Ihrem Browser – das Logo verlässt Ihren Computer also nie.

Beginnen Sie mit der größten und besten Version Ihres Logos, die Sie haben; ideal sind 512 Pixel oder mehr, da die maximale Ausgabegröße 512x512 beträgt und das Hochskalieren einer kleinen Vorlage zu einem unscharfen Ergebnis führt. Wenn die Vorlage nicht quadratisch ist, bietet der Generator die Optionen „Ausfüllen“ und „Anpassen“ an: „Ausfüllen“ füllt den gesamten Bildbereich aus und schneidet überstehende Teile ab, während „Anpassen“ das gesamte Bild innerhalb des Bereichs anpasst und den Rest mit der von Ihnen gewählten Hintergrundfarbe ausfüllt. Um präzise steuern zu können, welcher Teil eines breiten Logos erhalten bleibt, sollten Sie das Logo zunächst selbst mit dem Zuschneidewerkzeug quadratisch zuschneiden und dann das quadratische Bild in den Generator einfügen.

Wählen Sie die Hintergrundfarbe bewusst aus, auch wenn Ihr Logo keine Transparenz aufweist – denn diese Farbe sehen iOS-Nutzer hinter Ihrem Logo und sie füllt den Bereich aus, der durch das Seitenverhältnis entsteht. Entpacken Sie dann das Paket in das Stammverzeichnis Ihrer Website, fügen Sie den Code-Ausschnitt in den Header ein und veröffentlichen Sie ihn. Wenn Sie nur ein einzelnes .ico-Symbol für ein Nebenprojekt benötigen, wandelt der Bildkonverter in Sekundenschnelle ein PNG-Bild in ein ICO-Symbol um, wobei ein einzelnes Symbol in einer bestimmten Größe erstellt wird. Für alles, was öffentlich sichtbar ist, lohnt sich jedoch die Verwendung des vollständigen Pakets, auch wenn dies eine zusätzliche Minute dauert.