Wer wahrgenommen werden möchte, muss auf sich aufmerksam machen. Das gilt nicht nur für den privaten und beruflichen Alltag, sondern ganz besonders auch für die Präsenz im Internet. Dieser Beitrag befasst sich jetzt allerdings nicht mit dem Megathema Suchmaschinen-Optimierung. Ich möchte Ihnen vielmehr eine kleine interessante Methode vorstellen, wie Sie die Wiedererkennbarkeit Ihrer Marke bei Kunden und Interessenten steigern können und nebenbei auch das Vertrauen Ihrer Website-Besuchern gewinnen können. Platzieren Sie Ihr Logo oder ein anderes Icon einfach als Favicon (engl. Favoriten-Symbol) – für jeden sofort sichtbar – direkt in der Browserzeile bzw. dem Browser-Tab.

Was ist ein Favicon?

Favicons sind nicht neu, sondern sie werden bereits seit Jahren von vielen großen und kleinen Webseiten sehr erfolgreich eingesetzt. Wenn Sie im Internet surfen, werden Sie automatisch auf diese stoßen, denn es gibt kaum noch eine renommierte Webpräsenz, die auf dieses Mittel verzichtet. Als Favicon bezeichnet man Icons, Piktogramme oder Bilder, die als markantes grafisches Wiedererkennungsmerkmal neben der eingegebenen Internet-Adresse auftauchen. Das Favicon erscheint entweder direkt in der Adresszeile links neben der Seiten-URL, wie zum Beispiel im Internet-Explorer.

In den moderneren Browsern wird das Favicon in der Regel im Browser-Tab neben dem Titel der Webseite angezeigt, zum Beispiel im Firefox, Chrome etc.

Auch ausgewählte Webseiten, die Sie bookmarken, werden in der Lesezeichenübersicht mit dem jeweiligen Favicon angezeigt.

Welche Abbildungen können Sie als Favicon verwenden

Damit Sie eine Abbildung (Bilddatei, Grafik oder Piktogramm) als Favicon nutzen können, müssen Sie die entsprechende Datei idealerweise in ein .ico-Format konvertieren? .ico ist ein Format, das in den Microsoft-Betriebssystemen Windows zur Speicherung von Icons verwendet wird. Bei der Konvertierung sollten Sie darauf achten, dass das Endformat quadratisch ist und eine Auflösung von 16 x 16 bis maximal 48 x 48 Pixel hat.

Neben dem .ico-Format können aktuelle Browserversionen in der Regel auch Favicons im .gif- oder .png-Format erkennen. Da diese Formate allerdings bei älteren Browser unter Umständen zu Problemen führen können, sollten Sie sicherheitshalber das klassische .ico-Format nutzen.

Mit welchen Programmen können Sie eine Datei in ein .ico- Format konvertieren?

Da das .ico-Format schon etwas aus der Mode gekommen ist, benötigen Sie für die Konvertierung mit einer aktuelleren Photoshop-Version ein spezielles Plug-In. Dieses Plug-In ist kostenlos erhältlich. Das Computer Magazin Chip hat dazu eine How-to-Anleitung zusammengestellt. Sie finden diese unter: http://praxistipps.chip.de/ico-datei-in-photoshop-erstellen-so-gehts_31037 Wenn Sie dagegen das Bildbearbeitungsprogramm Gimp auf Open-Source-Basis nutzen, können Sie Ihre Grafiken dagegen direkt als Microsoft-Windows-Symbol *.ico exportieren. Einfach und kostenlos.

Favicon in die Webseite einbinden

Wählen Sie ein passendes Symbol, das Sie als Favicon nutzen möchten. Sie können zum Beispiel eine Miniaturversion Ihres Logos oder eine Bilddatei in eine quadratische ico-Datei konvertieren. Anschließend müssen Sie das Favicon nur noch in Ihre Webseite einbinden. Dafür stehen Ihnen zwei Möglichkeiten zur Verfügung. Eine sehr einfache, die aber nicht bei allen Browsern verlässlich funktioniert. Und eine sehr zuverlässige, dafür etwas kompliziertere Methode, bei der Sie das Favicon über ein HTML-Element referenzieren müssen.

