Was ist ein Favicon und warum ist es für Ihre Website wichtig?

Ein Favicon (kurz für „Favorite Icon“, also „Favoriten-Symbol“) ist das kleine quadratische Bild, das eine Website in Browser-Tabs, Lesezeichen, Verlaufslisten, Google-Suchergebnissen, auf Handy-Startbildschirmen und in installierten Web-Apps repräsentiert. Es ist wichtig, weil es Ihrer Website auf einen Blick ein wiedererkennbares Gesicht gibt, sie zwischen vielen geöffneten Tabs leichter auffindbar macht, einen professionellen und vertrauenswürdigen Eindruck vermittelt und inzwischen in Google neben Ihrem Websitenamen angezeigt wird. Ohne Favicon sehen Besucher ein generisches Globus- oder Leerseiten-Symbol, und Ihr Server füllt seine Logs mit 404-Fehlern. Mit dem MakeFav-Favicon-Generator können Sie kostenlos ein komplettes Favicon-Set erstellen.

Was ist ein Favicon?

Ein Favicon ist eine winzige Markengrafik, in der Regel eine vereinfachte Version eines Logos oder ein einzelner Buchstabe bzw. ein Symbol, die Browser und andere Software von Ihrer Website abrufen und überall dort anzeigen, wo eine kompakte visuelle Kennung benötigt wird. In einem Desktop-Browser wird es meist mit 16 × 16 CSS-Pixeln dargestellt, die Datei selbst sollte jedoch größer sein, damit das Symbol auf hochauflösenden Bildschirmen scharf bleibt.

Technisch gesehen ist ein Favicon nur eine Bilddatei, die aus Ihrem HTML referenziert wird (oder an einem Standardort liegt) und die Clients getrennt vom Seiteninhalt herunterladen. Heute ist ein „Favicon“ selten eine einzelne Datei. Eine moderne Website liefert meist mehrere Versionen desselben Symbols aus, damit Browser, Suchmaschinen, iOS und Android jeweils ein passendes Format und eine passende Größe erhalten.

Eine kurze Geschichte des Favicons

Das Favicon geht auf den März 1999 zurück, als Microsoft den Internet Explorer 5 veröffentlichte. Der Browser erlaubte es, Seiten in einer „Favoriten“-Liste zu speichern, und suchte zusätzlich im Stammverzeichnis der Website nach einer kleinen Symboldatei namens favicon.ico, um sie neben jedem gespeicherten Eintrag anzuzeigen. Die Idee war einfach: Stellte eine Website /favicon.ico bereit, erschien das Symbol neben dem Lesezeichen.

Andere Browser übernahmen die Funktion bald, und das Browsen mit Tabs machte sie wesentlich nützlicher. Als Tabs zur wichtigsten Art der Navigation wurden, wandelte sich das Favicon von einer Lesezeichen-Dekoration zu einer zentralen Navigationshilfe. Im Lauf der Jahre entwickelte sich der Ansatz weiter:

• Frühe 2000er: Das Element <link rel="icon"> erlaubte es Websites, auf ein Symbol unter beliebiger URL zu verweisen statt nur im Stammverzeichnis, und PNG- und GIF-Dateien wurden von Nicht-IE-Browsern akzeptiert.
• 2010er: Apple führte das apple-touch-icon für iOS-Startbildschirme ein, und Android und Windows ergänzten eigene Konventionen wie Manifest-Icons und Kachelbilder.
• Heute: SVG-Favicons, Web-App-Manifeste, Dark-Mode-fähige Symbole und die Favicon-Anforderungen von Google für Suchergebnisse haben das Favicon zu einem kleinen, aber echten Bestandteil des technischen Setups einer Website gemacht.

Wo Favicons heute erscheinen

Ihr Favicon wird an deutlich mehr Stellen angezeigt als nur im Browser-Tab. Die wichtigsten sind:

