Rund um Favicons: So kannst Du Dir für Deine Website ein passendes Favicon erstellen

Wer eine neue Website oder einen neuen Onlineshop entwickelt, stellt sich früher oder später die Frage, wie das Favicon für die eigene Website idealerweise gestaltet sein sollte und wie es sich einbinden lässt. Mit genau diesen Fragen beschäftigen wir uns auch in diesem Blogbeitrag.

Für alle, die den Begriff "Favicon" bisher noch nie gehört haben, steigen wir mit einer kurzen Begriffsklärung ein. Und keine Sorge: Auch, wenn Du den Begriff noch nicht kennst, wirst Du schnell merken, dass Du in Deinem Alltag wahrscheinlich schon hunderte Favicons über den Weg gelaufen sind.

Das "Favicon": Was steckt dahinter?

Ein Favicon ist die Grafik (also das Logo oder Symbol), das neben einer Webadresse angezeigt wird und ihr damit einen grafischen Wiedererkennungswert verleiht. Favicons werden bspw. im Browser Tab, in der Browser History, in den Lesezeichen oder in den Suchergebnissen von Suchmaschinen angezeigt. Durch die Einbindung eines Favicons in Deine Website erleichterst Du es Deinen Kunden, Deine Seite schnell zu identifizieren und leicht wiederzuerkennen.

Der Begriff "Favicon" ist eine Zusammensetzung aus den englischen Wörtern "favorite" und "icon". Entsprechend lässt sich "Favicon" als "Favoriten-Symbol" ins Deutsche übersetzen. Damit beschreibt der Begriff genau die Funktion, die er ausüben soll: Deine Kunden sollen sich das Icon oder Symbol Deiner Webseite einprägen. Wenn Sie dann im Internet das nächste Mal auf dieses Symbol stoßen, können sie die dahinterstehende Webseite direkt als Deine Webseite - die Webseite ihres Favoriten - wiedererkennen.

Das Favicon für Deinen Shopify Shop: So kannst Du ein Favicon erstellen!

Wenn Du die Identität Deines Shops oder Deiner Marke stärken möchtest, solltest Du auch Deinem Shopify Shop ein Favicon hinzufügen. Wie ein Favicon in eine Webseite eingebunden wird, hängt vom jeweiligen CMS (Content Management System) ab. Wir erklären Dir in unserem Blogbeitrag daher ganz speziell für Shopify, welche Schritte nötig sind, um Deiner Webseite ein Favicon hinzuzufügen.

Bei der Erstellung Deines Shops stellt Shopify automatisch das Shopify Favicon als Favicon für Deinen Shop ein. Behältst Du das bei, sehen Deine Kunden in Ihrer Browserzeile also zunächst das Shopify Logo, wenn sie Deine Webseite aufrufen. Das ist zwar nicht schlimm, jedoch wirkt ein eigenes Favicon professioneller. Zudem ließe sich argumentieren, dass die User Deiner Seite von der Einblendung des Shopify Logos als Favicon irritiert sein könnten, da sie ja eigentlich eine Grafik erwarten, die zu Deinem Shop passt.

Um das Favicon Deines Shopify Shops zu ändern, navigierst Du im Shopify Dashboard zu den Themes Deines Onlineshops. In den Themes-Einstellungen (Themen Einstellungen) findest Du dann den Menüpunkt "Favicon". Wenn Du diesen auswählst, hast Du die Möglichkeit, nach frei verfügbaren Bildern bzw. Icons zu suchen oder ein eigenes Bild hochzuladen. Da die frei verfügbaren Bilder in der Regel nicht als Favicon für Deine Webseite geeignet sein dürften, macht es i.d.meist nur Sinn, hier ein eigenes Bild hochzuladen. Nach dem Hinzufügen Deiner Datei wird Dir zunächst eine Vorschau angezeigt. Wenn Dir diese gefällt, kannst Du die Änderung speichern. Und schon hast Du das Favicon für Deinen Shopify Shop geändert.

