Das Favicon für den Gambio-Shop anpassen

19. Mai 2015

Das Favicon ist das kleine, meist quadratische Bild, das sich z.B. links neben dem Seitentitel im Tab eines Browsers befindet und dabei hilft, verschiedene Websites im Browser auf den ersten Blick voneinander unterscheiden zu können. Bei der Wahl des Favicons sollte also darauf geachtet werden, ein für die Marke/den Shop repräsentatives Bild auszuwählen, so dass der Wiedererkennungswert der Website erhöht wird. Die logische Wahl für die meisten Websites/Onlineshops ist das eigene Logo.

Bei der Erstinstallation eines Gambio-Shops wird als Favicon standardmäßig das Gambio-Logo angezeigt.

 

gambio favicon


Ein individuelles Favicon hochladen

Im Gambio-Administrationsbereich hat jeder Shopbetreiber die Möglichkeit, ein Favicon seiner Wahl hochzuladen und so den Wiedererkennungswert seines Shops zu erhöhen. Um das Favicon für euren Shop nach euren Wünschen anzupassen, geht ihr im Adminbereich unter Darstellung auf den Logo Manager und wählt dort aus dem oberen Menü den Punkt „Favicon“.

 

Favocon hochladen im Gambio-Shop


Dort ladet ihr  anschließend über den Button „Durchsuchen“ das gewünschte Bild von eurem Rechner hoch und geht auf „Speichern“. Aktiviert dabei die Option „Datei verwenden“ um das hochgeladene Logo direkt für euren Shop zu verwenden.

 

Favicon auswählen und hochladen im Gambio-Shop

 

Wichtig:
Beachtet dabei, dass es sich bei dem hochgeladenen Bild um ein echtes Favicon mit der Endung .ico und den Maßen 16×16 oder 32×32 Pixel handeln muss. Bei älteren Browsern können Probleme bei der Darstellung von 32×32-Favicons entstehen. Wenn ihr hier auf Nummer sicher gehen wollt, wählt also 16×16 Pixel.

Wenn ihr ein Bild mit der korrekten Endung und dem passenden Format ausgewählt habt, solltet ihr im Logo Manager anschließend die Meldung erhalten, dass die Datei erfolgreich hochgeladen werden konnte.

 

Favicon erfolgreich hochgeladen

 

Hinweis:
Sollte das Favicon nicht hochgeladen werden können, überprüft bitte die Verzeichnisrechte der Verzeichnisse /images und /images/logos auf dem FTP-Server, da diese über die notwendigen Rechte (777) verfügen müssen.

Das neue Favicon im Browser anzeigen lassen

Um das Favicon im Browser angezeigt zu bekommen, leert als letztes noch unter Toolbox ⇒ Cache leeren den Cache für die Seitenausgabe. Ruft nun die Seite im Browser erneut auf, das neue Icon sollte jetzt angezeigt werden.

 

neues favicon im browser

 

Wichtig:
Es kann vorkommen, dass das Favicon trotz erfolgreichen Hochladens dennoch nicht sofort im Browser angezeigt wird. Leert in diesem Fall euren Browsercache und ladet die Seite erneut.

Für die Erstellung Ihres eigenen Favicons finden sich im Internet diverse Seiten, auf denen ihr ein Bild eurer Wahl schnell und einfach umwandeln könnt:

http://www.favicon-generator.org/
http://www.favicon.cc/
http://realfavicongenerator.net/

uvm.


Touch Icon für die Darstellung auf mobilen Geräten hochladen

Im Administrationsbereich des Gambio-Shops gibt es zusätzlich die Möglichkeit, ein sogenanntes Touch Icon, also ein eigenes Logo für die Darstellung auf mobilen Geräten hochzuladen. Dieses Logo wird immer dann angezeigt, wenn ihr euch zum Beispiel eine Seite auf eurem Tablet bookmarkt. Um ein solches Icon hochzuladen, geht ihr im Logo Manager auf den Punkt „Apple Touch Icon“. Dort führt ihr die gleichen Schritte aus wie für das Hochladen eines Browser-Favicons. Sobald hier eine Datei erfolgreich hochgeladen wurde, wird auf der Bedieneroberfläche von Tablets oder Smartphones das hochgeladene Icon angezeigt.

 

Das Apple Touch Icon im Gambio-Shop hochladen

 

Wichtig:
Um eine optimale Darstellung auf sämtlichen Mobilgeräten zu ermöglichen, ladet ihr bitte eine PNG-Datei der Größe 180×180 Pixel hoch. So stellt ihr sicher, dass euer Logo auch auf großen mobilen Bildschirmen in ausreichender Größe ausgegeben wird. Für kleinere Bildschirme wird das Bild automatisch angepasst.

Für das Erstellen eines Touch Icons eignen sich gängige Bildbearbeitungsprogramme wie z.B. Gimp. Es sind bei der Erstellung keinerlei zusätzliche Einstellungen vonnöten, um z.B. die bekannten runden Ecken und Schatteneffekte der iOS-Icons zu erhalten, diese werden von Apple automatisch hinzugefügt.


Ein Favicon aus dem Gambio-Shop löschen

Um ein hochgeladenes Favicon wieder aus eurem Gambio-Shop zu löschen, müsst ihr im Logo Manager den Haken bei „Datei löschen“ setzen und auf „Speichern“ klicken. Anschließend erhaltet ihr die Meldung, dass die Datei gelöscht wurde. Wenn ihr jetzt euren Shop erneut aufruft (Caches des Shops und des Browsers wie oben beschrieben leeren), wird im Browser kein Icon mehr neben dem Seitentitel angezeigt. Um nun erneut ein Icon einzubinden, führt ihr einfach die oben unter ‚Ein individuelles Favicon hochladen‘ beschriebenen Schritte durch.

 

Das Favicon im Gambio-Shop löschen

 

gambio-shop ohne favicon


Fazit:
Mit dem Einbinden eines individuellen Favicons sorgt ihr dafür, dass euer Shop auch im Browser einen hohen Wiedererkennungswert erreicht und zudem eure Marke gestärkt wird. Wählt also sorgfältig ein für euren Shop repräsentatives Motiv aus, um den bestmöglichen Effekt zu erzielen.


Für aktuelle News aus der Welt des E-Commerce folgt uns bei Twitter

Selbstverständlich findet ihr uns auch bei Facebook

Mit Gambio ganz einfach noch heute den eigenen Onlineshop erstellen

Mehr erfahren