So fügen Sie ein Favicon hinzu Shopify

Das Hinzufügen eines Favicons zu Shopify ist eine unkomplizierte Theme-Anpassung. In den meisten Shopify-Themes können Sie ein Bild aus Ihrem Shopify-Adminbereich hochladen, ohne Ihren Theme-Code zu bearbeiten. In diesem Tutorial erfahren Sie, wie Sie ein Favicon vorbereiten, es zu Ihrem Shopify-Shop hinzufügen, es ersetzen oder entfernen, überprüfen, ob es funktioniert, und Fälle beheben, in denen das Favicon nicht angezeigt wird. Außerdem erfahren Sie, was zu tun ist, wenn Ihr Theme die Favicon-Einstellung an einer anderen Stelle platziert.

Bevor Sie beginnen, halten Sie ein quadratisches Favicon-Bild bereit. Shopify empfiehlt eine Favicon-Größe von 32 × 32 Pixeln, obwohl in der Dokumentation von Shopify auch ein 16 × 16 Pixel großes Bild als ideale Favicon-Größe aufgeführt ist. Bilder, die größer als 32 × 32 Pixel sind, können beim Hochladen auf 32 × 32 Pixel verkleinert werden.

Wie fügt man Shopify ein Favicon hinzu?

Shopify bietet über den Theme-Editor eine Favicon-Einstellung für berechtigte Shops. Der genaue Ort der Einstellung kann je nach Theme-Version variieren. Die aktuellen Anweisungen von Shopify platzieren es unter den Theme-Einstellungen, wo es als Favicon oder unter dem Logo erscheinen kann.

1. Melden Sie sich bei Shopify an: Melden Sie sich bei Ihrem Shopify-Administrator an. Sie benötigen Zugriff auf den Shop, dessen Favicon Sie ändern möchten.
2. Online-Shop öffnen > Themen: Gehen Sie im Shopify-Adminbereich zu Online-Shop > Themen. Suchen Sie das Thema, das Sie ändern möchten.
3. Öffnen Sie den Theme-Editor: Klicken Sie Anpassen (oder Thema bearbeiten) neben dem Thema, das Sie anpassen möchten. Der wichtige Punkt besteht darin, den Theme-Editor für das Theme zu öffnen, das Sie ändern möchten.
4. Öffnen Sie die Theme-Einstellungen: Klicken Sie im Theme-Editor auf Theme-Einstellungen Symbol (dargestellt durch ein Zahnradsymbol im linken Bereich).
5. Finden Sie die Favicon-Einstellung: Klicken Sie je nach Theme-Version auf Logo oder Favicon. Shopify weist ausdrücklich darauf hin, dass der Speicherort je nach Theme-Version unterschiedlich sein kann. Gehen Sie nicht davon aus, dass jedes Shopify-Theme an derselben Stelle eine Einstellung mit demselben Namen anzeigt.
6. Wählen Sie Ihr Favicon-Bild aus: Klicken Sie im Abschnitt „Favicon-Bild“ auf Bild auswählen. Anschließend können Sie entweder ein Bild auswählen, das bereits in Ihren Shopify-Adminbereich hochgeladen wurde, oder auf klicken Bilder hinzufügen und laden Sie ein Bild von Ihrem Computer hoch. Wählen Sie das von Ihnen vorbereitete Favicon aus.
7. Klicken Sie auf „Fertig“: Nachdem Sie das Bild ausgewählt haben, klicken Sie auf Fertig. Shopify führt Sie zu den Favicon-Einstellungen zurück.
8. Alternativtext hinzufügen, sofern verfügbar: Bei einigen Themes können Sie dem Favicon Alternativtext hinzufügen. Klicken Sie dazu auf Bearbeiten im Favicon-Bildbereich und geben Sie eine kurze Beschreibung des Bildes ein. Shopify weist darauf hin, dass einige Themes diese Option bieten. Ein anschauliches Beispiel wäre: Markeninitialen in Weiß auf schwarzem Hintergrund.
9. Speichern Sie Ihre Änderungen: Klicken Sie Speichern oben rechts. Dadurch wird das Favicon auf das Thema angewendet, das Sie bearbeiten.
10. Schauen Sie sich den Live-Shop an: Öffnen Sie Ihren veröffentlichten Shopify-Shop in einem normalen Browserfenster. Sehen Sie sich den Browser-Tab an und prüfen Sie, ob Ihr neues Favicon neben dem Seitentitel erscheint. Verlassen Sie sich nicht ausschließlich auf die Vorschau im Shopify-Theme-Editor. Shopify weist darauf hin, dass Favicons nicht angezeigt werden, wenn ein Theme über den Theme-Editor angezeigt wird, da der Editor Teil der Shopify-Administration und nicht der Live-Storefront ist.