Solltest Du noch keine geeignetes Favicon-Bild haben, kannst Du ganz einfach eine passende Abbildung erstellen. Dazu kannst Du quasi jede Design-Software und jeden Favicon Generator nutzen. Dabei solltest Du folgende Tipps befolgen:

• Dein Favicon sollte Deinem Logo möglichst ähnlich sehen, damit Deine Kunden Dein Unternehmen problemlos wiedererkennen können. Jedoch sind Logos oft zu komplex, als dass man sie in der Größe eines Favicons noch genau erkennen könnte. Daher solltest Du bei Deinem Favicon möglichst auf Text verzichten.
• Ein transparenter Hintergrund wirkt bei Favicons in der Regel am professionellsten. Auch viele große Marken nutzen transparente Hintergründe.

• Idealerweise erstellst Du Dein Favicon als ICO-Datei. Alternativ kannst Du auch eine PNG-Datei oder eine JPG-Datei nutzen.
• Stelle auf jeden Fall sicher, dass Deine Bild nicht unleserlich oder unscharf ist. Als kleine Abbildung, dass die User in ihrem Webbrowser sehen, wenn sie Deine Seite besuchen, ist das Favicon auch ein Aushängeschild für Dein Unternehmen. Es lohnt sich also, hier etwas Zeit zu investieren.

5 Fragen - 5 Antworten: Rund um das Shopify Favicon

Zu dem Thema "Favicon" stellen sich viele Shopify User ähnliche Fragen. Darum wollen wir zum Abschluss dieses Beitrags noch fünf häufige Fragen beantworten:

1) Was ist ein Favicon?

Ein Favicon ist das kleine Bild, das im Browser neben einer Webadresse angezeigt wird. Es wird auch als "Website-Symbol" oder "Tab-Symbol" bezeichnet. Der Zweck eines Favicons ist es, den Wiedererkennungswert Deiner Webseite zu steigern.

2) Welches Format braucht eine Favicon Datei?

Damit Dein Favicon problemlos in allen Browsern angezeigt werden kann, sollte es 16x16 Pixel oder 32x32 Pixel groß und im ".ico Format" gespeichert sein. Die meisten aktuellen Browser erkennen auch Favicons im ".gif Format" oder im ".png Format", allerdings führen diese Formate in älteren Browser Versionen oftmals zu Darstellungsproblemen.

3) Was ist der Unterschied zwischen Favicon und Logo?

Während das Facivon eine kleine grafische Darstellung Deines Unternehmens im Format 16x16 Pixel ist, das primär in der Adresszeile des Browsers erscheint, ist ein Logo nicht nur eine viel größere Bilddatei, sondern hat auch einen viel größeren Anwendungsbereich.

Für die Wiedererkennbarkeit Deines Unternehmens ergibt es natürlich Sinn, dass das Favicon Deiner Webseite Deinem Logo möglichst ähnlich sieht. Da Favicons aber primär in der Adressleiste von Webbrowsern angezeigt werden, sind sie sehr klein. Sollte Dein Logo sehr komplex sein oder Schrift enthalten, ergibt es Sinn, es für den Einsatz anzupassen.

4) Wird das Favicon auch als Icon für Apps benutzt?

Während das Favicon primär in Browsern angezeigt wird, gibt es auch eigene App Icons für die Anzeige auf Smartphones. So ist das WebClip-Icon oder Apple-Touch-Icon beispielsweise das Favicon für IPhones und IPods. Während es für den Wiedererkennungswert Sinn ergibt, prinzipiell bei einer einheitlichen Abbildung zu bleiben, unterscheiden sich Favicons und Touch Icons hinsichtlich ihrer Größe. Es ergibt also Sinn, für den Zweck eines App-Icons nochmal eine neue Datei mit einer entsprechenden Auflösung (i. d. R. 60x60 Pixel) zu erstellen.

5) Wo finde ich einen Favicon Generator?

Über eine einfache Websuche nach dem Begriff "Favicon Generator" solltest Du im Internet auf der Suche nach einem passenden Generator schnell fündig werden. Zu den gängigen Generatoren gehören zum Beispiel der IONOS Favion Generator, Genfavicon oder Favic-o-matic.

‍