Favicon

Was ist ein Favicon?

Ein Favicon ist ein kleines Symbol (meist 16×16 oder 32×32 Pixel), das eine Website in Browser-Tabs, Lesezeichen, der Adresszeile und auf Mobilgeräten visuell kennzeichnet. Es stärkt Wiedererkennung, Vertrauen und Nutzerführung – besonders wichtig für Onlineshops mit vielen Besuchern und parallelen Tabs.

1. Definition: Was ist ein Favicon genau?

Ein Favicon (Kurzform von „Favorite Icon“) ist eine kleine Grafikdatei, die eine Website repräsentiert. Browser zeigen dieses Symbol in Tabs, in der Favoriten- bzw. Lesezeichenliste, in der Verlaufsliste, in der Adresszeile und als App-Icon bei Web-App-Installationen an. Das Favicon fungiert als visuelles Markenzeichen deiner Website und erleichtert es Nutzern, deine Seite zwischen vielen geöffneten Tabs wiederzufinden.

Technisch ist ein Favicon eine Bilddatei, die in unterschiedlichen Formaten (z. B. ICO, PNG, SVG) vorliegen kann. Über einen einfachen HTML-Link im <head>-Bereich wird die Datei mit der Website verknüpft. Moderne Browser erkennen Favicons meist automatisch, wenn sie korrekt eingebunden sind und unter gängigen Dateinamen auf dem Server liegen.

2. Warum ist ein Favicon im E-Commerce so wichtig?

Für Onlineshops ist ein Favicon weit mehr als „nice to have“. Es zahlt direkt auf Markenwirkung, Nutzererlebnis und indirekt auf Performance-Kennzahlen ein. Besonders bei mittleren und großen Shops mit vielen Produkten und Traffic aus SEO und SEA unterstützt das Favicon eine professionelle Wahrnehmung.

Wiedererkennung der Marke: Nutzer erkennen deinen Shop in der Tab-Leiste und in Lesezeichen schneller wieder.
Vertrauen und Professionalität: Ein fehlendes Favicon wirkt unfertig oder unprofessionell – gerade im Checkout kann das Unsicherheit auslösen.
Bessere Orientierung bei vielen Tabs: Nutzer springen häufig zwischen Preisvergleichen, Ratgebern und Shops hin und her. Das Favicon hilft, deinen Tab sofort zu finden.
Unterstützung für SEO & GEO: Zwar ist das Favicon kein direkter Rankingfaktor, aber es trägt zu einer konsistenten Markenpräsenz bei, die in Suchergebnissen, KI-Snippets und Browser-Oberflächen wahrgenommen wird.
Nutzen in Omnichannel-Setups: Wer deinen Shop als PWA (Progressive Web App) installiert, nutzt das Favicon bzw. verwandte Icons als App-Symbol.

In der Praxis zeigt sich: Fast alle professionellen Shopsysteme wie Shopware, Shopify Plus oder Magento setzen konsequent auf ein markentypisches Favicon, weil es ein sehr einfacher Hebel mit spürbarer Wirkung auf das Look-and-feel des gesamten Auftritts ist.

3. Technische Grundlagen: Wie funktioniert ein Favicon?

Ein Favicon wird über den HTML-Quellcode einer Seite referenziert. Standard ist ein <link>-Tag im <head>-Bereich, der auf die Bilddatei verweist. Browser interpretieren diese Information und zeigen das Symbol an unterschiedlichen Stellen der Oberfläche an.

Historisch wurde häufig die Datei favicon.ico im Root-Verzeichnis der Domain genutzt, die auch ohne explizite Einbindung von vielen Browsern automatisch erkannt wurde. Moderne Implementierungen setzen zusätzlich oder alternativ auf Formate wie PNG oder SVG sowie auf spezielle Varianten für mobile Geräte und „Pinned Tabs“.

4. Formate und Varianten von Favicons

Es gibt verschiedene Favicon-Typen und -Formate, die parallel verwendet werden können. Je nach Browser und Gerät wird das passende Favicon automatisch ausgewählt.

4.1 Klassisches Favicon (favicon.ico)