Wo ist die Favicon-Einstellung in Shopify?

In aktuellen Shopify-Anleitungen erfolgt der Zugriff auf die Favicon-Einstellung über den Theme-Editor:

Shopify-Administration → Online-Shop → Themes → Theme bearbeiten/Anpassen → Theme-Einstellungen

Von dort aus kann die Einstellung wie folgt aussehen: Favicon oder darunter Logo, abhängig von der Theme-Version. Diese Variante ist wichtig, da Sie in einem älteren Tutorial möglicherweise aufgefordert werden, sofort auf Favicon zu klicken, während Ihr Theme möglicherweise dieselbe Option im Logo platziert. Wenn Sie die Einstellung nicht finden können, überprüfen Sie das gesamte Bedienfeld „Themeneinstellungen“, anstatt nur nach einer bestimmten Bezeichnung zu suchen.

Shopify verlangt außerdem, dass Themes, die an seinen Theme Store übermittelt werden, über eine Favicon-Einstellung verfügen, was bedeutet, dass von Themes, die für das Shopify-Ökosystem entwickelt wurden, erwartet wird, dass sie diese Anpassung unterstützen.

Was passiert, wenn Sie eine Favicon-Einstellung nicht finden können?

Vergewissern Sie sich zunächst, dass Sie das richtige Thema bearbeiten. Dann prüfen Sie:

• Gehe zu Online-Shop > Themen.
• Öffnen Sie das Theme, das Sie tatsächlich veröffentlichen möchten.
• Offen Theme-Einstellungen.
• Überprüfen Sie beides Favicon und Logo.
• Schauen Sie sich das komplette Theme-Einstellungsfeld an. Einige Themes organisieren ihre Einstellungen anders.

Wenn Ihr Theme tatsächlich keine Favicon-Einstellung bereitstellt, kann der Theme-Code eine Alternative darstellen. Shopify-Themes können globale Einstellungen über „settings_schema.json“ verfügbar machen, und die Entwicklerdokumentation von Shopify zeigt, dass Favicon-Einstellungen über das globale Einstellungsobjekt des Themes gerendert werden können. Codebearbeitung sollte nicht die erste Option sein, wenn das Theme bereits eine Favicon-Einstellung bietet.

Welche Größe sollte ein Shopify-Favicon haben?

Shopify empfiehlt 32 × 32 Pixel für ein Favicon. Die Hilfedokumentation identifiziert außerdem 16 × 16 Pixel als ideale Favicon-Größe und erklärt, dass größere Bilder beim Hochladen auf 32 × 32 Pixel reduziert werden können.

Die praktische Priorität liegt nicht einfach darin, eine Nummer auszuwählen. Das Bild muss nach der Anzeige in Favicon-Größe erkennbar bleiben. Beispielsweise kann ein 32 × 32 Pixel großes Symbol, das einen vollständigen Firmennamen enthält, technisch zwar passen, aber dennoch nicht lesbar sein. Ein einfaches Symbol mit starkem Kontrast kann viel besser funktionieren.

Wie erstellt man ein Favicon für Shopify?

Abhängig davon, über welche Markenwerte Sie bereits verfügen, haben Sie mehrere Möglichkeiten.

Erstellen Sie ein Favicon aus Ihrem Logo

Beginnen Sie mit dem erkennbarsten Teil Ihres Logos. Ein horizontales Logo, das ein Symbol und einen langen Firmennamen enthält, sollte in der Regel vereinfacht und nicht proportional verkleinert werden, bis der Text unleserlich wird. Verwenden Sie das Symbol allein oder kombinieren Sie ein oder zwei erkennbare Initialen.

