Ein Shopify Favicon ist das kleine Icon deines Shops, das im Browser-Tab, in Lesezeichen und teilweise in Google-Suchergebnissen angezeigt wird. Du richtest es über Onlineshop → Themes → Anpassen → Theme-Einstellungen ein, in wenigen Minuten und ohne Code. Die eigentliche Arbeit liegt nicht im Hochladen selbst, sondern darin, die richtige Auflösung, das richtige Format und ein paar Stellen zu treffen, an denen Shopify sich anders verhält, als die meisten Anleitungen vermuten lassen: Checkout, Kundenkonten, Google-Suchergebnisse und mehrere Markt-Domains.
Dieser Guide deckt beides ab: den schnellen Standard-Weg für alle, die einfach nur ein Icon hochladen wollen, und die technischen Details, die entscheiden, ob dein Favicon auch dort korrekt aussieht, wo es die meisten Shopbetreiber gar nicht erst prüfen.
Was ein Favicon für deinen Shop leistet
Ein Favicon ist mehr als Dekoration. Bei mehreren offenen Tabs ist es oft das einzige visuelle Element, über das Nutzer deinen Shop wiederfinden. In Google-Suchergebnissen steht es direkt neben deinem Seitentitel, ein austauschbares graues Standard-Icon wirkt dort schlicht weniger vertrauenswürdig als ein Icon mit deinem Branding, gerade im Vergleich zu Wettbewerbern, die diesen Punkt sauber gelöst haben.
Für Shopify-Shops kommt ein technischer Aspekt dazu: Das Browser-Tab-Icon ist nur eine von mehreren Icon-Varianten, die ein Shop theoretisch braucht, etwa auch ein größeres Icon fürs iPhone-Homescreen. Wie weit unten im Detail beschrieben, deckt Shopifys Standardfunktion davon tatsächlich nur die Browser-Tab-Variante ab.
Die richtige Shopify-Favicon-Größe: Wo Shopifys Standardfunktion aufhört
Shopifys eigene Anleitung nennt eine einfache Empfehlung: Die ideale Bildgröße ist 16×16 oder 32×32 Pixel, größere Bilder werden beim Hochladen automatisch auf 32×32 Pixel verkleinert. Ein Blick in den Code von Dawn, Shopifys eigenem Referenz-Theme, zeigt auch warum: Dawn bindet das Favicon im <head> fest mit image_url: width: 32, height: 32 ein, unabhängig davon, wie groß die Datei ist, die du hochlädst.
Für den Browser-Tab reicht das. An zwei Stellen wird es zum Problem:
| Einsatzort | Was ein 32×32-px-Favicon leistet |
|---|---|
| Browser-Tab | Ausreichend, das ist exakt die Zielgröße. |
| Google-Suchergebnisse | Google empfiehlt ausdrücklich Auflösungen über 48×48 px, ein 32×32-px-Icon kann dort unscharf wirken. |
| iPhone-Homescreen (Apple-Touch-Icon) | Nicht abgedeckt, Dawn liefert kein Apple-Touch-Icon aus. |
| Android-Homescreen | Nicht abgedeckt, aus demselben Grund. |
Das ist kein theoretisches Problem: Ein Shopify-Merchant hat genau diese Lücke 2023 direkt im Dawn-Repository als Feature-Request eingereicht, mit Verweis auf Googles Größenempfehlung und fehlende Apple-Touch-Icon-Unterstützung. Shopify hat die Anfrage geschlossen, ohne die Funktion nachzurüsten. Wer mehr will als ein scharfes Tab-Icon, braucht entweder ein Drittanbieter-Theme mit eigener Favicon-Logik oder ergänzenden Theme-Code, dazu weiter unten mehr.
Das richtige Dateiformat: PNG, ICO oder JPG?
Shopify akzeptiert für den Standard-Upload PNG, ICO und JPG. In der Praxis gibt es einen klaren Favoriten:
- PNG mit transparentem Hintergrund ist der Goldstandard. Dein Icon passt sich automatisch an helle und dunkle Browser-Oberflächen an, statt als weißes Quadrat aufzufallen.
- ICO wird von allen Browsern seit Jahrzehnten unterstützt und ist technisch unkritisch, bietet aber gegenüber PNG keinen Vorteil mehr.
- JPG funktioniert, unterstützt aber keine Transparenz. Für ein Favicon mit farbigem oder weißem Hintergrund unproblematisch, für ein freigestelltes Logo die schlechtere Wahl.
- SVG lässt sich über das Standard-Upload-Feld in den Theme-Einstellungen nicht hochladen. Möglich ist es nur über eine Anpassung im Theme-Code, dazu später mehr.
Schritt für Schritt: Favicon in Shopify hochladen
- Adminbereich öffnen. Gehe zu Onlineshop → Themes.
- Theme anpassen. Klicke bei deinem aktuell veröffentlichten Theme auf „Anpassen”.
- Theme-Einstellungen öffnen. Klicke links unten auf das Zahnrad-Symbol für die allgemeinen Theme-Einstellungen.
- Favicon-Bereich finden. Der Abschnitt heißt je nach Theme „Favicon” oder ist unter „Logo” mit aufgeführt.
- Bild hochladen. Wähle deine vorbereitete Datei aus, PNG mit transparentem Hintergrund. Shopify skaliert sie ohnehin automatisch auf 32×32 px für den Browser-Tab.
- Speichern. Ohne Klick auf „Speichern” oben rechts geht die Änderung verloren.
- Im Inkognito-Fenster prüfen. Öffne deinen Shop in einem privaten Browserfenster, um die Darstellung ohne alten Browser-Cache zu sehen.
Checkout und Kundenkonten: Die Grenze, die kaum jemand kennt
Wenn dich das an dieser Stelle stört, hast du auf den kleineren Plänen zwei realistische Optionen: eine Checkout-Branding-App aus dem Shopify App Store nutzen, die diese Lücke gezielt schließt, oder den Punkt bewusst zurückstellen, bis ein Wechsel auf Shopify Plus ohnehin ansteht.
Prüfe dein eigenes Favicon
Bevor du eine Datei hochlädst, kannst du sie direkt hier gegen die wichtigsten Anforderungen von Shopify und Google prüfen lassen:
Shopify Favicon Checker
Lade dein Favicon hoch und prüfe in Sekunden, ob es für Shopify und Googles Suchergebnisse geeignet ist. Die Datei verlässt deinen Browser nicht.
Fortgeschritten: Ein Favicon, das sich an den Dark Mode anpasst
Moderne Browser unterstützen SVG-Favicons, die sich per CSS-Media-Query automatisch an den Dark Mode des Nutzers anpassen, eine Technik, die im deutschsprachigen Shopify-Umfeld bislang kaum beschrieben wird. Ein einzelnes SVG-Icon kann so je nach Systemeinstellung eine helle oder dunkle Variante ausliefern.
Für die meisten Shops ist der Aufwand für diese Feinheit im Verhältnis zum Effekt gering, für Marken mit einem sehr designgetriebenen, technisch gepflegten Custom-Theme kann sie sich als kleines, konsequent zu Ende gedachtes Detail trotzdem lohnen.
Troubleshooting: Warum wird mein Favicon nicht richtig angezeigt?
| Symptom | Wahrscheinliche Ursache | Lösung |
|---|---|---|
| Altes oder gar kein Icon im Tab | Browser-Cache | Hard-Refresh (Strg/Cmd + Shift + R) oder Inkognito-Fenster testen |
| Änderung wird nach dem Speichern nicht übernommen | Theme überschreibt das Favicon per fest codiertem Tag in theme.liquid | theme.liquid nach einem hartcodierten <link rel="icon"> durchsuchen |
| Icon wirkt verpixelt | Zu kleine Ausgangsdatei hochgeladen | Master-Datei mit mindestens 180×180 px neu hochladen |
| Icon fehlt oder wirkt unscharf in Google-Suchergebnissen | Shopifys Standard-Favicon ist nur 32×32 px groß, unterhalb von Googles Empfehlung, oder Google hat die Seite noch nicht neu gecrawlt | Größeres Icon per Theme-Code ergänzen (siehe oben), danach URL-Prüfung in der Google Search Console nutzen |
| Icon fehlt im Checkout oder Kundenkonto | Nicht auf Shopify Plus, Branding-API nicht eingerichtet | Checkout-Branding-App nutzen oder Punkt bewusst zurückstellen |
| Icon auf dem iPhone-Homescreen unscharf oder gar nicht vorhanden | Dawn und viele andere Themes liefern kein Apple-Touch-Icon aus, unabhängig von der hochgeladenen Größe | <link rel="apple-touch-icon"> mit einer 180×180-px-Datei manuell in theme.liquid ergänzen |
| Icon auf einer zusätzlichen Markt-Domain falsch oder alt | Jede Domain cached ihr Favicon separat, Theme wurde dort nicht neu veröffentlicht | Theme für alle Markt-Domains neu veröffentlichen, Cache eines vorgeschalteten CDN/Proxys leeren |
Branding zu Ende gedacht, nicht nur beim Favicon?
Wir übernehmen Theme-Feinschliff, Checkout-Branding und technisches SEO für deinen Shopify-Shop aus einer Hand, damit Details wie diese nicht liegen bleiben.
Favicon-Audit-Checkliste
Shopify Favicon Checkliste
Alle Schritte für ein Favicon, das auf jedem Gerät und in jeder Suchoberfläche korrekt aussieht
Vorbereitung
- Master-Datei mit mindestens 180×180 px erstellt besser 512×512 px
- Format PNG mit transparentem Hintergrund gewählt
- Design bei 16×16 px Testgröße auf Erkennbarkeit geprüft
Upload & Einrichtung
- Favicon in den Theme-Einstellungen hochgeladen
- Änderung gespeichert und im Inkognito-Fenster geprüft
Erweiterte Prüfung
- Apple-Touch-Icon per Theme-Code ergänzt, falls gewünscht Dawn und viele Themes liefern keins automatisch
- Größeres Favicon (mind. 48×48 px) per Theme-Code für Google ergänzt
- Darstellung als Apple-Touch-Icon auf dem iPhone-Homescreen geprüft
- Darstellung in Google-Suchergebnissen nach Neu-Crawling geprüft Google Search Console → URL-Prüfung
- Darstellung im Checkout und Kundenkonto geprüft (nur relevant ab Shopify Plus)
Mehrere Märkte
- Favicon auf jeder Markt-Domain beziehungsweise Sprachversion einzeln geprüft
- Cache eines vorgeschalteten CDN oder DNS-Proxys geleert, falls vorhanden
Wenn du gerade ohnehin am Theme deines Shops arbeitest, lohnt sich ein Blick in unseren Artikel zum Shopify Theme wechseln, dort ist auch beschrieben, welche Branding-Einstellungen bei einem Theme-Wechsel neu geprüft werden sollten. Und wer an der generellen Sichtbarkeit seines Shops arbeitet, findet im Artikel Google-Ranking verbessern weitere Hebel, die über das Favicon hinausgehen.
Häufige Fragen zum Shopify Favicon
Für den Browser-Tab reicht Shopifys Standardgröße von 32×32 Pixeln, jede hochgeladene Datei wird ohnehin darauf herunterskaliert. Bewahre dein Icon trotzdem in mindestens 512 Pixeln auf, denn für ein größeres, google-taugliches Favicon oder ein Apple-Touch-Icon brauchst du zusätzlichen Theme-Code und dafür eine hochauflösende Ausgangsdatei.
PNG mit transparentem Hintergrund. Es passt sich automatisch an helle und dunkle Oberflächen an. ICO funktioniert ebenfalls, bietet aber keinen Vorteil gegenüber PNG. JPG unterstützt keine Transparenz.
Meist liegt es am Browser-Cache, ein Hard-Refresh oder ein Inkognito-Fenster löst das in den meisten Fällen. Bleibt das Problem bestehen, überschreibt möglicherweise ein hartcodierter Icon-Tag im Theme-Code die Einstellung.
Nur auf Shopify Plus, dort über die checkoutBrandingUpsert-Mutation der GraphQL Admin API. Auf Basic-, Shopify- und Advanced-Plänen bleibt im Checkout das Standard-Icon von Shopify sichtbar, dabei hilft nur eine Checkout-Branding-App aus dem App Store.
Nicht über das Standard-Upload-Feld in den Theme-Einstellungen. Ein SVG-Favicon, etwa für eine automatische Dark-Mode-Anpassung, lässt sich nur über eine manuelle Anpassung im Theme-Code umsetzen.
Häufigste Ursache ist Shopifys Standard-Favicon-Größe von 32×32 Pixeln, das liegt unter Googles empfohlenen 48×48 Pixeln. Abhilfe schafft ein zusätzliches, größeres Icon per Theme-Code. Möglich ist auch, dass Google die Seite noch nicht neu gecrawlt hat, das lässt sich über die URL-Prüfung in der Google Search Console gezielt anstoßen.
Ja, wenn dein Shop auf dem iPhone-Homescreen gespeichert werden soll. Shopifys Standard-Theme Dawn generiert kein Apple-Touch-Icon automatisch aus der hochgeladenen Favicon-Datei. Ein 180×180-Pixel-Icon lässt sich nur über einen zusätzlichen Link-Tag im Theme-Code ergänzen.
Die Einstellung selbst gilt shopweit, Browser cachen das Favicon jedoch pro Domain einzeln. Bei mehreren Markt-Domains über Shopify Markets solltest du die Darstellung nach einer Änderung auf jeder Domain separat prüfen.
Das hängt vom Crawling-Rhythmus deiner Domain ab und lässt sich nicht pauschal beziffern, oft einige Tage bis wenige Wochen. Über die URL-Prüfung in der Google Search Console lässt sich ein erneutes Crawling anstoßen.
Nein, das Hochladen eines Favicons über die Theme-Einstellungen ist auf jedem Shopify-Plan kostenlos enthalten. Kosten entstehen höchstens, wenn du eine zusätzliche App für Checkout-Branding einsetzt.
