So fügen Sie ein Favicon in HTML hinzu (und welche rel-Tags Sie verwenden)

Ein Favicon zu einer Website hinzuzufügen sollte eine der einfachsten Aufgaben in der Webentwicklung sein, dennoch stolpern Entwickler häufiger darüber, als man erwarten würde. Zwischen widersprüchlichen Ratschlägen darüber, welche <link>-Tags zu verwenden sind, verwirrenden rel-Attributwerten und Browsern, die hartnäckig das alte Icon zwischenspeichern, kann es sich wie ein Ratespiel anfühlen, ein Favicon tatsächlich zum Erscheinen zu bringen.

Die Wahrheit ist, dass das Favicon-Setup für die meisten Websites auf eine einzige Datei und ein einziges HTML-Tag reduziert werden kann. Dieser Leitfaden schneidet durch das Rauschen und gibt Ihnen genau das, was Sie brauchen: das minimale praktische Setup, die nützlichsten rel-Tag-Variationen und klare Anweisungen zum Umgang mit Caching-Problemen, die Ihr neues Favicon unsichtbar machen.

Wenn Sie noch keine favicon.ico-Datei haben, erstellen Sie eine mit Any2ICO in weniger als einer Minute. Es akzeptiert PNG, SVG, JPG, WebP und andere Formate und erzeugt eine ICO-Datei mit mehreren Größen, die überall funktioniert. Kommen Sie dann hierher zurück, um sie in Ihr HTML einzubinden.

Das einfachste Favicon-Setup

Bevor wir uns Tag-Variationen und Sonderfälle ansehen, hier der Ansatz, der für die überwältigende Mehrheit der Websites funktioniert. Er erfordert eine Datei und eine Zeile HTML.

Platzieren Sie favicon.ico im Stammverzeichnis Ihrer Domain. Laden Sie Ihre favicon.ico-Datei hoch oder stellen Sie sie bereit, sodass sie unter https://ihredomain.de/favicon.ico erreichbar ist. Dies ist der Pfad, den Browser seit den späten 1990er Jahren standardmäßig prüfen. Auch ohne HTML-Tags, die darauf verweisen, finden und zeigen die meisten Browser automatisch ein Favicon an dieser Stelle an. Diese Konvention ist im Browser-Verhalten verankert und wird nicht verschwinden.

Fügen Sie ein Link-Tag in Ihrem HTML-Head hinzu. Während die Stammverzeichnis-Konvention allein funktioniert, beseitigt ein explizites Tag alle Mehrdeutigkeiten und gewährleistet konsistentes Verhalten über Browser, Subdomains und Single-Page-Anwendungen hinweg, bei denen das Dokumentenstammverzeichnis möglicherweise nicht direkt dem Serverstammverzeichnis zugeordnet ist.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ihr Seitentitel</title>
  <link rel="icon" href="/de/favicon.ico" sizes="any">
</head>
<body>
  <!-- Ihr Inhalt -->
</body>
</html>

Dieses einzelne <link>-Tag reicht für jeden großen Browser: Chrome, Firefox, Safari, Edge und sogar ältere Versionen des Internet Explorer. Das sizes="any"-Attribut teilt dem Browser mit, dass die ICO-Datei mehrere Auflösungen enthält und er die passendste für den aktuellen Kontext auswählen soll, sei es ein 16x16-Tab-Icon oder ein 32x32-Lesezeichen-Icon.

Dies ist das Setup, das wir für die meisten Websites empfehlen. Es ist einfach, zuverlässig und universell unterstützt. Sie können hier aufhören, und Ihr Favicon wird in praktisch jedem Szenario korrekt funktionieren.

Caching und "Favicon wird nicht angezeigt"

Sie haben Ihr neues Favicon bereitgestellt, die Seite aktualisiert, und das alte Icon starrt Sie immer noch aus dem Browser-Tab an. Dies ist kein Fehler in Ihrem Code. Es ist fast sicher ein Caching-Problem und bei weitem der häufigste Grund, warum Entwickler denken, ihr Favicon-Setup sei defekt, obwohl es eigentlich perfekt funktioniert.

Browser cachen Favicons aggressiv. Anders als reguläre Seitenressourcen werden Favicons oft separat und für viel längere Zeiträume zwischengespeichert. Chrome beispielsweise speichert Favicons in einer dedizierten Datenbank, die nicht immer auf eine normale Seitenaktualisierung reagiert. Firefox und Safari verhalten sich ähnlich. Das bedeutet, dass der Browser auch nach dem Ersetzen der Datei auf dem Server das alte Icon stunden- oder sogar tagelang weiter anzeigen kann.