Erstellen Sie ein Favicon aus Initialen

Wenn Ihr Unternehmen kein eindeutiges Symbol hat, erstellen Sie ein einfaches Favicon mit einem oder zwei Buchstaben. Zum Beispiel, NS könnte eine Marke namens North Star darstellen. Verwenden Sie eine klare Schriftart, ausreichend Abstände und starken Kontrast.

Konvertieren Sie ein vorhandenes PNG in ein Favicon

Wenn Sie bereits über ein quadratisches PNG-Bild verfügen, können Sie es vor dem Hochladen in ein Favicon-fähiges Bildmaterial umwandeln. Ein Werkzeug wie z PNGtoFavicon.com kann ein PNG in ein Favicon umwandeln, was nützlich ist, wenn Sie bereits ein Markenbild haben, aber eine spezielle Favicon-Version benötigen.

Überprüfen Sie nach der Konvertierung das resultierende Symbol in kleiner Größe, bevor Sie es auf Shopify hochladen.

Erstellen Sie ein Favicon speziell für die Anzeige auf kleinen Bildschirmen

Verkleinern Sie Ihr Logo nicht einfach in voller Größe, ohne das Ergebnis zu überprüfen. Entfernen Sie unnötige Elemente, erhöhen Sie bei Bedarf den Kontrast und stellen Sie sicher, dass der wichtige Teil des Symbols sichtbar bleibt. Das Favicon ist erfolgreich, wenn ein Besucher Ihre Marke anhand des kleinen Symbols erkennen kann, ohne hineinzoomen zu müssen.

Wie überprüfen Sie, ob Ihr Shopify-Favicon funktioniert?

Nachdem Sie das Favicon gespeichert haben, überprüfen Sie es im Live-Shop.

• Überprüfen Sie die Browser-Registerkarte: Öffnen Sie den veröffentlichten Store und schauen Sie neben dem Seitentitel in Ihrem Browser-Tab nach. Shopify identifiziert den Browser-Tab als einen der Hauptorte, an denen ein Favicon erscheint.
• Browserverlauf prüfen: Besuchen Sie eine andere Seite, kehren Sie zu Ihrem Shop zurück und überprüfen Sie die Verlaufseinträge des Browsers. Shopify listet den Browserverlauf als weiteren Ort auf, an dem ein Favicon erscheinen kann.
• Überprüfen Sie ein Lesezeichen: Setzen Sie ein Lesezeichen für den Shop und prüfen Sie, ob das Favicon neben dem Lesezeichen angezeigt wird. Shopify identifiziert mit Lesezeichen versehene Shops ausdrücklich als einen weiteren Ort, an dem das Favicon angezeigt werden kann.
• Testen Sie ein privates oder Inkognito-Fenster: Wenn das alte Favicon in Ihrem normalen Browser noch sichtbar ist, öffnen Sie ein privates oder Inkognito-Fenster und besuchen Sie den Live-Store. Dies hilft dabei, ein Browser-Cache-Problem von einem Shopify-Konfigurationsproblem zu unterscheiden.
• Testen Sie einen anderen Browser: Öffnen Sie den Store in einem anderen Desktop-Browser. Wenn das neue Symbol in einem Browser angezeigt wird, in einem anderen jedoch nicht, ist Browser-Caching oder browserspezifisches Verhalten eine wahrscheinlichere Erklärung als ein fehlgeschlagener Shopify-Upload.
• Überprüfen Sie das mobile Verhalten: Gehen Sie nicht davon aus, dass Desktop- und mobile Browser das Favicon identisch anzeigen. Noch wichtiger ist, dass Sie die Live-Storefront von den Admin-Oberflächen von Shopify unterscheiden. Shopify gibt an, dass Favicons nicht in der Vorschau des Theme-Editors selbst angezeigt werden.

Warum wird mein Shopify-Favicon nicht angezeigt?

Mehrere unterschiedliche Probleme können dasselbe Symptom hervorrufen.

