So fügen Sie eine hinzu Shopify Favicon zu Ihrem Shopify Store

Die Identität von Ihr E-Commerce-Shop vereint verschiedene Elemente wie das Logo, die Seitenfarben und Ihre Marketingmaterialien. Diese Identität stärkt Ihre Marke insgesamt und schafft eine gesunde Erinnerung für Ihre Kunden, die beim Anblick Ihrer Markenbilder und -farben ein Gefühl von Komfort und Zuverlässigkeit hervorruft.

Obwohl das Favicon klein ist, passt es auch zu dieser Markenstrategie. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Favicon erstellen und zu Ihrem hinzufügen Shopify Shop anDies rundet Ihr Online-Erscheinungsbild ab und erleichtert das Erkennen Ihres Geschäfts bei Kundenbesuchen.

Was ist ein Shopify Favicon?

A Shopify Favicon oder ein beliebiges Favicon ist ein kleines Symbol für Ihre Website, das auf der Browser-Registerkarte neben Ihrem Website-Namen angezeigt wird.

Die Adressleiste des Browsers ist der häufigste Bereich zum Anzeigen der Site Favicon, wird jedoch auch an folgenden Stellen angezeigt:

• Symbolleisten-Apps
• Lesezeichen
• Verlaufsergebnisse
• Suchleisten
• Manchmal, wenn sie in sozialen Medien geteilt werden

Wenn der Browser einen Link zu Ihrer Website anzeigen muss und nicht viel Platz für andere Inhalte vorhanden ist, ersetzt er im Wesentlichen Ihr übliches Logo in voller Größe durch das Favicon.

Standardmäßig Shopify fügt die hinzu Shopify Logo für Ihr Favicon, also müssen wir das ändern.

Ein gutes Favicon ist oft eine kleinere Version Ihres Logos, aber manchmal variieren sie ein wenig, weil Sie sicherstellen möchten, dass sie sichtbar sind, den gesamten zugewiesenen Platz einnehmen und neben dem Namen Ihrer Website ein wenig Farbe hinzufügen.

Standardmäßig unterstützen alle Browser Favicons mit einer Größe von 32 × 32 Pixel. Das ist ein ziemlich kleines Bild, aber mit Hilfe einiger Online-Generatoren können Sie Ihr eigenes erstellen Shopify Favicon für Ihre Website. Außerdem werden größere Bilder ohnehin verkleinert, sodass Sie sie nicht unbedingt auf genau 32 × 32 einstellen müssen.

Ein Favicon macht für Online-Shops durchaus Sinn Shopify da sie einfach hinzuzufügen sind und es wichtig ist, Ihre Markenidentität als Online-Verkäufer zu stärken. Einige argumentieren auch, dass es bei der Suchmaschinenoptimierung hilft.

Lesen Sie weiter, um mehr darüber zu erfahren, wie Sie Favicon zu Ihrem hinzufügen können Shopify zu speichern.

So fügen Sie Ihrem Favicon ein Favicon hinzu Shopify Store – Kurzanleitung

Wie bereits erwähnt, wenn eine Site durchlaufen wird Shopify es fügt automatisch ein hinzu Shopify Logo als Favicon Ihrer Website. Daran ist nichts auszusetzen, aber es ist weitaus professioneller und markenorientierter, ein eigenes Logo einzubinden. Hier sind die Schritte, die Sie befolgen müssen:

Schritt 1: Gehen Sie zu Ihrem Shopify Armaturenbrett

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

Schritt 2: Navigieren Sie zu den Designeinstellungen

Navigieren Sie zu Ihren Themen und klicken Sie neben Ihrem aktuellen Thema auf die Schaltfläche Anpassen. Obwohl sich die Einstellungen von Thema zu Thema ändern, sind die neuesten Shopify Themen haben einen Abschnitt, um das Favicon zu ändern.

Im Shopify Im Customizer scrollen Sie zum Ende der Liste links und klicken auf Themeneinstellungen.

