Lade idealerweise ein 180×180 px oder 192×192 px Bild hoch. Shopify skaliert dieses automatisch für kleinere Ansichten (32×32 px) herunter, nutzt die hohe Auflösung aber für Apple Touch Icons.
PNG mit transparentem Hintergrund ist der Gold-Standard. .ico ist veraltet, SVG wird von manchen Themes noch nicht nativ als Favicon-Upload unterstützt.
Du findest die Einstellung unter Vertriebskanäle > Onlineshop > Themes > Anpassen > Theme-Einstellungen > Logo/Favicon.
Das Favicon (Favorite Icon) ist eines der kleinsten, aber wichtigsten Branding-Elemente deines Shopify-Stores. Es sorgt für Wiedererkennungswert im Browser-Tab, in Lesezeichen und zunehmend in den mobilen Google-Suchergebnissen.
Es sind oft die kleinen Details, die über den professionellen Eindruck eines Onlineshops entscheiden. Ein fehlendes Favicon, oft erkennbar am generischen Weltkugel-Symbol des Browsers, signalisiert dem Nutzer unbewusst: „Dieser Shop ist noch nicht fertig“ oder „Hier fehlt die Liebe zum Detail“.
In diesem Guide tauchen wir tief in die technische und gestalterische Welt der Shopify Favicons ein. Wir klären nicht nur, wie du es hochlädst, sondern auch, wie du sicherstellst, dass es auf einem 27-Zoll-Monitor genauso scharf aussieht wie auf einem iPhone-Homescreen.
Der Begriff „Favicon“ setzt sich aus „Favorite“ und „Icon“ zusammen. Ursprünglich wurde es eingeführt, damit Nutzer ihre Lesezeichen (Favorites) im Internet Explorer schneller visuell zuordnen konnten. Heute ist die Bedeutung weitaus größer.
Ein Favicon ist dein Miniatur-Markenbotschafter. Es taucht an diversen Stellen auf:
Wenn du gerade erst dabei bist, deinen Shopify Shop zu erstellen, setze das Favicon direkt auf deine Prioritätenliste.
Shopify macht es Händlern relativ einfach, da das System viele Skalierungsprozesse im Hintergrund übernimmt. Dennoch führt blindes Hochladen oft zu unscharfen Ergebnissen.
Die „klassische“ Favicon-Größe ist 16×16 Pixel oder 32×32 Pixel.
Doch Vorsicht: Wenn du ein Bild in genau 32×32 Pixeln hochlädst, sieht es im Browser-Tab gut aus, wird aber pixelig, wenn ein Nutzer deinen Shop als Lesezeichen auf dem iPad speichert.
Moderne Shopify Themes (wie Dawn oder Prestige) nehmen dein Ausgangsbild und generieren daraus verschiedene Größen für unterschiedliche Endgeräte. Hier ist eine Übersicht der relevanten Auflösungen:
|
Verwendungszweck
|
Größe (Pixel)
|
Anmerkung
|
|---|---|---|
|
Standard Browser Tab
|
32x32
|
Das absolute Minimum für Desktop.
|
|
Google Suchergebnisse
|
48x48 (oder Vielfaches)
|
Google verlangt mind. 48x48px für die Indexierung.
|
|
Android Chrome Icon
|
192x192
|
Für "Add to Homescreen" auf Android.
|
|
Apple Touch Icon
|
180x180
|
Für iPhones und iPads (Retina Displays).
|
|
Empfohlener Upload
|
192x192 oder 180x180
|
Lade diese Größe hoch! Shopify rechnet automatisch runter.
|
Du könntest theoretisch auch ein 500px großes Bild hochladen. Shopify würde es verarbeiten. Allerdings achtet Shopify (und Google) sehr auf Ladezeiten. Ein unnötig riesiges Bild, das vom Browser erst runterskaliert werden muss, kann (wenn das Theme schlecht programmiert ist) wertvolle Millisekunden kosten. Bleibe daher im Bereich um 180px bis 192px im Quadrat.
Früher war .ico das einzige Format, das Browser verstanden. Es hatte den Vorteil, mehrere Größen (16px, 32px, 48px) in einer Datei zu speichern.
Heute sieht die Empfehlung für Shopify anders aus:
PNG (Empfohlen):
ICO (Veraltet):
SVG (Vektorgrafik):
Ein Logo, das auf einer Visitenkarte gut aussieht, funktioniert oft nicht als Favicon. Du hast extrem wenig Platz.
Die 3 goldenen Regeln für Favicon-Design:
Nike nutzt nur den Swoosh, nicht den Schriftzug. Facebook nutzt nur das „f“. Amazon nutzt nur den Pfeil (das Lächeln).
Du musst kein Grafikdesigner sein, um ein Icon zu erstellen, das auch in 16×16 Pixeln noch scharf aussieht. Es gibt mittlerweile einen etablierten Workflow, der KI-Kreativität mit einfacher Bildbearbeitung kombiniert.
Hier sind die besten Werkzeuge für deinen Favicon-Prozess:
Wenn du noch gar kein Logo hast oder ein spezifisches Symbol für deinen Tab suchst, sind KI-Tools der schnellste Weg. „Nano Banana“ oder spezialisierte Logo-Generatoren wie Logopony eignet sich hervorragend, um in Sekunden Dutzende Vektor-Ideen zu generieren.
Sie generieren oft direkt freigestellte oder flache Designs, die sich perfekt als Favicon eignen.
Prompthilfe: Nutze Begriffe wie „flat vector icon“, „minimalist“ und „solid colors“. Vermeide „detailed“ oder „photorealistic“.
Egal ob du ein KI-Bild generiert hast oder dein bestehendes Firmenlogo nutzen willst: Canva ist der Ort, an dem du das Favicon finalisierst.
So gehst du vor:
Wenn du keine Bildmarke (wie den Nike-Swoosh) hast, ist der Anfangsbuchstabe deiner Brand die beste Lösung.
Sobald deine Datei bereitliegt, ist die Einrichtung in wenigen Minuten erledigt. Der Prozess ist bei fast allen Shopify Themes identisch, da er über den zentralen Theme-Editor läuft.
Du hast das Bild hochgeladen, aber im Browser siehst du immer noch die Weltkugel oder das alte Icon? Hier sind die häufigsten Ursachen und Lösungen:
