Du hast dir mit deinem Geschäft einen guten Namen gemacht und bist bei deinen Kunden bekannt. Du hast attraktiv gestaltete Verkaufsflächen und ein markantes Logo. Sehr gut! Schließlich ist die Wiedererkennbarkeit bei Kunden, Neukunden und Interessenten eine wichtige Voraussetzung für deinen Geschäftserfolg. Das gilt natürlich auch für deinen Auftritt im Internet.

Achte auf Wiedererkennbarkeit - auch bei deinem Online-Auftritt

Mit einem Online-Shop kannst du dein Angebot sinnvoll erweitern sowie einfach und bequem neue Zielgruppen erreichen. Allerdings sollte jeder Besucher, der deine Seite aufruft, idealerweise auf den ersten Blick erkennen, dass es „deine Seite" ist. Denn Wiedererkennbarkeit schafft Vertrauen und Orientierung. Bei der Seitengestaltung (inkl. Logo, Schrift, etc.) solltest du dich daher eng an deinem Unternehmensauftritt orientieren. Aber es gibt noch einen weiteren interessanten Aspekt, den du beachten solltest: den Browser-Tab. Im Folgenden zeige ich dir einige Tricks, wie du dein Logo als Favicon genau dort platzieren kannst.

Was ist ein Favicon? Das Wort „Favicon" setzt sich aus den englischen Worten „Favorite" und „Icon" zusammen und bedeutet in etwa „Lieblingsbild". Das Favicon erscheint einem Internetnutzer neben dem Titel der Seite im geöffneten Tab. Außerdem markiert das Favicon eine als Favorit gespeicherte Seite in der Liste der Lesezeichen und wird als Desktop-Logo für eine verknüpfte Website verwendet.

Ein Favicon wird unter anderem in jedem offenen Tab neben dem Namen der Webseite angezeigt.

Beachte die quadratische Größe und das Speicherformat beim Favicon

Damit auch deine Webseite ein unverkennbares Favicon erhält, erstellst du eine Icon-Datei mit der Abmessung 16×16 Pixel. Für eine etwas bessere Qualität kannst du auch Formate bis 48×48 Pixel verwenden. Achte darauf, dass es sich idealerweise um eine echte Icon-Datei handelt, die auch die Dateiendung „.ico" hat. Aktuelle Browser erkennen in der Regel auch Formate wie .png und .jpg, Um das Bild jedoch auch für ältere Browser standardkonform darzustellen, solltest du möglichst das Format .ico verwenden.

Tipp für das eigene Favicon: Das Symbol ist mit grade einmal 16×16 Pixeln sehr klein. Je mehr Formen, Farben und Linien es enthält, desto schwieriger ist es zu erkennen. Für ein Favicon gilt deshalb: Wähle ein klar erkennbares Symbol oder eine Grafik, die möglichst keine feinen Linien und nicht zu viele Farben beinhaltet. Hat das Logo bereits eine rechteckige Form, umso besser. Passe das Logo sonst an die quadratische Vorgabe an oder speichere andere Formen mit transparentem Hintergrund ab.

Wie erstellt man eine .ico-Datei?

Wenn du eine .ico-Datei erstellen möchten, kannst du dazu beispielsweise das kostenlose Grafikprogramm „GIMP" verwenden. Mit GIMP kannst du z.B. dein bestehendes Firmenlogo öffnen oder ein passendes Symbol ausschneiden und auf die gewünschte Größe bringen.

Alternativ zu einem Grafikprogramm findest du im Web weitere praktische Werkzeuge, wie z.B. www.converticon.com oder www.icoconverter.com

Diese Programme wandeln ein bestehendes Bild im .png-, .gif- oder .jpg-Format in das .ico-Format für dich um. Die so erzeugte Grafik kannst du dann einfach aus dem Programm herunterladen und in die eigene Webseite einfügen.

So bindest du ein Favicon in deine Internetseite ein

Nachdem du die Icon-Datei erzeugt hast, bindest du diese nun in deine eigene Webseite ein. Dazu speicherst du das Favicon im Hauptverzeichnis deiner Domain unter dem Dateinamen „favicon.ico".

Außerdem solltest du in deinem Website-Code einen Verweis auf die Datei hinterlegen. In der href-Angabe muss der Dateipfad und der Name des Logos angegeben werden.

So einfach fügst du deiner Webseite das eigene kleine Mini-Logo hinzu.

Ergänze im Kopfbereich () des HTML-Elements deiner Webseite folgende Code-Zeilen:

Handelt es sich um ein .ico-Format, ergänze bitte folgende Zeile:

Handelt es sich um ein .gif-Format, ergänze bitte folgende Zeile:

Handelt es sich um ein .png-Format, ergänze bitte folgende Zeile:

Bitte achte darauf, dass sowohl der Pfadangabe als auch der Dateiname korrekt angegeben werden muss.

Dein Logo als Touch-Icon auf mobilen Endgeräten

Auch mobile Geräte nutzen Favicons und zwar dann, wenn der Benutzer eine Direktverlinkung zu deiner Seite, ein sogenanntes Touch-Icon auf dem Home-Screen seines Endgerätes erstellen möchte.

Für aktuelle Browser solltest du das Favicon als PNG (Portable Network Graphic) hinterlegen (favicon.png) Ältere Browser benötigen das klassische Favicon als ico-Datei ( favicon.ico) Mobile Browser auf Basis von Android Chrome und iOS Safari nutzen das Apple Touch-Icon Tipps zur Erstellung eines Apple Touch Icons finden Sie hier. Für den Internet-Explorer und Edge solltest du Grafiken für Kacheln (Windows 8 Tiles) bereitstellen.

Hinweis: Apple Touch Icons und Windows Kacheln (Windows 8 Tiles) benötigen Grafiken in größerer Auflösung: Je nach Gerät und Version werden Icons in den Größen 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 128×128, 144×144 und 152×152 px benötigt. Für Windows 8 Tiles benötigen Sie Grafiken in den Formaten 70×70, 144×144, 150×150, 310×150 und 310×310 px.

Fazit

Wie du siehst, ist es sehr einfach mit deinem Logo ein grafisches Wiedererkennungszeichen im Browser-Tab zu platzieren. Nutze die Möglichkeit, um deinen Internet-Auftritt noch professioneller zu gestalten.

Bildnachweis Headergrafik: Morguefile, Lizenz: GoDaddy