Favicon für Shopify
Mit Shopify können Sie in Sekundenschnelle ein Favicon aus dem Theme-Editor hochladen. Jedes moderne Shopify-Theme stellt in den Theme-Einstellungen ein Favicon-Feld bereit, und das CDN von Shopify stellt das Symbol auf jeder Seite Ihres Shops bereit. Erstellen Sie zunächst mit favicon generator ein quadratisches 512×512 PNG – Shopify passt die Größe automatisch auf die erforderliche 32×32-Anzeigegröße an.
Ein Favicon ist eines der ersten Markensignale, das ein potenzieller Kunde sieht, wenn er mehrere Tabs öffnet. In Shopify-Shops erscheint das Favicon im Browser-Tab, in der Lesezeichenleiste und in der Adressleiste. Ein klares, wiedererkennbares Favicon stärkt das Markenvertrauen und hilft Käufern, Ihren Shop-Tab unter Dutzenden geöffneten Tabs schnell zu finden.
Jedes moderne Shopify-Theme (Dawn, Refresh und die meisten Premium-Themes) enthält ein Favicon-Feld im Theme Editor unter Theme-Einstellungen. Um darauf zuzugreifen, melden Sie sich bei Ihrem Shopify-Administrator an, gehen Sie zu Online-Shop > Themes und klicken Sie neben Ihrem Live-Theme auf Anpassen. Klicken Sie in der linken Seitenleiste auf „Themeneinstellungen“ (oder auf das Zahnradsymbol) und suchen Sie dann nach dem Abschnitt „Favicon“.
Shopify empfiehlt, für das Favicon-Feld ein quadratisches PNG mit 32×32 Pixeln hochzuladen. In der Praxis führt das Hochladen eines 512×512 PNG zu einem schärferen Ergebnis, da Shopify es auf 32×32 mit besserer Qualität heruntersampelt, als wenn Sie von einem 32×32-Original ausgehen. Beginnen Sie immer mit der größten quadratischen Quelle, die Sie haben – der Generator macht dies ganz einfach.
Nachdem Sie Ihr Favicon hochgeladen haben, klicken Sie oben rechts im Theme Editor auf Speichern. Shopify verarbeitet das Bild, lädt es in sein CDN hoch und verbreitet es innerhalb von Minuten auf jeder Storefront-Seite. Sie müssen Ihr Theme nicht erneut veröffentlichen oder andere Codeänderungen vornehmen.
Bei älteren oder stark angepassten Shopify-Themen wird möglicherweise kein Favicon-Feld in den Designeinstellungen angezeigt. In diesem Fall müssen Sie den Liquid-Code des Themes direkt bearbeiten. Öffnen Sie den Theme-Datei-Editor (Online-Shop > Themes > Code bearbeiten), suchen Sie die Datei theme.liquid und suchen Sie den Abschnitt „<head>“. Fügen Sie „<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>“ ein, nachdem Sie Ihre favicon.png in den Assets-Ordner des Themes hochgeladen haben.
Für Shopify-Shops im Theme-Framework 2.0 wird das Favicon über site.webmanifest verwaltet, das Shopify automatisch aus Ihren Theme-Einstellungen generiert. Wenn Ihr Shop eine Progressive Web App-Shell verwendet, enthält das Manifest von Shopify das Favicon als App-Symbol. Durch die Aktualisierung des Theme-Favicons wird automatisch das Manifest-Symbol aktualisiert – es ist keine zusätzliche JSON-Bearbeitung erforderlich.
Transparente Hintergründe funktionieren in Shopify-Favicons korrekt. Der Theme-Editor behält den PNG-Alphakanal beim Hochladen in das CDN bei. Wenn Ihr Logo jedoch einen weißen Hintergrund hat, wird es in Browser-Registerkarten im dunklen Modus mit einem weißen Kästchen angezeigt. Um dies zu vermeiden, exportieren Sie Ihr Logo vor dem Hochladen ohne Hintergrundfüllung.
Wenn Sie mehrere Shopify-Shops betreiben (ein übliches Setup für internationale Storefronts), muss für jeden Shop ein eigenes Favicon festgelegt werden. Das Favicon ist eine Einstellung pro Geschäft, keine Einstellung auf Shopify-Partner- oder Organisationsebene. Melden Sie sich beim Administrator jedes Shops an und wiederholen Sie die Theme Editor-Schritte.
Eine Cache-Ungültigmachung kann Favicon-Updates in Shopify verzögern. Das CDN von Shopify speichert Assets mit langen TTLs zwischen. Nach dem Ändern des Favicons kann es sein, dass Browser stundenlang weiterhin das alte Favicon anzeigen. Öffnen Sie ein privates/Inkognito-Fenster, um das aktualisierte Symbol ohne Cache-Interferenz anzuzeigen. Alternativ können Sie Ihren Browser anweisen, eine erzwungene Aktualisierung durchzuführen (Strg+Umschalt+R auf Windows, Befehl+Umschalt+R auf Mac).
Shopify fügt nativ kein apple-touch-icon- oder Web-App-Manifest-Link-Tag ein, es sei denn, Ihre Designvorlage enthält diese. Wenn Sie möchten, dass bei iOS-Startbildschirminstallationen Ihr Logo anstelle eines Seiten-Screenshots angezeigt wird, fügen Sie das apple-touch-icon-Tag manuell über Online-Shop > Designs > Code bearbeiten > theme.liquid hinzu. Platzieren Sie „<link rel='apple-touch-icon' size='180x180' href='{{ 'apple-touch-icon.png' | asset_url }}'>` im Abschnitt „<head>“ und laden Sie das 180×180 PNG in Assets hoch.
Für Shopify Plus-Shops können Sie das Checkout-Branding verwenden, um das Favicon im Checkout-Ablauf getrennt vom Haupt-Favicon im Schaufenster anzupassen. Das Checkout-Branding wird unter Einstellungen > Checkout und Konten > Anpassen konfiguriert. Dadurch wird auf Ihren Checkout-Seiten ein anderes Favicon als im Hauptshop angezeigt, was bei Mehrmarken-Setups nützlich ist.
Um zu überprüfen, ob Ihr Shopify-Favicon funktioniert, verwenden Sie live favicon tester und geben Sie die URL Ihres Shops ein. Der Tester bestätigt, dass das Symbol öffentlich zugänglich ist, und zeigt Ihnen, wie es bei 16, 32 und 48 Pixeln gerendert wird. Sehen Sie sich auch best favicon size an, um zu verstehen, welche zusätzlichen Größen Ihr PWA-Installationserlebnis verbessern würden.
Zu den häufigsten Shopify-Favicon-Fehlern gehören das Hochladen eines rechteckigen Logos, ohne es vorher auf ein Quadrat zuzuschneiden (erzeugt ein gequetschtes Symbol), das Hochladen eines sehr kleinen Bilds (Unschärfe auf Retina-Displays) und das Vergessen, nach dem Hochladen auf „Speichern“ zu klicken (die Änderung wird erst übernommen, wenn Sie es explizit speichern). Der favicon generator exportiert ein korrekt quadratisches PNG mit 512×512, bereit für den direkten Shopify-Upload.
So funktioniert es
- 1
Erzeugen Sie ein 512×512 großes Quadrat PNG
Verwenden Sie den [favicon generator](tool:favicon-generator) mit Ihrem Logo oder Markenzeichen. Exportieren Sie die 512×512 PNG aus dem Download-Paket – dies ist die richtige Eingabegröße für Shopify.
- 2
Öffnen Sie Ihr Theme im Theme Editor
Gehen Sie in Ihrem Shopify-Adminbereich zu Online-Shop > Themes und klicken Sie neben Ihrem Live-Theme auf Anpassen.
- 3
Navigieren Sie zu Theme-Einstellungen > Favicon
Klicken Sie in der linken Seitenleiste auf Theme-Einstellungen (das Zahnradsymbol unten bei den meisten Themes) und suchen Sie nach dem Abschnitt „Favicon“ oder „Marke“. Die genaue Bezeichnung variiert je nach Thema.
- 4
Laden Sie Ihr PNG hoch und speichern Sie es
Klicken Sie auf das Favicon-Upload-Feld, wählen Sie Ihr 512×512 PNG aus und bestätigen Sie. Klicken Sie oben rechts auf Speichern. Shopify lädt das Symbol in sein CDN hoch und verbreitet es auf allen Seiten.
- 5
Überprüfen Sie in einem Inkognito-Fenster
Öffnen Sie ein privates/Inkognito-Browserfenster und navigieren Sie zu Ihrer Shop-URL. Bestätigen Sie, dass das neue Favicon im Browser-Tab angezeigt wird. Nutzen Sie den [favicon tester](utility:favicon-tester) für eine schnelle externe Prüfung.
Jetzt ausprobieren
Generieren Sie ein Shopify-fähiges Favicon
Favicon-GeneratorFAQ
Wo füge ich ein Favicon in Shopify hinzu?+
Online-Shop > Themes > Anpassen > Theme-Einstellungen > Favicon. Laden Sie ein quadratisches PNG (512×512 empfohlen) hoch, klicken Sie auf „Speichern“ und Shopify fügt das Symbol automatisch auf jeder Storefront-Seite ein.
Welche Favicon-Größe verwendet Shopify?+
Shopify zeigt das Favicon mit 32×32 Pixeln in Browser-Tabs an. Laden Sie 512×512 hoch, um das schärfste Ergebnis zu erzielen – Shopify führt ein Downsampling auf 32×32 durch. Laden Sie niemals eine Quelle hoch, die kleiner als 32×32 ist, da sie sonst verschwommen erscheint.
Warum sieht mein Shopify-Favicon verschwommen oder gestreckt aus?+
Sie haben wahrscheinlich ein nicht quadratisches Bild oder eine sehr kleine Quelle hochgeladen. Schneiden Sie Ihr Logo vor dem Hochladen auf ein perfektes Quadrat zu und beginnen Sie mit mindestens 256 x 256 Pixeln. Der [favicon generator](tool:favicon-generator) erzeugt automatisch ein Quadrat 512×512 PNG, bereit für Shopify.
Warum wird mein neues Shopify-Favicon nicht angezeigt?+
Browser und CDN-Caches verzögern Aktualisierungen. Öffnen Sie ein Inkognito-/Privatfenster und navigieren Sie zu Ihrer Shop-URL, um das aktualisierte Favicon ohne Cache-Interferenz anzuzeigen. Wenn beim normalen Surfen immer noch das alte Symbol angezeigt wird, warten Sie einige Stunden, bis der CDN-Cache abläuft.
Kann ich einen apple-touch-icon zu meinem Shopify-Shop hinzufügen?+
Ja, aber es erfordert eine manuelle Codebearbeitung. Laden Sie eine apple-touch-icon.png im Format 180×180 in den Assets-Ordner Ihres Themes hoch und fügen Sie dann „<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" |“ hinzu asset_url }}'>` in theme.liquid im Abschnitt „<head>“.
Unterstützt Shopify SVG-Favicons?+
Der integrierte Theme Editor-Favicon-Upload akzeptiert SVG nicht. Um ein SVG-Favicon zu verwenden, fügen Sie das Link-Tag manuell in theme.liquid hinzu: „<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | asset_url }}'>` nach dem Hochladen des SVG in den Ordner „Assets“.
Benötige ich einen Entwickler, um mein Shopify-Favicon zu ändern?+
Nein. Mit Theme Editor (Online-Shop > Themes > Anpassen > Theme-Einstellungen > Favicon) können Sie ein neues Favicon in weniger als zwei Minuten ohne Code hochladen und speichern. Entwicklerzugriff ist nur für SVG- oder apple-touch-icon-Ergänzungen erforderlich.