Schritt 3: Wählen Sie den Favicon-Button

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 Erkunden von freien Bildern angezeigt. Ich kann mir nicht vorstellen, dass sie kostenlose Bilder haben, die zu Ihrem Logo passen. Klicken Sie daher am besten auf Bild auswählen, um ein benutzerdefiniertes Bild von Ihrem Computer hochzuladen.

Schritt 4: Laden Sie Ihr Favicon hoch

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

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

Zum Anzeigen Ihrer Shopify Favicon in Aktion, gehen Sie zum Frontend Ihrer Website und sehen Sie sich die aktuelle Registerkarte des Browsers an. Sie sollten das Favicon neben Ihrem Site-Titel sehen.

Tipps zum Erstellen Ihres Favicon

Obwohl es einfach zu sein scheint, ein kleines Symbol zu generieren, 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 verschwommen ist oder nicht den gesamten Raum ausfüllt, wodurch der Zweck des Favicon zunichte gemacht wird, da es für das Auge nicht so sichtbar ist.

Um Probleme zu beheben, finden Sie hier einige Tipps zum Erstellen Ihrer Shopify Favicon:

• Beginnen Sie Ihr Design größer als 32 × 32 und verkleinern Sie es bei Bedarf. Sie müssen ein unschärferes Bild haben, wenn Sie versuchen, ein kleineres Bild in den Raum zu strecken. Wenn Sie beispielsweise ein 32 × 32-Bild von Hatchful aufnehmen und versuchen, es auszudehnen, um den geschriebenen Teil des Logos zu entfernen, kann dies zu Problemen führen.
• Normalerweise können Sie Ihr aktuelles Logo nicht einfach nehmen und erwarten, dass es perfekt als Favicon funktioniert.
• Favicons sehen großartig aus, wenn Sie jedes Pixel des bereitgestellten Platzes ausfüllen. Sie haben nicht viel Platz, also sollten Sie jedes quadratische Pixel im 32×32-Bereich ausnutzen.
• Entfernen Sie den gesamten Text, da er in einem Favicon schwer zu lesen ist. Die Ausnahme ist, wenn Ihr primäres Logoelement ein großer Buchstabe ist.
• Schießen Sie für feste, hellere Farben. Einfache, karikaturistische Logos funktionieren am besten.
• Schauen Sie sich die Favicons Ihrer Lieblingsmarken an. Was haben sie getan, um sicherzustellen, dass ihr Online-Image mit einem Favicon durchkommt?
• Füllen Sie entweder den gesamten Raum mit einem einfarbigen Hintergrund aus oder erstellen Sie einen transparenten Hintergrund mit gestrecktem Vordergrundelement, sodass es nur die Kanten 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 nicht damit vertraut sind, verwenden Sie ein PNG für transparente Hintergründe oder ein JPG für hochauflösende Favicons mit einfarbigem Hintergrund.

So generieren Sie ein Favicon für Ihre Shopify Store

Sie haben die Möglichkeit, ein Favicon in einer beliebigen Design-Software Ihrer Wahl zu entwerfen. Wenn Sie Photoshop bevorzugen, gehen Sie damit um. Wenn Sie lieber eine kostenlose Software wie GIMP oder Pixlr möchten, funktionieren alle, solange Sie die erforderlichen Abmessungen von 32 × 32 einhalten.

Sie haben auch die Möglichkeit, ein Favicon mit zu erstellen ShopifyHatchful Logo und Free Favicon Generator. Sehen Sie sich unseren gesamten Leitfaden an Bei der Verwendung Schlüpfrig ein Logo bauen.

Sobald der Logo-Generator seine Arbeit erledigt hat, erhalten Sie eine Datei mit mehreren Logo-Formaten, darunter auch ein Favicon.

Denken Sie daran, dass viele der Logos, mit denen Sie erstellen Schlüpfrig (Lesen Sie unsere Schlüpfrige Bewertung) Verwenden Sie einen Leerraum um das Logo, sodass Sie ihn möglicherweise anpassen müssen, damit die Grafik den größten Teil des Bereichs abdeckt. Im Allgemeinen habe ich festgestellt, dass Sie das bereitgestellte Hatchful-Favicon nur verwenden sollten, wenn es bereits gut aussieht (es füllt den größten Teil des Raums aus und enthält keine kleinen Elemente wie Text).