Der einfache Weg
Legen Sie die .ico-Datei einfach unter dem Namen favicon.ico im Hauptverzeichnis Ihrer Domain ab. Sie können dafür zum Beispiel ein FTP-Programm wie FileZilla nutzen. Achten Sie bitte unbedingt auf die richtige Dateibezeichnung! favicon.ico muss mit Kleinbuchstaben geschrieben werden. In meinem Beispiel habe ich eine Miniaturabbildung zu einem Favicon umgewandelt. Das Ergebnis sieht dann folgendermaßen aus.

Wenn Sie z.B. Ihre Webseite mit einem Homepage-Baukasten von Host Europe erstellen, ist die Integration Favicons besonders einfach. Loggen Sie sich in Ihren Homepage-Baukasten ein. Klicken Sie auf „Favicon“ im Menü „Verwalten“ und ziehen Sie das als Favicon ausgewählte Bild ganz einfach per Drag & Drop in das Uploadfenster.

Favicons, die auf diese Weise eingebunden sind, werden von den meisten Browsern erkannt, doch leider nicht von allen. Außerdem erscheint ein Favicon, das im Hauptverzeichnis einer Domain abgelegt ist, automatisch auch beim Aufruf aller unter dieser Domain eingerichteten Subdomains.

Daher möchte ich Ihnen abschließend die sicherere, dafür aber etwas kompliziertere Methode der HTML-Referenzierung vorstellen.

Die sichere Lösung – Referenzierung über ein HTML-Element
Erstellen Sie zunächst ein Favicon und laden Sie dieses in das Hauptverzeichnis Ihrer Domain oder in ein anderes Verzeichnis auf Ihrem Hosting-Produkt. Neben dem .ico-Format können Sie auch ein .gif- oder .png-Format nutzen und einen individuellen Dateinamen verwenden. Die Datei braucht auch nicht den Namen favicon.ico tragen, sondern Sie können den Dateinamen frei wählen. Die Datei muss allerdings referenzieren werden. Dafür brauchen Sie lediglich eine der folgenden Code-Zeilen im Kopfbereich () des HTML-Elements Ihrer Webseite ergänzen, auf der Sie das Favicon einbinden wollen. Welche der folgenden Code-Zeilen Sie einfügen müssen, ist abhängig davon, welches Datei-Format Sie für Ihr Favicon gewählt haben.

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

<link rel="icon" type="image/vnd.microsoft.icon" href="(GENAUE PFADANGABE/DATEINAME.ico">

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

<link rel="icon" type="image/gif" href="(GENAUE PFADANGABE/DATEINAME.gif">

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

<link rel="icon" type="image/png" href="(GENAUE PFADANGABE/DATEINAME.png">

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

In diesem Fall habe ich ein Logo eingebunden. Das Ergebnis sieht dann folgendermaßen aus:

Favicons für mobile Geräte – wie wichtig sind Favicons für mobile optimierte Webseiten

Benötigt eine mobile optimierte Webseite überhaupt ein Favicon? Warum ist das überhaupt wichtig? Schließlich werden Favicons z.B. im Browserfester eines Smartphones in der Regel gar nicht dargestellt. Handelt sich dagegen um ein Gerät mit größerem Bildschirm, wie z.B. ein Tablet, ist das Favicon allerdings wieder sichtbar. Deshalb sollten Sie bei der Gestaltung einer mobil optimierten Webseite unbedingt ein Favicon einbinden.

Aber es gibt noch einen weiteren Grund: Smartphones und Tablets benötigen ein Favicon, wenn Sie beispielsweise eine bestimmte Webseite auf dem Home-Screen Ihres mobilen Endgerätes speichern möchten. Die Startseite der entsprechenden Webseite wird dann in Form eines Touch-Icons dargestellt. Aufgrund der Vielzahl unterschiedlicher Systeme sollten Sie vier verschiedene Arten von Favicons bereitstellen:

  • Für aktuelle Browser sollten Sie das Favicon als 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 sollten Sie Grafiken für Kacheln (Windows 8 Tiles) bereitstellen.

