So schnappst du dir das Favicon jeder Website (und warum deins wahrscheinlich kaputt ist)

Ein Favicon ist das kleinste Asset auf deiner Website und eines der meistgesehenen. Es sitzt im Browser-Tab, neben dem Lesezeichen, im Autovervollständigen-Dropdown, wenn jemand deine Domain aus dem Gedächtnis tippt, und (zunehmend) direkt neben deinem Eintrag in den Suchergebnissen und in KI-generierten Zusammenfassungen. Sechzehn Pixel, vielleicht zweiunddreißig, und es leistet pro Pixel mehr Branding-Arbeit als fast alles andere, was du besitzt.

Genau deshalb vernachlässigen es die Leute. Niemand plant Design-Zeit für ein 16x16-Quadrat ein. Die meisten Websites landen bei dem, was ihr CMS vor Jahren automatisch generiert hat, einem verzerrten Logo, das als grauer Fleck rüberkommt, oder in manchen Fällen bei gar nichts, nur dem generischen Globus-Symbol des Browsers an der Stelle, wo eine Markenkennung stehen sollte.

Es gibt zwei Situationen, in denen du dir tatsächlich ein Favicon schnappen musst. Erstens: Du baust ein Verzeichnis, eine Vergleichstabelle, eine Lesezeichen-Seite oder eine Konkurrenzanalyse, und du brauchst schnell einen Stapel Website-Icons, ohne vierzigmal einen Browser-Tab zu screenshotten. Zweitens: Du prüfst deine eigene Website und musst ehrlich sehen, wie dein Favicon in den Größen aussieht, die zählen, denn “sieht im Editor gut aus” und “sieht in einem Chrome-Tab bei 16px gut aus” sind nicht dieselbe Aussage.

Beide Fälle haben dieselbe Lösung.

Schnapp dir das Favicon jeder Website mit einem Klick

Nutze den Favicon Fetcher. Er ist kostenlos, läuft komplett in deinem Browser und macht genau eine Sache: Er verwandelt eine Liste von Domains in ein Raster einsatzbereiter Icons.

Der Ablauf ist bewusst langweilig:

1. Domains einfügen. Eine pro Zeile, ins Textfeld. Vollständige URLs, nackte Domains, mit www. oder ohne, egal, das Tool normalisiert alles davon. Füg eine Domain ein oder fünfzig.
2. Größe wählen. Buttons für 16, 32, 64, 128 und 256px. 64 ist standardmäßig ausgewählt, weil es der Sweet Spot ist, um die Qualität zu prüfen, ohne eine Datei anzufordern, die es nicht gibt (dazu unten mehr).
3. Abrufen. Jede Domain wird zu einer Karte: das Icon, der Domainname und drei Aktionen.
4. Kopiere die URL, kopiere den <img>-Tag oder lade das PNG herunter. Was auch immer du brauchst. Es gibt außerdem einen “Alle kopieren”-Button, der jede abgerufene URL auf einmal in deine Zwischenablage schiebt, was der schnelle Weg ist, wenn du eine Tabelle oder einen Verzeichniseintrag befüllst.

Nichts wird hochgeladen, nichts wird gespeichert, es gibt keine Anmeldeschranke. Du fügst ein, du rufst ab, du gehst mit einem Icon.

Ein ehrlicher Vorbehalt: Das Tool bezieht Icons auf dieselbe Weise wie dein Browser, wenn er das deklarierte Favicon einer Website nicht findet, nämlich indem es einen Favicon-Auflösungsdienst nach dem fragt, was er für diese Domain zwischengespeichert hat. Das bedeutet, es ist hervorragend, um “hol mir schnell ein Icon für die Zeile dieses Konkurrenten in meiner Vergleichstabelle”, aber nicht das Tool, zu dem du greifst, wenn du pixelgenauen Beweis für das <link rel="icon">-Setup deiner eigenen Website brauchst. Dafür prüfst du dein eigenes Markup direkt (nächster Abschnitt).