• Browser-Tabs: der sichtbarste Ort, an dem das Symbol oft das Einzige ist, was Sie bei vielen geöffneten Tabs noch erkennen können.
• Lesezeichen und Favoriten: Das Symbol steht in Lesezeichenleisten und Menüs neben dem Seitentitel.
• Verlauf und meistbesuchte Seiten: Browser zeigen Favicons in Verlaufslisten und auf Neuer-Tab-Seiten an.
• Google-Suchergebnisse: Sowohl mobil als auch auf dem Desktop zeigt Google das Favicon einer Website neben Websitename und URL an.
• Startbildschirme: Wenn ein Besucher Ihre Website unter iOS oder Android zum Startbildschirm hinzufügt, wird das Touch-Icon bzw. Manifest-Icon zur app-ähnlichen Verknüpfung.
• Installierte PWAs: Eine Progressive Web App verwendet die Symbole aus ihrem Web-App-Manifest für das Startsymbol, den Startbildschirm (Splash Screen) und den Task-Wechsler.
• Windows-Kacheln und angeheftete Websites: Ältere Windows- und Edge-Versionen nutzten für angeheftete Websites definierte Kachelbilder; moderne Versionen verwenden meist Ihre Standardsymbole weiter.
• Link-Vorschauen in einigen Apps: Manche Chat- und Produktivitätstools (Slack ist ein bekanntes Beispiel) zeigen das Favicon einer Website neben einem aufgeklappten Link an. Die meisten Vorschauen stützen sich hauptsächlich auf Open-Graph-Bilder, doch das Favicon liefert oft das kleine Markenzeichen.

Warum ein Favicon für Ihre Website wichtig ist

Markenwiedererkennung

Menschen erkennen Farben und Formen schneller, als sie Text lesen. Ein einheitliches Symbol, das in Tabs, Lesezeichen und Suchergebnissen immer wieder auftaucht, schafft bei jedem Anblick Vertrautheit – kostenlose Markenpräsenz bei jedem Besuch.

Vertrauen und Glaubwürdigkeit

Ein fehlendes Favicon lässt eine Website unfertig wirken. Ein sauberes, korrekt dargestelltes Symbol ist ein kleines Zeichen dafür, dass sich jemand um Details kümmert, und stützt den Eindruck, dass die Website seriös ist. Es ist kein Sicherheitsmerkmal, und Phishing-Seiten können Symbole kopieren, aber ein leeres Standardsymbol trägt selten dazu bei, dass ein Unternehmen etabliert wirkt.

Klickrate in den Suchergebnissen

Weil Google das Favicon neben Ihrem Eintrag anzeigt, wird es Teil dessen, wie Ihr Ergebnis im Vergleich zur Konkurrenz aussieht. Google veröffentlicht keinen Ranking-Effekt für Favicons, und Sie sollten keinen Ranking-Schub erwarten. Der Nutzen liegt in der visuellen Wiedererkennung: Nutzer, die Ihr Symbol kennen, bemerken und wählen Ihr Ergebnis eher, besonders auf Mobilgeräten, wo die Ergebnisse kompakt sind.

Bedienbarkeit bei vielen geöffneten Tabs

Wenn ein Browser zwanzig Tabs geöffnet hat, werden Titel bis auf nichts gekürzt, und nur das Favicon bleibt übrig. Ein unverwechselbares Symbol ermöglicht es, Ihren Tab sofort zu finden und dorthin zurückzukehren, statt einen Duplikat-Tab zu öffnen oder ihn zu vergessen.

Professioneller Eindruck

Ein gut gestaltetes Favicon zeigt dieselbe Liebe zum Detail wie der Rest Ihrer Website. Ob Produktseiten, Dokumentation, Blogs oder Web-Apps – es ist eines der günstigsten Polier-Elemente, die Sie hinzufügen können.

Barrierefreiheit beim Finden von Tabs

Symbole helfen Nutzern, die visuell scannen statt zu lesen, darunter Menschen mit Legasthenie oder kognitiven Besonderheiten sowie alle, die schnell zwischen Aufgaben wechseln. Ein kontrastreiches Symbol mit einfacher Form lässt sich leichter herauspicken. Denken Sie aber daran: Ein Favicon ist eine Ergänzung – es ersetzt keinen klaren Seitentitel, auf den sich Screenreader und assistive Technologien verlassen.

Was passiert, wenn Sie kein Favicon haben

Browser fordern automatisch /favicon.ico im Stammverzeichnis Ihrer Domain an, selbst wenn Ihr HTML keines erwähnt. Existiert die Datei nicht, passiert Folgendes:

• Generisches Symbol: Besucher sehen im Tab und in den Lesezeichen ein Standard-Globus-, Dokument- oder leeres Symbol, was anonym wirkt.
• 404-Fehler in Ihren Logs: Jeder Browser, der die Datei anfordert, erzeugt eine fehlgeschlagene Anfrage. Auf stark besuchten Websites verursacht das Rauschen in Zugriffslogs, Fehlerüberwachung und Analytics und kann echte Probleme verdecken.
• Kein Symbol in den Google-Ergebnissen: Ohne gültiges, crawlbares Favicon zeigt Google neben Ihrem Eintrag seinen Standard-Platzhalter an.
• Verschwendete Anfragen: Browser versuchen es möglicherweise erneut und belasten Ihren Server dadurch geringfügig, aber sinnlos.

Selbst ein sehr einfaches Symbol ist besser als keines, denn es beseitigt die 404-Fehler und gibt Nutzern etwas Wiedererkennbares.

Favicon-Formate erklärt

Kein einzelnes Format deckt alle Plattformen ab, daher verwenden die meisten Websites eine kleine Auswahl an Dateien.

Ältere Windows-Kachelbilder (konfiguriert über browserconfig.xml) wurden für den Internet Explorer 11 und das alte Edge benötigt. Heute sind sie nur noch selten nötig, es sei denn, Sie müssen diese Umgebungen unterstützen.

Googles Favicon-Richtlinien für Suchergebnisse

Wenn Ihr Symbol in der Google-Suche erscheinen soll, befolgen Sie die veröffentlichten Anforderungen von Google:

• Größe: Das Bild muss quadratisch (1:1) sein und ein Vielfaches von 48 Pixeln betragen, etwa 48x48, 96x96 oder 144x144. Google skaliert es für die Anzeige dann auf 16x16 herunter. Die kleinste unterstützte Größe ist 8x8, empfohlen werden jedoch 48x48 oder größer.
• Formate: Jedes von Browsern unterstützte Format funktioniert, darunter ICO, PNG und SVG.
• Stabile URL: Ändern Sie die Favicon-URL nicht häufig. Eine stabile Adresse hilft Google, Ihr Symbol aktuell zu halten.
• Crawlbar: Sowohl die Favicon-Datei als auch Ihre Startseite müssen für den Googlebot zugänglich sein. Blockieren Sie sie weder in der robots.txt noch hinter einem Login.
• Eine Angabe pro Website: Das Symbol ist an die Startseite der Website gebunden, setzen Sie daher das <link>-Tag in den Head Ihrer Startseite.
• Repräsentativ und angemessen: Das Symbol sollte Ihre Marke widerspiegeln, und Google kann ein anstößiges oder irreführendes Symbol durch sein Standardsymbol ersetzen.

Nachdem Sie ein Favicon veröffentlicht oder geändert haben, kann es Tage bis Wochen dauern, bis Google es erneut crawlt und aktualisiert – erwarten Sie also keine sofortige Änderung.

So erstellen Sie schnell ein Favicon mit MakeFav

Sie brauchen weder Designsoftware noch eine Kommandozeile. Der MakeFav-Generator macht aus einem einzigen Ausgangsbild die oben beschriebenen Dateien.

1. Grafik vorbereiten. Verwenden Sie ein quadratisches Logo oder Symbol mit mindestens 512 x 512 px. Einfache Formen funktionieren am besten, da das Symbol mit 16 px betrachtet wird.
2. Hochladen auf der MakeFav-Startseite, oder öffnen Sie den Editor, um Bild, Hintergrund und Abstand vor dem Export anzupassen.
3. Vorschau des Ergebnisses in kleinen Größen sowie auf hellen und dunklen Hintergründen, um sicherzustellen, dass es lesbar bleibt.
4. Paket herunterladen. Es enthält die ICO-Datei, PNG-Größen, das Apple Touch Icon, Manifest-Icons und das HTML-Snippet zum Einfügen.
5. Dateien hochladen in das Stammverzeichnis Ihrer Website, sodass sie unter Pfaden wie /favicon.ico erreichbar sind.
6. HTML hinzufügen im <head> jeder Seite oder in Ihrem gemeinsamen Layout bzw. Template.
7. Überprüfen mit dem Favicon-Checker, dann Browser-Cache leeren und neu laden, um das neue Symbol zu sehen.

Beispiel für ein HTML-Snippet

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Das Attribut sizes="48x48" beim ICO-Link hilft Browsern, das SVG zu bevorzugen, wenn sie es unterstützen, während die ICO-Datei als Fallback erhalten bleibt. Das 96-px-PNG erfüllt Googles Regel „Vielfaches von 48“.