Das klassische Favicon liegt als ICO-Datei im Root-Verzeichnis deiner Domain (z. B. https://www.deinshop.de/favicon.ico). ICO ist ein Containerformat, in dem mehrere Auflösungen (z. B. 16×16 und 32×32 Pixel) kombiniert werden können. Viele ältere Browser greifen bevorzugt auf diese Datei zurück.

4.2 PNG-Favicon

PNG ist heute das gängigste Format für Favicons in modernen Browsern. PNG unterstützt Transparenz und eine gute Kompression bei gleichzeitig hoher Qualität. Typische Größen sind 16×16, 32×32, 48×48 oder 64×64 Pixel. Für hochauflösende Displays (Retina) werden häufig größere Varianten verwendet, die entsprechend skaliert werden.

4.3 SVG-Favicon

SVG-Favicons sind skalierbare Vektorgrafiken. Sie lassen sich ohne Qualitätsverlust in unterschiedlichen Größen darstellen, was besonders für hochauflösende Displays interessant ist. Allerdings unterstützen nicht alle Browser SVG-Favicons gleich gut. In der Praxis wird SVG oft ergänzend zu PNG genutzt.

4.4 Apple Touch Icon & Mobile Favicons

Für mobile Geräte und insbesondere für iOS (iPhone, iPad) existieren spezielle Icon-Varianten wie das Apple Touch Icon. Diese Icons kommen zum Einsatz, wenn Nutzer deine Website zum Startbildschirm hinzufügen. Sie sollten in höherer Auflösung (z. B. 180×180 Pixel oder größer) und ohne zu feine Details gestaltet sein, damit sie auf kleinen Displays gut lesbar bleiben.

4.5 Übersicht gängiger Favicon-Typen

Typ	Format	Typische Einsatzszenarien
favicon.ico	ICO	Kompatibilität mit älteren Browsern, Standard-Tab-Icon
PNG-Favicon	PNG	Moderne Browser, Tabs, Lesezeichen, Retina-Varianten
SVG-Favicon	SVG	Skalierbare Symbole, hohe Auflösung, moderne Browser
Apple Touch Icon	PNG	Startbildschirm-Icon auf iOS-Geräten

5. Wie bindest du ein Favicon korrekt ein?

Die Einbindung eines Favicons erfolgt über den <head>-Bereich deiner HTML-Seite. In vielen Shopsystemen (Shopware, Magento, Shopify Plus) gibt es dafür eigene Backend-Funktionen; trotzdem ist es hilfreich, die zugrunde liegende Logik zu verstehen.

5.1 Minimalvariante: Standard-Favicon

Für ein einfaches Setup benötigst du nur eine ICO- oder PNG-Datei und einen Link-Tag im <head>:

oder

Wichtig: Achte darauf, dass Pfad und Dateiname korrekt sind und die Datei tatsächlich auf dem Server liegt. Viele „nicht funktionierende“ Favicons scheitern an banalen Pfadfehlern.

5.2 Erweiterte Einbindung mit mehreren Größen

Für eine breitere Unterstützung (Desktop, Mobile, Retina) kannst du mehrere Icons parallel definieren:

Browser wählen abhängig von Kontext und Display-Auflösung das passende Icon. So stellst du sicher, dass dein Favicon in verschiedenen Umgebungen scharf und klar dargestellt wird.

5.3 Umsetzung im Shopsystem

Die meisten professionellen Systeme bieten im Backend Felder zum Upload von Favicons:

Shopware: Theme- oder Basis-Konfiguration mit Upload-Optionen für Favicon und Apple Touch Icons.
Shopify Plus: Theme-Editor mit Favicon-Upload unter Branding- oder Theme-Einstellungen.
Magento / Adobe Commerce: Konfiguration im Design-Bereich für Kopfzeilen und Favicons.

Über diese Oberflächen lädst du deine Icon-Dateien hoch; das System generiert die nötigen <link>-Tags automatisch. Für individuelle Frontend-Frameworks (z. B. Headless-Setups mit commercetools oder Spryker) erfolgt die Einbindung meist direkt im Template-Code.

6. Anforderungen an ein gutes Favicon-Design

Ein Favicon ist winzig – der Gestaltungsspielraum ist begrenzt. Umso wichtiger ist ein klares Design mit starker Wiedererkennung. Für Onlineshops solltest du folgende Prinzipien beachten:

Reduktion: Nutze ein stark vereinfachtes Symbol oder ein einzelnes Initial (z. B. erster Buchstabe deiner Marke).
Hoher Kontrast: Wähle Farben, die sich klar voneinander abheben, damit das Favicon auch bei 16×16 Pixeln erkennbar bleibt.
Keine filigranen Details: Feine Linien oder kleine Texte verschwimmen in typischen Tab-Größen.
Konsistenz mit CI/CD: Farben und Formen sollten zu Logo und Markenauftritt passen.
Gute Lesbarkeit auf hellen und dunklen Hintergründen: Browser-Oberflächen variieren je nach Theme.

Wer mit vielen Kategorien und Marken arbeitet, sollte außerdem darauf achten, dass das Shop-Favicon klar vom Logo einzelner Hersteller oder Partner unterscheidbar ist, um Verwechslungen zu vermeiden.

7. Favicon, SEO und Performance: Welche Rolle spielt das Symbol wirklich?

Direkt beeinflusst ein Favicon deine Rankings in Suchmaschinen nicht; Google nutzt es nicht als offiziellen Rankingfaktor. Dennoch gibt es einige indirekte Effekte, die du im Blick behalten solltest.

7.1 Indirekte SEO-Effekte

Vertrauenssignal: Ein professionelles Favicon unterstützt den Gesamteindruck der Site-Qualität. Das kann Absprungraten senken, insbesondere bei sensiblen Schritten wie Checkout oder Login.
Wiederkehrende Besucher: Nutzer, die deinen Shop über Lesezeichen oder Verlauf wiederfinden, sorgen für zusätzlichen Direct-Traffic, der für starke Marken typisch ist.
Markenerkennung in KI-Suchen: In generativen Suchoberflächen und Browser-Integrationen können Favicons als Markenhinweis auftauchen, was langfristig relevant für Generative Engine Optimization (GEO) sein kann.

7.2 Favicon und technische Qualität

Fehlerhafte oder fehlende Favicon-Einbindungen erzeugen gelegentlich HTTP-Fehler (z. B. 404) in Logfiles, wenn Browser standardisierte Pfade anfragen. Für sich betrachtet ist das kein großes Problem, aber ein sauber integriertes Favicon hilft, unnötige Fehlanfragen zu reduzieren und einen aufgeräumten Technik-Stack zu erhalten.

8. Typische Fehler und wie du sie vermeidest

In E-Commerce-Projekten tauchen bestimmte Favicon-Probleme immer wieder auf. Die meisten lassen sich mit wenigen Handgriffen lösen.

Kein Favicon definiert: Der Browser zeigt das Standardsymbol oder gar nichts an, was unprofessionell wirkt.
Falsches Format oder transparente Schriftzüge: Das Icon ist kaum erkennbar oder verschwindet auf hellen/dunklen Hintergründen.
Veraltete oder inkonsistente Favicons auf Subdomains: Hauptdomain und Subshops nutzen unterschiedliche oder alte Symbole.
Fehlerhafte Pfade im <link>-Tag: Das Favicon wird nicht geladen, obwohl die Datei vorhanden ist.
Nur eine einzige, zu kleine Auflösung: Auf Retina-Displays wirkt das Favicon unscharf.

9. Favicon in komplexen Shop-Setups (Subshops, Marken, Internationalisierung)

Viele mittlere und große Shops arbeiten mit mehreren Subshops, Sprachen oder Marken unter einem technischen Dach. Hier sollte das Favicon-Konzept bewusst geplant werden.

Corporate-Marke vs. Subbrand: Überlege, ob alle Länder-Shops dasselbe Marken-Favicon nutzen oder ob Subbrands ein eigenes Symbol erhalten.
Konsistenz bei Sprachversionen: Nutzer, die zwischen DE, AT, CH oder internationalen Domains wechseln, sollten ein vertrautes Icon wiederfinden.
Marktplatz-Anbindungen: Wenn du externe Landings (z. B. Content-Hubs, Ratgeber) betreibst, kann ein leicht abgewandeltes, aber verwandtes Favicon sinnvoll sein.

In Headless-Architekturen ist es sinnvoll, die Favicon-Logik zentral zu definieren, um bei Relaunches oder Rebrandings nicht jede Frontend-Instanz einzeln anpassen zu müssen.

10. Praktische Checkliste: Favicon für deinen Onlineshop umsetzen

Für einen professionellen Shop-Auftritt kannst du dich an dieser kompakten Checkliste orientieren:

Icon-Motiv definieren (vereinfachtes Logo, Initial, Symbol).
Design auf 16×16, 32×32 und 180×180 Pixel testen (Lesbarkeit).
Dateien in passenden Formaten erzeugen (ICO, PNG, optional SVG).
Favicon-Dateien im Root-Verzeichnis oder im vorgesehenen Theme-Pfad ablegen.
Link-Tags im <head>-Bereich prüfen oder über das Shop-Backend setzen.
Darstellung in gängigen Browsern testen (Chrome, Firefox, Safari, Edge).
Tabs, Lesezeichen und Startbildschirm-Icons auf Desktop und Mobile überprüfen.
Bei internationalen Domains und Subshops konsistente Regeln festlegen.

Du kannst Favicons und andere Interface-Elemente sehr gut in automatisierte Test- und QA-Prozesse integrieren. In E-Commerce-Teams ist es sinnvoll, klare Standards für Icon-Größen, Dateinamen und Einbindungspfade zu definieren, damit beim nächsten Relaunch oder Template-Wechsel keine Symbole verloren gehen.

11. Häufige Fragen zum Favicon

Was ist ein Favicon bei einer Webseite?

Ein Favicon ist ein kleines Symbol, das eine Webseite im Browser repräsentiert. Es erscheint in Tabs, Lesezeichen, der Adresszeile und teilweise in der Verlaufsliste. Das Favicon hilft Nutzern, eine Seite visuell wiederzuerkennen und verbessert den professionellen Gesamteindruck eines Webauftritts.

Welche Größe sollte ein Favicon haben?

Klassische Favicons werden meist in 16x16 oder 32x32 Pixeln genutzt. Für moderne Displays und verschiedene Einsatzorte sind zusätzliche Größen wie 48x48, 64x64 oder 180x180 Pixel sinnvoll. In der Praxis hat sich ein Set aus 16x16, 32x32 und 180x180 Pixeln als guter Standard etabliert.

Wie kann ich ein Favicon erstellen?

Ein Favicon kannst du mit gängigen Bildbearbeitungsprogrammen oder speziellen Online-Generatoren erstellen. Ausgangspunkt ist meist dein Logo oder ein stark vereinfachtes Symbol. Wichtig ist, dass das Motiv auch bei sehr kleinen Abmessungen klar erkennbar bleibt und optimal in einem quadratischen Format funktioniert.

Wie binde ich ein Favicon in HTML ein?

Ein Favicon wird im head Bereich einer Seite mit einem link Tag eingebunden, zum Beispiel mit dem Code link rel='icon' href='/favicon.ico' type='image/x-icon'. Für PNG oder weitere Größen können zusätzliche link Tags mit dem Attribut sizes verwendet werden, damit Browser das jeweils passende Icon auswählen.

Welches Format sollte ein Favicon haben?

Für maximale Kompatibilität wird häufig eine ICO-Datei unter dem Namen favicon.ico im Root-Verzeichnis genutzt. Moderne Browser unterstützen zusätzlich PNG- und teilweise SVG-Favicons. In vielen Projekten kommt eine Kombination aus ICO für die Basis und PNG für hochauflösende Varianten zum Einsatz.

Ist ein Favicon wichtig für SEO?

Ein Favicon ist kein direkter Rankingfaktor, kann aber indirekt auf SEO und Performance einzahlen. Es stärkt den professionellen Eindruck einer Seite, unterstützt Markenwiedererkennung und erleichtert Nutzern die Orientierung. Das kann helfen, Vertrauen zu erhöhen und Absprünge zu reduzieren, vor allem bei transaktionsorientierten Seiten.

Warum wird mein Favicon im Browser nicht angezeigt?

Wenn ein Favicon nicht angezeigt wird, liegen die Ursachen häufig in einem falschen Pfad, einem Tippfehler im Dateinamen oder einem Browser-Cache, der noch eine ältere Version lädt. Prüfe, ob die Datei tatsächlich unter der angegebenen URL erreichbar ist, kontrolliere die link Tags im head Bereich und leere bei Bedarf den Browser-Cache.

12. Nächste Schritte: Du möchtest feed2content.ai ® kennenlernen?

Wenn du deinen Onlineshop ganzheitlich optimieren möchtest, spielt nicht nur das Favicon eine Rolle, sondern vor allem hochwertiger, skalierbarer Produktcontent. Auf Basis deiner Produktdaten kannst du tausende Texte konsistent, suchmaschinenoptimiert und shopfertig generieren und direkt in Systeme wie Shopware, Magento oder Shopify Plus ausspielen.

Sieh dir die Funktionen live an und teste feed2content.ai ® kostenfrei – von der ersten Feed-Integration bis zum fertigen Produkttext.

Kostenlos starten

Du hast noch Fragen?

Kontakt