Wenn du irgendetwas Listenförmiges baust, ein Verzeichnis, eine “Best of”-Zusammenstellung, eine Einreichungsseite, dann sind Favicons das, was es überschaubar macht. Passendes Beispiel: Unser Directory Finder-Tool rendert genau aus diesem Grund ein kleines Icon neben jedem Eintrag. Eine Wand aus Textlinks ist vergesslich. Eine Wand aus Textlinks mit erkennbaren Icons daneben ist eine Wand, die du tatsächlich überfliegen kannst.

Der Favicon-Spickzettel

Hier ist, was 2026 tatsächlich angefordert und gerendert wird, heruntergekürzt auf das, was du brauchst, und nichts sonst.

Größen, die zählen:

• 16x16 - der Browser-Tab und die Lesezeichenleiste. Das ist die Größe, die die Leute zu prüfen vergessen. Details, die bei 64px gestochen scharf wirken, werden bei 16px zu Matsch.
• 32x32 - die Windows-Taskleiste, manche Lesezeichen-Manager und die Größe, die die meisten Browser inzwischen auf Displays mit höherer Pixeldichte tatsächlich standardmäßig anfordern.
• 48x48 - manche älteren Windows-Verknüpfungen und eine Handvoll Desktop-Integrationen. Niedrige Priorität, aber günstig mitzunehmen.
• 180x180 - das Apple-Touch-Icon. Das ist es, was auftaucht, wenn jemand deine Website zum Startbildschirm seines iPhones hinzufügt. Lass es weg, und iOS wird dein normales Favicon zuschneiden und skalieren, und zwar schlecht.
• 192x192 und 512x512 - PWA- und Android-Startbildschirm-Icons, deklariert in deinem Web-App-Manifest. Wenn du kein Manifest auslieferst, kannst du diese ignorieren. Wenn doch, mach sie richtig, sonst sieht dein “installiertes” Icon wie ein Fleck aus.

Formate, gerankt nach dem, was du tatsächlich nutzen solltest:

• PNG ist die Standardantwort. Jeder moderne Browser unterstützt es, es komprimiert gut, und es ist das, was du für jede oben genannte Größe generieren solltest.
• ICO ist das alte Multi-Resolution-Format (buchstäblich mehrere Bilder, gebündelt in einer einzigen .ico-Datei). Es lohnt sich immer noch, es als favicon.ico in deinem Root zu behalten, weil manche Crawler und sehr alte Browser automatisch darauf zurückfallen, selbst wenn kein <link>-Tag vorhanden ist, aber es ist ein Sicherheitsnetz, nicht dein Hauptformat.
• SVG-Favicons sind real und leichtgewichtig, und eine kleine Zahl von Browsern (überwiegend Chromium-basierte) unterstützt automatisches Hell-/Dunkel-Umschalten innerhalb einer einzigen SVG-Datei. Verlass dich noch nicht darauf als dein einziges Format; die Unterstützung ist inkonsistent genug, dass du trotzdem PNG-Fallbacks willst.

Die Tags, die tatsächlich genutzt werden:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Das ist die ganze praktische Liste. Du brauchst kein Dutzend <link>-Tags mit jeder erdenklichen Größe fest eingebaut; das ist ein Überbleibsel aus einer Ära mit weit stärker fragmentierter Browser-Unterstützung. Deck die Tab-Größen ab, deck Apple Touch ab, deck das Manifest ab, wenn du eine PWA hast, und du bist fertig.

Warum dein Favicon wahrscheinlich kaputt ist

Favicons scheitern still. Niemand reicht einen Fehlerbericht ein, weil dein Tab-Icon nicht geladen hat, sie nehmen deine Marke einfach nicht wahr. Hier ist, was üblicherweise los ist, grob geordnet danach, wie oft wir jedes davon sehen.

Falscher Pfad oder fehlende Datei. Der Klassiker: favicon.ico sitzt gar nicht wirklich im Root deiner Domain, oder ein Redesign hat Assets in einen neuen Ordner verschoben und niemand hat den <link>-Tag aktualisiert. Prüf es direkt: Ruf deinedomain.com/favicon.ico in einem Browser auf. Wenn du einen 404 bekommst, ist das dein Fehler, Ende der Diskussion.