Wie beheben Sie ein Shopify-Favicon, das nicht aktualisiert wird?

Gehen Sie diese Prüfungen der Reihe nach durch:

1. Offen Online-Shop > Themen.
2. Bestätigen Sie, dass Sie das richtige Thema bearbeiten.
3. Offen Theme-Einstellungen.
4. Überprüfen Sie die Favicon oder Logo Einstellung.
5. Bestätigen Sie, dass das richtige Bild ausgewählt ist.
6. Klicken Sie Speichern.
7. Öffnen Sie die veröffentlichte Storefront, nicht den Theme-Editor.
8. Testen Sie die Website in einem privaten oder Inkognito-Browserfenster.
9. Testen Sie einen anderen Browser.
10. Überprüfen Sie das Favicon erneut im Browser-Tab.

Anhand dieser Reihenfolge können Sie erkennen, ob das Problem auf die Shopify-Einstellungen, das ausgewählte Theme oder das Browser-Caching zurückzuführen ist.

Wie ändert oder ersetzt man ein Shopify-Favicon?

Beim Ersetzen eines Favicons werden dieselben Theme-Einstellungen wie beim ersten Upload verwendet.

• Melden Sie sich bei Ihrem Shopify-Administrator an.
• Gehen Sie zu Online-Shop > Themen.
• Suchen Sie das Thema, das Sie aktualisieren möchten.
• Klicken Sie auf Thema bearbeiten/Anpassen.
• Öffnen Sie die Theme-Einstellungen.
• Klicken Sie je nach Thema auf Logo oder Favicon.
• Klicken Sie im Abschnitt Favicon-Bild auf Bild auswählen.
• Wählen Sie das Ersatz-Favicon oder laden Sie ein neues Bild hoch.
• Klicken Sie auf Fertig.
• Klicken Sie auf Speichern.
• Öffnen Sie den Live-Store und überprüfen Sie das neue Symbol.

Die aktuelle Dokumentation von Shopify bestätigt diesen Workflow und die themenabhängige Logo/Favicon-Variante.

Wie entferne ich ein Shopify-Favicon?

Der Entfernungsprozess hängt von den Steuerelementen ab, die Ihr Theme bereitstellt.

Geöffnet:

Online-Shop → Themes → Theme bearbeiten/Anpassen → Theme-Einstellungen

Öffnen Sie dann den Favicon- oder Logo-Bereich und suchen Sie nach dem Steuerelement, das dem aktuell ausgewählten Favicon-Bild zugeordnet ist.

Wenn Ihr Design eine Option zum Entfernen oder Löschen bietet, verwenden Sie diese und speichern Sie das Design. Fügen Sie keinen benutzerdefinierten Code hinzu, um ein Favicon einfach zu entfernen, wenn Ihr Theme bereits eine Einstellung für die Verwaltung bietet.

Können Sie ein Shopify-Favicon mit benutzerdefiniertem Code hinzufügen?

Ja, aber die meisten Geschäfte sollten zuerst die integrierte Designeinstellung verwenden.

Die Theme-Architektur von Shopify unterstützt globale Einstellungen über Settings_schema.json. Ein Theme kann eine Favicon-Bildeinstellung definieren und über das Liquid-Einstellungsobjekt auf seinen Wert zugreifen. Die Entwicklerdokumentation von Shopify enthält ein Beispiel, das ein PNG-Favicon aus „settings.favicon“ rendert.

Bei einem benutzerdefinierten Theme kann Code daher Teil der Implementierung sein. Für einen normalen Shopify-Shop ist es jedoch unnötig, Liquid nur zum Hinzufügen eines Favicons zu bearbeiten, wenn das Theme die Einstellung bereits bereitstellt.

Wann sollten Sie Designeinstellungen anstelle von Code verwenden?

Verwenden Sie die integrierte Designeinstellung, sofern diese verfügbar ist. Es ist einfacher zu verwalten, führt weniger zu Designfehlern und kann später geändert werden, ohne dass Liquid-Dateien geändert werden müssen.

Was sollten Sie überprüfen, bevor Sie den Theme-Code bearbeiten?

