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 (vielfach auch Website-Icon genannt) 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 z. B. in älternen Versionen des Microsoft Internet Explorers.

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

 

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

 

Welche Abbildungen können Sie verwenden

Damit Sie eine Abbildung (Bilddatei, Grafik oder Piktogramm) als individuelles Favicon nutzen können, müssen Sie diese 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 bis maximal 48 px im Quadrat hat.

Neben .ico können aktuelle Browserversionen in der Regel auch Favicons im .gif- oder .png-Format erkennen. Da diese 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.

Das neue Favicon in die Webseite einbinden

Wählen Sie ein passendes Symbol, das Sie als Favicon nutzen möchten. Sie können z. B. eine Miniaturversion Ihres Logos oder eine Bilddatei in eine quadratische .ico-Grafik 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 Website mit einem Homepage-Baukasten von Host Europe erstellen, ist die Integration besonders einfach. Loggen Sie sich in Ihren Homepage-Baukasten ein. Klicken Sie auf „Favicon“ im Menü „Verwalten“ und ziehen Sie das gewünschte Bild ganz einfach per Drag & Drop in das Upload-Fenster.

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. Anschließend müssen Sie dieses in das Hauptverzeichnis Ihrer Domain oder in ein anderes Verzeichnis auf Ihrem Hosting-Produkt hochladen. Neben  .ico können Sie auch ein .gif- oder .png-Format nutzen und einen individuellen Dateinamen verwenden. Die Grafik 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. Welche der folgenden Code-Zeilen Sie einfügen müssen, ist abhängig davon, welches Format Sie für Ihr Favicon gewählt haben.

Handelt es sich um ein .ico-Dateiformat, 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, ergänzen Sie bitte folgende Zeile:

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

Handelt es sich um ein .png, 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:

Favicon in eine WordPress-Seite einbinden

Selbstverständlich können Sie Ihr Logo oder eine andere kleine Grafik in der Adresszeile Ihrer WordPress-Webseite anzeigen lassen.

Das Vorgehen dabei ist praktisch das gleiche, wie oben beschrieben:

  • Erstellen Sie das Favicon als .ico-, .gif-, oder .PNG-Grafik.
  • Laden Sie diese mit einem FTP-Client in das Hauptverzeichnis Ihrer WordPress-Installation hoch.
  • Referenzieren Sie das Favicon, indem Sie den oben beschriebenen HTML-Code in den Theme-Header Ihrer WordPress-Seite einfügen. Sie können dafür einen Editor benutzen oder die Änderung direkt über das Dashboard vornehmen, z.B. über das Menü Design/Editor und dann die entsprechenden Datei (header.php) auswählen. Achten Sie darauf, dass Sie Sie den Code zwischen den Zeilen <head> und </head> einfügen.

Bei einigen WordPress-Themes können Sie Favicon einfach in die Mediathek hochladen und über die Theme-Optionen als Website-Icon einbinden. Sie finden diese Funktion z. B. beim Theme Twenty Seventeen unter Design/Customizer/Website-Informationen.

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 Größen 70×70, 144×144, 150×150, 310×150 und 310×310 px.

Über einen Favicon-Generator können Sie die verschiedenen Versionen 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 Internetpräsenz deutlich erhöhen, insbesondere dann, wenn ein User Ihre Webseite auf dem Home-Screen seines mobilen Endgerätes speichern möchte oder ein Lesezeichen eingerichtet hat. Ein 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 keines 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 bietet das ico-Format?

    Wenn Sie im Hauptverzeichnis Ihrer Domain ein Favicon im klassischen ico-Dateiformat hinterlegen, so wird dieses automatisch erkannt.

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

    PNG ist heute das am meisten verwendete Grafikformat im Internet. Aktuelle Browser sollten damit normalerweise keine Probleme haben. Ein Favicon als .PNG wird allerdings von einigen älteren Browsern nicht als Favicon erkannt. Sicherheitshalber sollten Sie dieses deshalb als .ico-Datei 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.

14 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

  2. Wirklich eine super Anleitung zum Hinzufügen von Favicons ! Habe mich schon immer mal gefragt, wie man so etwas macht und habe keine andere hilfreiche Anleitung im Internet gefunden…jedenfalls keine verständliche. Also vielen dank für diesen Artikel.

  3. Mit Corel DRAW braucht man keinen Extra-Plugin.zu installieren.
    Wurden bei der Installation sämtliche Filter installiert, findet man unter [Exportieren] den Dateityp ‚ICO‘. Ansonsten nachinstallieren.

    Evtl. muss dieser Dateityp einmalig wie folgt aktiviert werden:
    Extras > Optionen > Global > Filter > Raster
    [ICO – Windows 3x/NT-Symbol-Ressource] anklicken
    > Hinzufügen
    Fertig! Funktioniert in Corel DRAW und in Corel Photopaint.

    HINWEIS:
    Dieser Corel-ICO-Importfilter ist gleichzeitig der ICO-Exportfilter.

    • Hallo Herr Kindel,

      nein, ein Plug-In ist für die Einbindung (normalerweise) nicht erforderlich. Am Sichersten ist natürlich das Favicon als ICO-Datei im Hauptverzeichnis. Mit welchem Programm die ICO-Datei erstellt wird, spielt dabei keine Rolle. Das kann natürlich auch Corel Draw sein.

      Mit besten Grüßen
      Wolf-Dieter Fiege

    • Gerne. Ja, Favicons sind ein kleines, aber sehr nützliches Mittel, um die Wiedererkennbarkeit einer Webseite zu steigern und – wie man sieht – wirklich sehr einfach umzusetzen.

Schreibe einen Kommentar

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