Beispiel für ein Web-App-Manifest

{
  "name": "Example Site",
  "short_name": "Example",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Wenn Sie mit Build-Pipelines arbeiten oder die Symbolerstellung automatisieren möchten, finden Sie die Entwickler-Ressourcen hilfreich.

Gestaltungstipps für ein Favicon, das funktioniert

• Halten Sie es einfach. Eine Form, ein Buchstabe oder ein kräftiges Monogramm schlägt ein detailreiches Logo, das bei 16 px zu Matsch wird.
• Setzen Sie auf starken Kontrast. Das Symbol muss sowohl in hellen als auch in dunklen Browser-Themes sichtbar sein. Eine farbige Hintergrundkachel hilft.
• Vermeiden Sie Text. Ein einzelner Anfangsbuchstabe ist in Ordnung; Wörter sind in dieser Größe unlesbar.
• Lassen Sie etwas Abstand für Maskable- und Icons mit abgerundeten Ecken, damit nichts Wichtiges abgeschnitten wird.
• Bleiben Sie konsistent mit Ihrem Logo und Ihren Markenfarben, damit das Favicon die Wiedererkennung verstärkt.
• Testen Sie auf echten Geräten und prüfen Sie, wie es in einem Tab, einem Lesezeichen und einem Google-Ergebnis aussieht.

Häufige Favicon-Probleme

Wenn Ihr Symbol nicht angezeigt wird, sind die üblichen Ursachen Caching, falsche Pfade und blockierte Dateien. Browser cachen Favicons sehr aggressiv, daher genügt oft ein erzwungenes Neuladen oder ein neues privates Fenster, um Aktualisierungen zu sehen. Prüfen Sie, dass die Datei-URL den Status 200 und den richtigen Content-Type zurückgibt und dass sich das <link>-Tag im <head> befindet. Stellen Sie für die Suche sicher, dass die robots.txt weder das Symbol noch die Startseite blockiert. Der MakeFav-Checker hilft Ihnen, solche Probleme schnell zu erkennen.

Häufig gestellte Fragen

Wofür steht Favicon?

Favicon ist die Kurzform von „favorite icon“ (Favoriten-Symbol). Der Name stammt vom Internet Explorer 5, der 1999 erstmals eine kleine Symboldatei verwendete, um Einträge in der Favoritenliste des Browsers zu schmücken. Der Begriff blieb bestehen, obwohl das Symbol inzwischen an vielen weiteren Stellen erscheint.

Hilft ein Favicon bei der SEO?

Ein Favicon ist kein direkter Rankingfaktor. Es erscheint jedoch in den Google-Ergebnissen auf Mobilgeräten und Desktop neben Ihrem Websitenamen und kann so die Markenwiedererkennung und die visuelle Attraktivität Ihres Eintrags verbessern, was indirekt Klicks unterstützen kann. Die Einhaltung der Google-Richtlinien sorgt dafür, dass das Symbol überhaupt angezeigt werden darf.

Welche Größe sollte ein Favicon haben?

Für die Google-Suche verwenden Sie ein quadratisches Bild, dessen Größe ein Vielfaches von 48 Pixeln ist, etwa 48x48 oder 96x96. Für eine breitere Abdeckung stellen Sie zusätzlich eine ICO-Datei, ein Apple Touch Icon mit 180x180 sowie Manifest-Icons mit 192x192 und 512x512 bereit. Ein SVG ist eine gute Ergänzung für die Skalierbarkeit.

Brauche ich favicon.ico noch, wenn ich PNG oder SVG verwende?

Es ist weiterhin empfehlenswert. Browser und einige Tools fordern standardmäßig /favicon.ico an, und ältere Software verlässt sich darauf. Eine ICO-Datei im Stammverzeichnis der Website verhindert 404-Fehler und bietet einen sicheren Fallback, wenn SVG oder PNG nicht unterstützt werden.

Warum aktualisiert sich mein Favicon nicht?

Browser und Suchmaschinen cachen Favicons sehr lange. Versuchen Sie ein erzwungenes Neuladen, ein privates Fenster oder das Leeren des Caches. Stellen Sie sicher, dass der Dateipfad stimmt und die neue Datei ausgeliefert wird. In der Google-Suche kann es Tage oder Wochen dauern, bis ein geändertes Symbol erneut gecrawlt und aktualisiert wird.