Speziell 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.

Über einen Favicon-Generator können Sie die verschiedenen Formate schnell und einfach erstellen.

Die häufigsten Fragen zu Favicons

  • Warum sollte man einer Webseite ein Favicon zuweisen?

    Mit der Einbindung eines Favicons können Sie den Wiedererkennungswert Ihrer Webseite deutlich erhöhen, insbesondere dann, wenn ein User Ihre Webseite auf dem Home-Screen seines mobilen Endgerätes speichern möchte oder ein Lesezeichen zu Ihrer Webseite eingerichtet hat. Ein Favicon als individuelles Bild wird vom User gewöhnlich deutlich schneller wahrgenommen und wiedererkannt, als ein einfacher Textlink oder ein Standard-Icon.

  • Welchen Einfluss hat ein Favicon auf die Ladezeit einer Webseite?

    Beim Aufruf einer Webseite sucht der Browser standardmäßig nach einem Favicon. Haben Sie kein Favicon hinterlegt, kann sich dadurch unter Umstanden die Ladezeit Ihrer Seite verlängern. Im Extremfall kann ein fehlendes Favicon sogar zu einer 404-Fehlermeldung führen.

  • Welchen Vorteil hat es, wenn man das Favicon im ico-Format hinterlegt?

    Wenn Sie im Hauptverzeichnis Ihrer Domain ein Favicon mit dem klassischen ico-Format hinterlegen, so wird dieses automatisch vom Browser erkannt.

  • Kann es zu Problemen führen, wenn man das Favicon im PNG-Format abspeichert?

    PNG ist heute das am meisten verwendete Grafikformat im Internet. Aktuelle Browser sollten mit diesem Format normalerweise keine Probleme haben. Ein Favicon im PNG-Format wird allerdings von einigen älteren Browsern nicht als Favicon erkannt. Sicherheitshalber sollten Sie für diese Fälle das Favicon im .ico-Format hinterlegen. Ähnliche Probleme können auch bei der Verwendung des Internet Explorers auftreten.

Fazit

Wie Sie sehen, ist ein Favicon im Handumdrehen erstellen und sehr leicht einzubinden. Nutzen Sie diese einfache Möglichkeit, muss auf sich aufmerksam zu machen. Mit vergleichsweise wenig Aufwand schaffen Sie ein markantes (Wieder)Erkennungsmerkmal für Ihre Internetpräsenz, das bereits beim Aufruf der Seite sofort ins Auge springt.

Wir freuen uns über jede weitere Anregungen zum Thema. Schicken Sie uns einfach einen Kommentar.

Wolf-Dieter Fiege

Wolf-Dieter Fiege ist Senior Specialist für Content Marketing & SEO und Chefredakteur des Blogs der Host Europe GmbH, einem der größten Anbieter von Domain- und Webhosting sowie Serverprodukten in Europa.

6 thoughts on “Ihr Logo in der Browser-Adresszeile – Wie Sie Ihrer Webseite ein Favicon hinzufügen

    • Hallo,
      die Anleitung sollte korrekt sein, da ich schon mehrfach Favicons auf diese Weise eingebunden habe.
      Häufige Fehler sind:
      – das Favicon wurde nicht im richtigen Dateiformat abgespeichert
      – die Schreibweise: favicon.ico muss mit Kleinbuchstaben geschrieben werden
      – falsche Referenzierung / falsche Angabe des Dateipfads
      Am besten das noch mal checken.
      Beste Grüße
      Wolf-Dieter Fiege

  1. Hallo Wolf Dieter.

    manchmal sind die Dige wirklich einfach :). Ich habe nun die methode mit dem Hauptverzeichns genutzt und das funktioniert widerbar.
    lg
    maykay

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.