Um ein Favicon zu Ihrer Website hinzuzufügen, platzieren Sie eine kleine Sammlung von Icon-Dateien im Stammverzeichnis Ihrer Website und verweisen Sie im HTML-<head> mit <link>-Tags darauf. Anschließend verweisen Sie mit einem kleinen Web-Manifest auf die größeren PWA-Icons. Das ist die gesamte Aufgabe im Jahr 2026, und sie umfasst mehr als die einzelne 16x16-Zeile, die die meisten Tutorials zeigen. Hier erfahren Sie genau, wie Sie Ihrer Website ein Favicon hinzufügen, damit es in Browser-Tabs, Lesezeichen, auf dem iOS-Startbildschirm und als Android-App-Icon erscheint, plus die Lösung für das Favicon, das sich hartnäckig weigert, angezeigt zu werden.
Die meisten Anleitungen hören bei einem einzigen link rel="icon"-Tag auf und erklären die Sache für erledigt. Dieses Tag funktioniert für einen Desktop-Browser-Tab und sonst nichts. Moderne Geräte verlangen eine ganze Familie von Größen und Formaten. Wenn Sie diese auslassen, erhalten Sie ein verschwommenes Tab-Icon, ein generisches graues Quadrat auf einem iPhone oder gar kein PWA-Icon. Diese Anleitung liefert Ihnen das vollständige Datei-Bundle, den exakten Head-Snippet und den Cache-Trick, der das häufigste Favicon-Problem löst.
Was ein Favicon 2026 wirklich braucht#
Ein Favicon war früher eine einzige 16x16 Pixel .ico-Datei. Diese Ära ist vorbei. Das Browser-Tab-Symbol ist heute nur einer von mehreren Orten, an denen Ihr Website-Symbol erscheint, und jede Oberfläche erwartet eine andere Datei.
Hier ist, was heute ein Symbol anfordert und was jeweils erwartet wird:
- Desktop-Browser-Tabs und Lesezeichen wünschen ein kleines ICO (16x16 und 32x32) plus idealerweise ein skalierbares SVG.
- Moderne Browser bevorzugen ein scharfes SVG-Favicon, das ohne Unschärfe auf jede DPI skaliert.
- iOS Safari (Startbildschirm und Verknüpfungen) möchte ein 180x180 PNG ohne Transparenz, das sogenannte Apple Touch Icon.
- Android Chrome und PWAs lesen ein
site.webmanifestund ziehen 192x192 und 512x512 PNG-Symbole, inklusive einer maskierbaren Variante.
Die gute Nachricht: Sie zeichnen nicht alle diese von Hand. Sie entwerfen ein quadratisches Master-Bild (512x512 oder größer, idealerweise mit transparentem Hintergrund) und exportieren den gesamten Satz daraus. Ein kostenloser Favicon-Generator nimmt dieses eine Quellbild und erzeugt in einem Durchgang alle Größen, das ICO, das SVG, das Manifest und den Head-Snippet, das ist der schnellste Weg durch diesen gesamten Prozess.
Wichtiger Tipp: Gestalten Sie Ihr Symbol als kräftige, einfache Form, die bei 16x16 lesbar ist. Feine Details und kleiner Text verschwinden im Favicon-Maßstab. Ein einzelner Buchstabe, ein Monogramm oder ein starkes Glyph schlägt jedes verkleinerte vollständige Logo.
Die genauen Dateien, die Sie benötigen#
Bevor Sie HTML anfassen, legen Sie diese Dateien im Stammverzeichnis Ihrer Website ab (dem gleichen Ordner wie Ihre index.html oder Ihr public/-Ordner in einem Framework). Dies ist der moderne Mindestsatz, der jedes Gerät abdeckt.
| Datei | Größe / Format | Wofür sie dient |
|---|---|---|
favicon.ico | 16x16 + 32x32, Multi-Resolution-ICO | Ältere Browser, Standard-Tab-Symbol |
favicon.svg | Skalierbare Vektorgrafik | Moderne Browser, scharf bei jeder DPI |
apple-touch-icon.png | 180x180 PNG, undurchsichtig | iOS-Startbildschirm und Verknüpfungen |
icon-192.png | 192x192 PNG | Android-Startbildschirm, PWA |
icon-512.png | 512x512 PNG | PWA-Splash, App-Stores, maskierbar |
site.webmanifest | JSON | Teilt Android/PWA mit, welche Symbole verwendet werden sollen |
Zwei Details sind wichtiger, als man denkt. Das favicon.ico sollte ein echtes Multi-Resolution-ICO mit 16x16- und 32x32-Frames sein, kein umbenanntes PNG, damit Browser die richtige Größe auswählen können. Und das Apple-Touch-Symbol muss undurchsichtig mit einem festen Hintergrund sein, da iOS Transparenz nicht berücksichtigt und transparente Bereiche mit Schwarz füllt, was Ihr Symbol ruiniert.
Warum favicon.ico vs. SVG kein Entweder-Oder ist#
Viele behandeln favicon.ico versus SVG als eine Wahl. Das ist es nicht. Sie liefern beide und lassen jeden Browser das nehmen, was er versteht.
- SVG ist die Zukunft: eine Datei, unendlich skalierbar, unterstützt Dunkelmodus-Anpassung mit einer Media Query innerhalb des SVG. Moderne Browser bevorzugen es.
- ICO ist das Sicherheitsnetz: Ältere Browser, einige Feed-Reader und bestimmte Plattformen fordern
/favicon.icoweiterhin namentlich an, selbst wenn Sie es nie verlinken.
Beide auszuliefern kostet ein paar Kilobyte und garantiert ein scharfes Symbol überall. Wenn Sie nur eines ausliefern, nehmen Sie das ICO für Kompatibilität, aber die moderne Best Practice ist beides.
So fügen Sie Ihrer Website Schritt für Schritt ein Favicon hinzu#
Dies ist die vollständige Anleitung von einem leeren <head> bis zu einem Favicon, das auf jedem Gerät funktioniert. Befolgen Sie die Schritte der Reihe nach.
Schritt 1: Erstellen Sie Ihr Master-Icon-Bild#
Beginnen Sie mit einem einzelnen quadratischen Bild mit mindestens 512x512 Pixeln und transparentem Hintergrund (PNG oder SVG). Halten Sie das Design einfach und kontrastreich, damit es auch nach der Verkleinerung auf 16 Pixel erkennbar bleibt. Wenn Ihr Logo breit oder detailreich ist, erstellen Sie ein vereinfachtes quadratisches Markenzeichen nur für das Favicon. Sie können jedes Quellmaterial mit einem kostenlosen Bildgrößenänderer vor dem Export zuschneiden und quadratisch machen.
Schritt 2: Generieren Sie jede Größe und jedes Format#
Geben Sie Ihr Master-Bild in einen Favicon-Generator ein, um das ICO, das SVG, das 180x180 Apple Touch Icon, die 192er und 512er PNGs sowie das Manifest zu erstellen. Manuelles Erstellen in einem Bildeditor ist langsam und fehleranfällig, insbesondere das Multi-Resolution-ICO, das die meisten Editoren nicht korrekt exportieren können. Molixas Favicon-Generator liefert das komplette Paket plus einen einsatzbereiten Head-Snippet. Wenn Sie bereits ein Vektor-Logo haben, können Sie es auch sauber mit einem SVG-zu-PNG-Konverter konvertieren, um pixelgenaue PNG-Icons in jeder Größe zu erhalten.
Schritt 3: Laden Sie die Dateien in Ihr Site-Root hoch#
Platzieren Sie alle generierten Dateien im Root- oder öffentlichen Verzeichnis Ihrer Website, sodass sie unter URLs wie https://yoursite.com/favicon.ico und https://yoursite.com/site.webmanifest erreichbar sind. Der Pfad /favicon.ico sollte insbesondere im Root auflösbar sein, da einige Clients ihn unabhängig von Ihrem HTML automatisch dort abrufen.
Schritt 4: Fügen Sie die Link-Tags in Ihren HTML-Head ein#
Fügen Sie diesen Block in den <head> jeder Seite ein (oder in Ihr gemeinsames Layout/Template, damit er seitenweit gilt):
<!-- Klassisches ICO für ältere Browser -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- Modernes skalierbares SVG -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- iOS-Startbildschirm -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA / Android-Manifest -->
<link rel="manifest" href="/site.webmanifest">
Das ist der vollständige moderne Favicon-Link-Set. Der Browser liest alle diese Angaben und wählt die beste Übereinstimmung für seinen Kontext aus. Sie benötigen kein separates Tag für jede PNG-Größe, da das Manifest die Android- und PWA-Icons verwaltet.
Schritt 5: Erstellen Sie das Web-Manifest#
Das site.webmanifest ist eine kleine JSON-Datei, die Android- und PWA-Installern mitteilt, welche Icons verwendet werden sollen. Eine minimale, korrekte Version sieht so aus:
{
"name": "Ihr Seitenname",
"short_name": "IhreSeite",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
],
"theme_color": "#ffffff",
"display": "standalone"
}
Der Eintrag purpose: "maskable" wird von den meisten Setups vergessen. Android schneidet Icons je nach Gerät in Kreise, Quadrate mit abgerundeten Ecken oder runde Quadrate. Ein maskierbares Icon hat einen Rand (eine Sicherheitszone), sodass der Zuschnitt Ihr Logo nie abschneidet. Ohne diesen Eintrag kann Android Ihr Icon in einer weißen Box verkleinern oder die Ränder abschneiden.
Schritt 6: Bereitstellen und auf echten Geräten überprüfen#
Pushen Sie Ihre Änderungen und überprüfen Sie das Favicon in einem Desktop-Tab, auf einem iPhone (zum Startbildschirm hinzufügen) und auf Android (installieren oder zum Startbildschirm hinzufügen). Wenn es nicht sofort angezeigt wird, liegt das fast immer am Caching und nicht an einem Codefehler, was im nächsten Abschnitt behandelt wird.
Warum Ihr Favicon nicht angezeigt wird (die echte Lösung)#
Dies ist der Teil, den die meisten einfachen Tutorials auslassen, und es ist der häufigste Grund, warum Leute denken, sie hätten die Einrichtung falsch gemacht. Ihr HTML ist wahrscheinlich in Ordnung. Das Problem ist, dass Browser Favicons extrem aggressiv cachen, aggressiver als fast jedes andere Asset.
Wenn ein Browser Ihr altes Favicon (oder das Fehlen eines solchen) lädt, kann er dieses Ergebnis tagelang behalten und Ihre neue Datei ignorieren, selbst nach einem normalen Seiten-Refresh. Sie laden also ein schönes neues Symbol hoch, laden die Seite neu und sehen immer noch das alte oder einen leeren Globus. So brechen Sie den Cache, in der Reihenfolge des Aufwands:
- Führen Sie einen harten Refresh der Seite mit Strg+Umschalt+R (Windows) oder Cmd+Umschalt+R (Mac) durch. Dies löscht viele, aber nicht alle Favicon-Caches.
- Fügen Sie einen Versions-Query-String zum Link hinzu, z.B.
href="/favicon.ico?v=2". Erhöhen Sie die Nummer bei jeder Änderung des Symbols, und der Browser behandelt es als neue Datei. - Rufen Sie die Favicon-URL direkt in der Adressleiste auf (
ihreseite.de/favicon.ico) und führen Sie dort einen harten Refresh durch, um einen neuen Abruf zu erzwingen. - Testen Sie in einem Inkognito-/Privatfenster, das Ihren vorhandenen Favicon-Cache ignoriert, um zu bestätigen, dass das neue Symbol tatsächlich live ist.
- Löschen Sie zwischengespeicherte Bilder in Ihren Browsereinstellungen, wenn alles andere auf Ihrem eigenen Rechner fehlschlägt.
Warnung: Verschwenden Sie keine Stunde damit, Ihre Link-Tags umzuschreiben, nur weil das Symbol "nicht aktualisiert wird". Öffnen Sie zuerst ein privates Fenster. Wenn das Favicon dort angezeigt wird, ist Ihr Code korrekt und Sie kämpfen nur mit einem veralteten Cache in Ihrem normalen Profil.
Der Versions-Query-String-Trick (?v=2) ist der professionelle Move. Er garantiert, dass beim nächsten Redesign Ihres Symbols jeder wiederkehrende Besucher das neue erhält, statt eines gecachten Relikts. Fügen Sie ihn von Anfang an hinzu, und Sie werden nie wieder ein Phantom-Favicon debuggen.
Ein Hinweis zu Transparenz und Hintergründen#
Zwei Transparenzregeln verwirren die Leute. Das Apple-Touch-Icon muss undurchsichtig sein, geben Sie ihm also eine solide Hintergrundfarbe, die zu Ihrer Marke passt. Das Favicon-SVG und die Browser-Tab-PNGs können einen transparenten Hintergrund behalten, was sowohl auf hellem als auch auf dunklem Browser-Chrome sauberer aussieht. Wenn man diese verwechselt, entsteht der klassische "schwarze Kasten auf dem iPhone"-Bug, bei dem ein transparentes Apple-Touch-Icon mit einer schwarzen Füllung versehen wird.
Favicons in Frameworks (Next.js, Vite, WordPress)#
Die Link-Tags sind überall gleich, aber wo sie platziert werden, unterscheidet sich je nach Stack.
- Next.js (App Router): Lege
favicon.ico,icon.svgundapple-icon.pngin dasapp/-Verzeichnis und Next generiert die Tags automatisch. Für das Manifest füge einemanifest.tsoder eine statischesite.webmanifestinapp/hinzu. - Vite / einfaches HTML: Lege die Dateien in
public/und füge den Link-Block in denheaddeinerindex.htmlein. Vite stelltpublic/unter der Site-Root bereit. - WordPress: Nutze die Site-Icon-Funktion unter Design, Customizer, Site-Identität für die Grundlagen oder füge den vollständigen Link-Block über das
header.phpdeines Themes oder ein Head-Injection-Plugin für vollständige Kontrolle hinzu. - Statische Site-Generatoren (Astro, Hugo, Eleventy): Platziere die Dateien im static/public-Ordner und füge den Link-Block zu deinem Basis-Layout hinzu, damit jede Seite ihn erbt.
Unabhängig vom Framework ändert sich die grundlegende Anforderung nicht: Die Icon-Dateien müssen auf Root-Ebene erreichbar sein und der Head muss auf sie verweisen. Wenn du diese PNG-Icons komprimierst, um sie klein zu halten, mache das ohne Qualitätsverlust mit einem kostenlosen Bildkompressor, damit das 512x512-Icon auf PWA-Splash-Screens scharf bleibt.
Häufig gestellte Fragen#
Was ist das absolute Minimum an HTML, um ein Favicon zu einer Website hinzuzufügen?
Im absoluten Minimum platzieren Sie eine favicon.ico im Stammverzeichnis Ihrer Website und fügen <link rel="icon" href="/favicon.ico"> in Ihren <head> ein. Das deckt einen einfachen Desktop-Browser-Tab ab. Aber es lässt iOS-, Android- und PWA-Symbole ungesetzt. Für jede ernsthafte Website sollten Sie daher zusätzlich die oben gezeigten SVG-, Apple-Touch-Icon- und Manifest-Tags einfügen.
Brauche ich im Jahr 2026 noch eine favicon.ico-Datei oder reicht SVG?
Sie sollten beides ausliefern. SVG ist schärfer und skaliert perfekt in modernen Browsern, aber einige ältere Browser und Clients fordern immer noch /favicon.ico namentlich an. Wenn Sie ein mehrfachauflösendes ICO als Fallback behalten, garantieren Sie ein Icon überall, und es kostet nur wenige Kilobyte.
Warum funktioniert mein Favicon im Inkognito-Modus, aber nicht im normalen Fenster?
Das ist Favicon-Caching, kein Code-Fehler. Ihr normales Browser-Profil hält eine veraltete gecachte Version, während das private Fenster frische Daten abruft. Führen Sie einen harten Refresh durch, fügen Sie einen ?v=2-Versionsstring zu Ihrem Link-Tag hinzu oder leeren Sie den Cache für Bilder, um das Update zu erzwingen. Wenn es im Inkognito-Modus angezeigt wird, ist Ihr HTML korrekt.
Welche Größe sollte das Apple-Touch-Icon haben und spielt Transparenz eine Rolle? Verwenden Sie ein 180x180 PNG mit einem soliden, deckenden Hintergrund. iOS unterstützt keine Transparenz bei Home-Bildschirm-Symbolen und füllt transparente Bereiche mit Schwarz, was das Aussehen ruiniert. Geben Sie ihm einen markenfarbigen Hintergrund, damit es auf dem Home-Bildschirm absichtlich aussieht.
Was ist ein maskierbares Icon und brauche ich eines?
Ein maskierbares Icon ist ein PWA-Icon mit zusätzlichem Padding (einer Sicherheitszone), damit Android es in einen Kreis, ein Quadrat mit abgerundeten Ecken oder ein abgerundetes Quadrat zuschneiden kann, ohne Ihr Logo zu beschneiden. Sie deklarieren es im Manifest mit "purpose": "maskable". Wenn Ihre Website als PWA installiert oder zum Android-Home-Bildschirm hinzugefügt werden kann, benötigen Sie eines, um ein beschnittenes oder eingerahmtes Icon zu vermeiden.
Wie generiere ich alle Favicon-Größen ohne Bildbearbeitungsprogramm? Laden Sie ein quadratisches Master-Bild (512x512 oder größer) in einen Favicon-Generator hoch. Dieser exportiert das ICO, SVG, Apple-Touch-Icon, PWA-PNGs und Manifest in einem Schritt, zusammen mit dem Head-Snippet. Das vermeidet die schwierigste manuelle Aufgabe, das Erstellen eines korrekten mehrfachauflösenden ICOs, das die meisten Bildbearbeitungsprogramme nicht richtig exportieren können.
So fügen Sie Ihrer Website ein Favicon hinzu (richtig gemacht)#
Wenn Sie im Jahr 2026 wissen, wie Sie Ihrer Website ein Favicon hinzufügen, gehen Sie über das einfache 16x16-Format hinaus: Liefern Sie das ICO und SVG für Browser, ein undurchsichtiges Apple Touch Icon für iOS, 192 und 512 PNGs plus ein maskierbares Icon in einem Webmanifest für Android und PWAs und referenzieren Sie sie alle in Ihrem <head>. Generieren Sie das vollständige Bundle aus einem Masterbild, hängen Sie ein ?v=2 an Ihre Link-Tags, damit zukünftige Änderungen den Cache leeren, und überprüfen Sie es auf echten Geräten. Tun Sie das einmal, und Ihr Icon sieht in jedem Tab, Lesezeichen und Startbildschirm scharf aus, ohne zukünftige Debugging-Sitzungen für Phantom-Favicons.
