Ein Favicon bei Shopify hinzufügen

Daniel Wunderlich | Zuletzt aktualisiert: Januar 26, 2024 | Allgemein | 6 Minuten Lesedauer

Lernen Sie die Grundlagen darüber, was ein Shopify Favicon ist und wie Sie eines in Ihren Online-Shop einfügen.

Die Identität Ihres E-Commerce-Shops vereint mehrere Elemente wie das Logo, die Farben der Website und Ihre Marketingmaterialien. Diese Identität stärkt Ihre gesamte Marke und schafft eine gesunde Erinnerung für Ihre Kunden, die Gefühle von Komfort und Zuverlässigkeit hervorrufen, wenn sie Ihre Markenbilder und -farben sehen. Obwohl das Favicon nur eine kleine Größe hat, ist es auch Teil dieser Markenstrategie. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Favicon für Ihren Shopify-Shop erstellen und hinzufügen, das Ihren Online-Auftritt abrundet und es einfacher macht, Ihren Shop zu erkennen, wenn Kunden ihn besuchen.

Seiteninhalt

Ein Favicon bei Shopify hinzufügen
Das Favicon bei Ihrem Shopify Shop hinzufügen
Tipps zum Erstellen Ihres Favicons

Das Favicon bei Ihrem Shopify Shop hinzufügen

Wie bereits erwähnt, wird beim Betrieb einer Website über Shopify automatisch ein Shopify-Logo als Favicon Ihrer Website hinzugefügt. Daran ist nichts auszusetzen, aber es ist viel professioneller und markenorientierter, wenn Sie Ihr eigenes Logo einfügen.

Gehen Sie daher zu Ihrem Shopify-Dashboard und klicken Sie unter Verkaufskanäle auf Online-Shop.

Navigieren Sie zu Ihren Themes und klicken Sie auf die Schaltfläche Anpassen neben Ihrem aktuellen Theme. Obwohl sich die Einstellungen von Theme zu Theme ändern, haben alle neueren Shopify-Themes einen Abschnitt zum Ändern des Favicons.

Scrollen Sie im Shopify-Customizer zum Ende der Liste auf der linken Seite und klicken Sie auf Theme-Einstellungen.

Suchen Sie im neuen Abschnitt die Schaltfläche Favicon und wählen Sie sie aus.

Daraufhin wird eine Schaltfläche zum Auswählen von Bildern oder zum Durchsuchen von freien Bildern angezeigt. Ich kann mir nicht vorstellen, dass sie irgendwelche freien Bilder haben, die zu Ihrem Logo passen, also klicken Sie am besten auf Bild auswählen, um ein benutzerdefiniertes Bild von Ihrem Computer hochzuladen.

Wählen Sie die Favicon-Datei und laden Sie sie in Shopify hoch.

Danach sehen Sie eine Vorschau Ihres Favicon-Symbols. Um die Änderungen dauerhaft zu machen, wählen Sie in Shopify die Schaltfläche Speichern.

Um Ihr Shopify-Favicon in Aktion zu sehen, gehen Sie zum Frontend Ihrer Website und sehen Sie sich den aktuellen Browser-Tab an. Sie sollten das Favicon neben dem Titel Ihrer Website sehen.

Ein Favicon ist ein kleines Symbol, das in der Adressleiste eines Browsers angezeigt wird. Es hilft dabei, Ihre Website von anderen zu unterscheiden und verbessert die Benutzerfreundlichkeit. Wenn Sie einen Shopify-Store betreiben, ist es einfach, ein Favicon hinzuzufügen. In diesem Beitrag werden wir die Schritte beschreiben, die Sie ausführen müssen, um ein Favicon bei Shopify hinzuzufügen.

Ein Favicon erstellen

Das erste, was Sie tun müssen, ist, ein Favicon zu erstellen. Sie können dies online oder mit einer Grafiksoftware tun. Die besten Favicons sind einfache, gut erkennbare Symbole, die Ihr Logo oder Ihre Marke repräsentieren.

Shopify-Adminbereich öffnen

Melden Sie sich bei Ihrem Shopify-Konto an und öffnen Sie den Adminbereich. Navigieren Sie zu „Einstellungen“ und dann zu „Allgemein“.

Favicon hochladen

Klicken Sie auf den Reiter „Dateien“. Hier finden Sie eine Option zum Hochladen Ihres Favicons. Wählen Sie das Favicon aus, das Sie erstellt haben, und klicken Sie auf „Datei hochladen“.

Favicon aktivieren

Wenn das Hochladen abgeschlossen ist, navigieren Sie zurück zur Registerkarte „Allgemein“ und suchen Sie nach der Option „Favicon“. Klicken Sie auf die Dropdown-Liste und wählen Sie das hochgeladene Favicon aus. Speichern Sie Ihre Änderungen.

Überprüfen Sie das Favicon

Öffnen Sie Ihren Shopify-Store in einem Browser und überprüfen Sie, ob das Favicon korrekt angezeigt wird. Es kann einige Minuten dauern, bis das Favicon überall aktualisiert wird, also haben Sie ein wenig Geduld.

Das ist es! Mit diesen einfachen Schritten können Sie ein Favicon bei Shopify hinzufügen. Es ist ein kleines Detail, aber es hilft dabei, Ihren Shop von anderen zu unterscheiden und verbessert die Benutzerfreundlichkeit.

Tipps zum Erstellen Ihres Favicons

Obwohl es einfach erscheint, ein kleines Icon zu erstellen, ist es wichtig, es richtig zu machen, wenn man bedenkt, dass Kunden das Favicon sehen, wenn sie auf Ihre Website kommen. Es ist auch einfach, ein Favicon zu erstellen, das unscharf ist oder nicht den gesamten Platz ausfüllt, was den Zweck des Favicons zunichte macht, da es für das Auge nicht so gut sichtbar ist.

Um diese Probleme zu beheben, finden Sie hier einige Tipps für die Erstellung Ihres Shopify-Favicons:

Beginnen Sie Ihr Design größer als 32×32 und verkleinern Sie es, wenn nötig. Sie werden zwangsläufig ein unschärferes Bild haben, wenn Sie versuchen, ein kleineres Bild in den Raum zu strecken. Wenn Sie z. B. ein 32×32-Bild von Hatchful nehmen und versuchen, es zu strecken, um den geschriebenen Teil des Logos loszuwerden, kann das zu Problemen führen.
Sie können in der Regel nicht einfach Ihr aktuelles Logo nehmen und erwarten, dass es perfekt als Favicon funktioniert.
Favicons sehen großartig aus, wenn Sie jeden Pixel des vorgesehenen Platzes abdecken. Sie haben nicht viel Platz, also sollten Sie jeden quadratischen Pixel des 32×32-Bereichs ausnutzen.
Entfernen Sie allen Text, da er in einem Favicon schwer zu lesen ist. Die Ausnahme ist, wenn Ihr primäres Logo-Element ein großer Buchstabe ist.
Bevorzugen Sie solide, hellere Farben. Einfache, cartoonartige Logos funktionieren am besten.
Ziehen Sie in Erwägung, entweder den gesamten Raum mit einem einfarbigen Hintergrund auszufüllen oder einen transparenten Hintergrund zu erstellen, bei dem das Vordergrundelement so gedehnt wird, dass es gerade die Ränder berührt. Sie werden feststellen, dass viele größere Marken transparente Hintergründe für ihre Favicons haben.
Das ICO-Dateiformat eignet sich gut für kleinere Bilder. Wenn Sie damit nicht vertraut sind, verwenden Sie ein PNG für transparente Hintergründe oder ein JPG für hochauflösende Favicons mit festen Hintergründen.