Hartes Neuladen: Drücken Sie Strg+Umschalt+R (Windows/Linux) oder Cmd+Umschalt+R (macOS), um den Cache zu umgehen und alle Ressourcen vom Server neu zu laden. Dies funktioniert für die meisten Seitenressourcen, leert aber nicht immer den Favicon-Cache speziell.

Inkognito-Fenster: Öffnen Sie Ihre Website in einem privaten oder Inkognito-Browserfenster. Dies startet mit einem komplett leeren Cache und lädt das Favicon frisch vom Server. Wenn Sie im Inkognito-Modus das korrekte Favicon sehen, ist Ihr Setup korrekt und die normale Browsersitzung braucht einfach Zeit, um die Änderung zu übernehmen.

Browser-Cache manuell leeren: Wenn Inkognito das neue Favicon bestätigt, Ihre reguläre Sitzung aber immer noch das alte zeigt, leeren Sie die zwischengespeicherten Bilder und Dateien Ihres Browsers. In Chrome gehen Sie zu Einstellungen, Datenschutz und Sicherheit, Browserdaten löschen und wählen Bilder und Dateien im Cache. Nach dem Leeren laden Sie Ihre Website neu.

Cache-Busting-Abfragezeichenfolge hinzufügen: Als temporäre Maßnahme während der Entwicklung können Sie eine Abfragezeichenfolge anhängen, um den Browser zu zwingen, das Favicon als neue Ressource zu behandeln: <link rel="icon" href="/de/favicon.ico?v=2" sizes="any">. Erhöhen Sie die Versionsnummer bei jeder Favicon-Aktualisierung. Entfernen Sie die Abfragezeichenfolge, sobald Sie mit dem Icon zufrieden sind, oder behalten Sie sie als permanente Versionierungsstrategie bei.

Größen und Dateiwahl: ICO vs PNG

Sollten Sie eine ICO-Datei, eine PNG-Datei oder beides verwenden? Die Antwort hängt davon ab, wie viel Komplexität Sie in Ihrem Setup wünschen und welche Browser Sie unterstützen müssen.

ICO ist die universelle Wahl. Das ICO-Format ist seit dem Internet Explorer 5, der Favicons 1999 einführte, das Standard-Favicon-Format. Jeder Browser, der Favicons unterstützt, unterstützt ICO. Eine einzelne ICO-Datei kann mehrere Größen enthalten (16x16, 32x32, 48x48 und mehr), sodass der Browser immer die richtige Auflösung verfügbar hat, ohne dass Sie separate Dateien für jede Größe pflegen müssen. Für Einfachheit und maximale Kompatibilität ist ICO die sicherste Wahl.

PNG ist eine moderne Alternative. Alle aktuellen Versionen von Chrome, Firefox, Safari und Edge unterstützen PNG-Favicons über das <link rel="icon" type="image/png">-Tag. PNG-Favicons sind etwas einfacher zu erstellen (eine einzelne PNG-Datei in einer Größe), aber Sie brauchen für jede gewünschte Größe eine separate Datei und ein separates Tag. Das kann zwei oder drei zusätzliche Link-Tags in Ihrem HTML-Head bedeuten.

SVG ist die neueste Option. SVG-Favicons werden in Chrome, Firefox und Edge unterstützt, aber nicht in Safari (Stand Anfang 2025). Ein SVG-Favicon skaliert perfekt auf jede Größe, was für High-DPI-Displays attraktiv ist. Das Fehlen der Safari-Unterstützung bedeutet jedoch, dass Sie trotzdem einen ICO- oder PNG-Fallback benötigen.

Für die meisten Websites empfehlen wir den pragmatischen Ansatz: Verwenden Sie eine ICO-Datei mit mehreren Größen als primäres Favicon und fügen Sie optional ein PNG- oder SVG-Icon als Verbesserung hinzu. Dies gibt Ihnen universelle Kompatibilität durch die ICO-Datei und moderne Optimierung durch die zusätzlichen Formate. Für eine detaillierte Aufschlüsselung, welche Größen einzuschließen sind und warum, lesen Sie unseren Leitfaden Favicon-Größen erklärt.