Wenn dies nicht der Fall ist, verwenden Sie eine Bearbeitungssoftware von Drittanbietern wie Photoshop oder Pixlr, um einige der unnötigen Elemente auszuschneiden.

Wichtig: Sie müssen eine größere Version des Bildes verwenden, wenn Sie es über eine Leinwand strecken möchten, um Text und Leerzeichen auszuschneiden. Zu diesem Zweck habe ich Hatchful verwendet, um Logos zu generieren, aber tatsächlich eines der großen Logos (nicht die mitgelieferte Favicon-Datei) verwendet, da ich nicht möchte, dass Unschärfe auftritt, wenn ich es über die 32 × 32-Leinwand strecke.

Wählen Sie in Ihrer Bearbeitungssoftware eine neue Leinwand aus, deren Breite und Höhe jeweils auf 32 eingestellt sind.

Erstellen Sie eine Ebene für das neue Bild und stellen Sie sicher, dass das Bild größer als die 32 × 32-Leinwand ist, da Sie es möglicherweise ausdehnen. Laden Sie dann das Bild hoch oder platzieren Sie es auf der Leinwand.

Im folgenden Screenshot habe ich das Favicon-Design vergrößert, damit ich sicherstellen kann, dass es richtig in das Quadrat passt. Es ist verschwommen, aber ich weiß, dass es viel besser aussehen wird, wenn ich herauszoome.

Wie Sie sehen können, sieht die verkleinerte Version des Favicon im Pixlr-Designer gut aus. Ich habe den größten Teil des zugewiesenen Platzes abgedeckt, mich für ein helles und einfarbiges Symbol entschieden und alle Anzeichen von kleinerem Text entfernt.

Der letzte Schritt ist das Herunterladen der Datei. Sie können an dieser Stelle festlegen, dass es sich um ein transparentes PNG handelt. Aber für dieses Tutorial bleibe ich bei einem hochauflösenden JPG, damit es so scharf wie möglich aussieht. Und es macht mir nichts aus, einen Hintergrund mit einer festen Farbe zu haben.

Gehen Sie zurück zu Ihrem Shopify Instrumententafel. Klicken Sie auf Online-Shop> Themen> Anpassen.

Gehen Sie dann zu Themeneinstellungen> Favicon.

Laden Sie das neue Favicon hoch und klicken Sie auf die Schaltfläche Speichern in Shopify Editor.

Der primäre Weg, um Ihr Favicon zu testen und anzuzeigen, besteht darin, einfach einen Tab mit der URL Ihrer Homepage-Website zu öffnen. Wie Sie sehen können, zeigt sich das Favicon gut und ist tatsächlich ein wenig besser als mein vorheriges Favicon, da dieses nicht den gesamten zur Verfügung gestellten 32 × 32-Raum ausfüllte.

Fazit

A Shopify Das Entwerfen und Hinzufügen von Favicon dauert nicht länger als ein paar Minuten. Es erinnert Ihre Besucher jedoch wunderbar daran, auf welcher Website sie sich befinden. Darüber hinaus kann dies dazu dienen, dass Benutzer Ihre Website in ihren Lesezeichen und Browserverläufen finden, da sie beim Durchsuchen dieser Abschnitte höchstwahrscheinlich eine lange Liste anderer Websites durchsuchen.

Denken Sie daran, dass Sie sich nicht mit Unschärfe oder Unleserlichkeit zufrieden geben sollten Shopify Favicon Bild. Wenn Sie feststellen, dass das erste Favicon nicht ganz richtig aussieht oder Sie Text ausschneiden oder einen transparenten Hintergrund hinzufügen möchten, gehen Sie zum Anfang zurück und machen Sie es richtig. Obwohl es keine gute Idee ist, überhaupt kein Favicon zu haben, lässt ein verschwommenes oder schwer zu erkennendes Favicon Ihre Marke unprofessionell und etwas albern aussehen.

Wenn Sie Fragen zum Hinzufügen von Favicons haben Shopifyoder deine eigenen machen Shopify Favicon, lass es uns in den Kommentaren unten wissen.