Wenn Sie Code bearbeiten müssen, identifizieren Sie zunächst das veröffentlichte Theme, die Favicon-Implementierung des Themes, die relevante Layoutdatei, ob bereits eine globale Favicon-Einstellung vorhanden ist und ob das Theme von einem anderen Entwickler aktualisiert oder gepflegt wird. Fügen Sie keinen Favicon-Code in eine zufällige Theme-Datei ein, ohne zu verstehen, wie das Theme mit globalen Einstellungen umgeht.

Häufige Shopify-Favicon-Fehler, die Sie vermeiden sollten

• Verwendung Ihres gesamten Logos: Ein langes Logo kann unleserlich werden, wenn es auf Favicon-Größe reduziert wird.
• Verwendung von kleinem Text: Ein oder zwei Initialen könnten funktionieren. Ein vollständiger Slogan reicht normalerweise nicht aus.
• Verwendung eines komplizierten Bildes: Ein einfaches Markenzeichen ist leichter zu erkennen als eine detaillierte Abbildung.
• Verwendung eines nicht quadratischen Bildes: Beginnen Sie mit quadratischen Grafiken, damit das Favicon nicht auf aggressives Zuschneiden oder Skalieren angewiesen ist.
• Verwendung einer minderwertigen Quelle: Ein verschwommenes Quellbild führt auch nach der Größenänderung zu einem schlechten Favicon.
• Vergessen zu speichern: Die Auswahl eines Bildes reicht nicht aus. Speichern Sie die Designänderungen.
• Nur den Theme-Editor prüfen: Das Favicon wird möglicherweise nicht in der Vorschau des Theme-Editors von Shopify angezeigt. Testen Sie stattdessen die veröffentlichte Storefront.
• Nur einen Browser prüfen: Ein veraltetes Favicon in einem Browser bedeutet nicht automatisch, dass die Shopify-Konfiguration falsch ist.
• Testen eines unveröffentlichten Themes: Sie können ein Theme anpassen, das derzeit nicht live ist. Dies ändert jedoch nichts an dem Favicon, das Besucher auf Ihrer veröffentlichten Storefront sehen.
• Code unnötig bearbeiten: Wenn das Theme bereits über eine Favicon-Einstellung verfügt, verwenden Sie diese, anstatt Liquid zu ändern.

Häufig gestellte Fragen zu Shopify Favicon

So erstellen Sie ein Favicon, bevor Sie es auf Shopify hochladen

Wenn Sie noch kein Favicon haben, verwenden Sie diesen einfachen Workflow:

1. Beginnen Sie mit Ihrem Logo, Markensymbol oder Ihren Initialen.
2. Erstellen Sie eine quadratische Version des Designs.
3. Entfernen Sie Details, die bei kleinen Größen verschwinden.
4. Verwenden Sie einen starken Kontrast zwischen Symbol und Hintergrund.
5. Bereiten Sie das Bild auf die von Shopify empfohlene Größe von 32 × 32 Pixel vor oder verwenden Sie eine saubere, größere Quelle, die Shopify verkleinern kann.
6. Konvertieren Sie bei Bedarf ein vorhandenes PNG mit einem Favicon-Tool.
7. Laden Sie das fertige Bild über die Designeinstellungen hoch.
8. Speichern Sie das Thema.
9. Testen Sie das Favicon auf der Live-Storefront.

Abschluss

Das Hinzufügen eines Favicons zu Shopify ist in erster Linie eine Aufgabe des Theme-Editors. Öffnen Sie Online Store > Themes, bearbeiten Sie das entsprechende Theme, öffnen Sie die Theme-Einstellungen, suchen Sie nach Favicon oder Logo, wählen Sie Ihr Bild aus und speichern Sie das Theme. Verwenden Sie ein einfaches quadratisches Symbol, das auch bei sehr kleiner Größe erkennbar bleibt. Wenn das neue Favicon nicht sofort angezeigt wird, überprüfen Sie den veröffentlichten Shop in einem privaten Fenster oder einem anderen Browser, bevor Sie die Shopify-Einstellungen erneut ändern. Browser-Caching kann dazu führen, dass ein erfolgreich aktualisiertes Favicon unverändert erscheint.