Aggressives Caching. Browser cachen Favicons hart, manchmal für die Lebensdauer der Tab-Session oder länger, was bedeutet, dass du die Datei reparieren und trotzdem tagelang das alte, kaputte Icon sehen kannst. Wenn du gerade ein neues Favicon ausgeliefert hast und es nicht angezeigt wird, editier nicht in Panik weiter an deinem HTML herum. Mach einen Hard Refresh oder prüf es in einem privaten/Inkognito-Fenster, bevor du schlussfolgerst, dass der Fix nicht funktioniert hat.

Fehlende Größen, nicht fehlendes Icon. Das Favicon “existiert”, aber nur als eine niedrig aufgelöste Datei, also skaliert der Browser ein 16px-Bild hoch, um einen 32px- oder 180px-Slot zu füllen. Es sieht weich, verschwommen oder pixelig aus, und zwar genau an den Stellen, wo Schärfe am wichtigsten ist (hauptsächlich im Apple-Touch-Icon-Slot). Der Fix ist, das komplette Größenset zu generieren, nicht einfach dieselbe Datei erneut hochzuladen.

Keine Dark-Mode-Variante. Wenn dein Favicon eine dunkle Kennung auf transparentem Hintergrund ist, verschwindet es vor einer dunklen Browser-Tab-Leiste. Wenn es hell auf transparent ist, dasselbe Problem umgekehrt. Entweder gestaltest du etwas, das auf beiden standhält, oder du lieferst ein SVG mit einer prefers-color-scheme-Media-Query darin aus, für die Browser, die das unterstützen.

Blockiertes Hotlinking oder aggressive CDN-Regeln. Wenn dein CDN oder deine WAF unbekannte User Agents oder Referrer blockiert, können Favicon-Auflösungsdienste (und manche Browser unter strengen Datenschutzeinstellungen) statt deines Icons eine blockierte oder leere Antwort bekommen. Wenn dein Favicon funktioniert, wenn du direkt vorbeischaust, aber in Drittkontexten leer erscheint, prüf die Bot- und Hotlink-Regeln deines CDNs, bevor du annimmst, dass die Datei selbst das Problem ist.

FAQ

Kann ich ein Favicon schnappen, ohne etwas herunterzuladen? Ja. Nutze den Favicon Fetcher, füg die Domain ein und kopier die URL direkt. Kein Download nötig, außer du willst die PNG-Datei ausdrücklich lokal gespeichert haben.

Was ist der tatsächliche Unterschied zwischen favicon.ico und einem PNG-Favicon? .ico ist ein Container-Format, das mehrere Auflösungen in einer Datei bündeln kann, weshalb es der historische Standard wurde. PNG ist einfacher, komprimiert besser und ist das, worauf moderne <link rel="icon">-Tags typischerweise zeigen. Behalte ein .ico in deinem Root als Fallback; nutze PNG für alles, was du explizit in deinem <head> deklarierst.

Warum zeigt mein Favicon das falsche (alte) Icon? Fast immer Caching. Probier einen Hard Refresh oder ein Inkognito-Fenster, bevor du annimmst, dass dein Fix nicht gegriffen hat. Wenn es danach immer noch falsch ist, prüf, ob deine <link>-Tags auf den tatsächlich aktualisierten Dateipfad zeigen und nicht auf einen veralteten Dateinamen.

Brauche ich ein separates Favicon für Apple-Geräte? Ja, wenn du willst, dass es richtig aussieht. Ohne einen apple-touch-icon-Tag, der auf ein 180x180-Bild zeigt, generiert iOS automatisch eines aus deinem bestehenden Favicon, meist durch Zuschneiden oder Skalieren, und das Ergebnis sieht selten beabsichtigt aus.

Ist ein SVG-Favicon den Aufwand wert? Wert, es als Zusatz zu haben, nicht wert, sich allein darauf zu verlassen. Die Unterstützung für dynamische Hell-/Dunkel-SVG-Favicons ist über die Browser hinweg noch inkonsistent. Liefere PNG-Größen als deine Grundlinie aus und pack SVG obendrauf, wenn du den extra Feinschliff willst.