(Update 29.06.2021) 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 Suchmaschinenoptimierung. Hier wird Ihnen vielmehr eine kleine interessante Methode vorgestellt, wie Sie die Wiedererkennbarkeit Ihrer Marke bei Kunden und Interessenten steigern und nebenbei auch das Vertrauen Ihrer Website-Besucher 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 beziehungsweise dem Browser-Tab. Websites ohne Favicon sind ein Zeichen von schlechter Umsetzung – die Einbindung gehört beim Erstellen einer Website zu den Pflichtaufgaben von Webdesigern.

Was ist ein Favicon?

Favicons sind Icons, Piktogramme oder Bilder, die im Browser als markantes grafisches Wiedererkennungsmerkmal neben der eingegebenen Internet-Adresse auftauchen. Das Favicon wird im Browser-Tab neben dem Titel und beispielsweise in der Favoritenliste angezeigt.

Wo erscheinen die Favicons?

Favicons erscheinen unter anderem im Browser-Tab, in der Browser-History, in der Toolbar, in den Lesezeichen und in den Suchergebnissen von Suchmaschinen.

Abbildung_-_Favicon-im-IE

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.

Abbildung---Favicon_-_Microsoft-Edge_Lesezeichen

Welche Größe hat ein Favicon?

Aufgrund der vielen Anzeigeorte benötigen Sie das Favicon für Ihre Website in unterschiedlichen Größen:

  • Das Standard-Format für die Anzeige im Browser ist 16 x 16 Pixel groß.
  • Als Shortcut-Icon in der Taskbar sollte es 32 x 32 Pixel groß sein.
  • Als Desktop-Icon und zum Beispiel für Google TV benötigen Sie ein 96 x 96 Pixel großes Icon.
  • Wenn Sie eine Website in Apples iOS oder bei Android auf dem Homescreen speichern, wird das Icon ebenfalls angezeigt. Für iOS 10 ist das Favicon 152 x 152 Pixel groß und für iPhones mit Retina-Display 180 x 180 Pixel.
  • Windows 10 zeigt App-Icons ebenfalls und nutzt Bilder mit 70 x 70, 270 x 270, 310 x 310 und 310 x 150 Pixeln.

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. Achten Sie bei der Konvertierung darauf, dass das Endformat quadratisch ausfällt 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 Browsern unter Umständen zu Problemen führen können, sollten Sie sicherheitshalber auf das klassische .ico-Format zurückgreifen.

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

Für die Konvertierung müssen Sie kein Programm installieren. Stattdessen existieren zahlreiche Online-Bildbearbeitungsprogramme, mit denen Sie die Aufgabe schnell bewältigen. Eine Suchanfrage mit dem Stichwort „Favicon Generator“ zeigt eine Reihe meist kostenloser Tools an:

  • io erstellt ein Favicon aus Text, einem Bild oder Emoji. Es besteht auch die Möglichkeit, ein Logo zu generieren.
  • Favicon-generator.org eignet sich gut für die Umwandlung von .png-, .jpg- und .gif-Dateien ins .ico-Format. Die Icons werden wahlweise nur im Format mit 16 x 16 Pixeln oder fürs Web, für Android, Microsoft und iOS erstellt.
  • Realfavicongenerator erstellt Favicons für alle Browser und Plattformen, Sie laden dafür einfach ein Bild mit mindestens 70 x 70 Pixeln und für optimale Ergebnisse mit 260 x 260 Pixeln hoch. Zusätzlich können Sie die einwandfreie Anzeige Ihres Website-Favicons testen.

Weitere simple Generatoren sind unter anderem Favikon, Faviconit und FavIcon.pro.

Das neue Favicon in die Webseite einbinden

Sie haben zwei Möglichkeiten, um das neue Favicon in Ihre Website einzubinden: 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.

Abbildung: Favicon in der Adresszeile

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

Abbildung - Favicon einfügen mit Homepage-Baukasten

Die meisten Browser erkennen auf diese Weise eingebundene Favicons, doch leider nicht alle. Außerdem erscheint ein Favicon, das im Hauptverzeichnis einer Domain abgelegt ist, automatisch auch beim Aufruf aller unter dieser Domain eingerichteten Subdomains.

Daher wird Ihnen abschließend die sicherere, dafür aber etwas kompliziertere Methode der HTML-Referenzierung vorgestellt.

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 Ihres Hosting-Produkts hochladen. Neben .ico können Sie auch ein .gif- oder .png-Format zum Einsatz bringen und einen individuellen Dateinamen verwenden. Die Datei muss allerdings referenziert werden – dies gelingt mit der Ergänzung der folgenden Codezeilen im Kopfbereich des HTML-Elements Ihrer Webseite. Welche der folgenden Codezeilen Sie einfügen müssen, ist abhängig davon, welches Dateiformat Sie 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:

Abbildung: Logo in Adresszeile

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.
  • Alternativ können Sie das Favicon in die Mediathek hochladen und bei zahlreichen WordPress-Themes einfach über die Theme-Optionen als Website-Icon einbinden. Sie finden diese Funktion beispielsweise beim Theme Twenty Seventeen unter Design/Customizer/Website-Informationen.

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.

Abbildung_-_Favicon-über-WordPress-Dashboard

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

Bei der Gestaltung einer mobil optimierten Webseite sollten Sie unbedingt ein Favicon einbinden. Smartphones und Tablets benötigen ein Favicon, wenn Sie zum Beispiel eine bestimmte Webseite auf dem Home-Screen speichern möchten. Die Startseite der entsprechenden Webseite wird dann in Form eines Touch-Icons dargestellt. Aufgrund der Vielzahl unterschiedlicher Systeme sollten Sie drei verschiedene Arten 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. Die verschiedenen Versionen der Apple Touch Icons können Sie über einen der online verfügbaren Favicon-Generatoren schnell und einfach erstellen lassen.

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.

 

Kostenlose Favicon-Generatoren im Überblick

Wenn Sie das Stichwort „Favicon Generator“ in die Google-Suche eingeben, finden Sie eine Vielzahl von Favicon-Generatoren, die Sie in der Regel sogar kostenlos verwenden können. In der Mehrzahl sind es Online-Tools, mit denen Sie schnell und einfach zum Beispiel ein Logo in ein Favicon umwandeln oder mit Hilfe eines Editors eine Favicon-Grafik selbst erstellen können. Einige der interessantesten Favicon-Generatoren möchte ich Ihnen hier vorstellen.

Favicon.io – mit drei Optionen der Faviconerstellung

Beginnen wir mit einem meiner Favoriten: Favicon.io. Das ist ein Tool, dass Ihnen gleich drei unterschiedliche Optionen für die Erstellung eines Favicons bietet.

Nummer 1. Einfache Text-Icons. Wählen Sie einfach einen oder mehrere Buchstaben aus. Entscheiden Sie sich für eine bestimmte Form: Kreis oder Quadrat (wahlweise rechteckig oder mit abgerundeten Ecken). Definieren Sie Schriftgröße, Schriftfarbe und Hintergrund und fertig ist Ihr Favicon. Ideal z.B. für Startups oder Microsites. Alternativ können Sie natürlich auch ein Logo oder eine Grafik hochladen und diese umwandeln.

Sehr interessant ist auch die Option 3, die Emoji-Favicons. Wählen Sie ein Emoji und binden Sie dieses als Website Icon auf Ihrer Seite ein. Sie können unter mehreren Hundert Emojis wählen.

Die Hinweise zur Installation und Einbindung in Ihre Webseite sind dagegen relativ knapp gehalten.

Zum Generator Favicon.io

Vom Design her sind die beiden folgenden Tools eher schlicht gehalten, dafür bieten Sie Ihnen allerdings den Vorteil, dass der Code für die Einbindung automatisch generiert wird. Sie brauchen die Favicons lediglich in das Hauptverzeichnis Ihrer Webseite hochladen und den entsprechenden Code in die Header-Datei Ihrer Webseite einfügen.

Der Favicon-Generator von Dan’s Tools – schlicht – einfach – praktisch

Dieses Tool ist wirklich sehr einfach zu handhaben. Laden Sie ein Logo oder eine Grafik hoch und erstellen Sie mit wenigen Klicks Ihr Favicon. Das Häkchen von „Include your favicon.ico in the public gallery“ sollten Sie jedoch deaktivieren, besonders dann, wenn Sie das Favicon für eine geschäftliche Webseite nutzen wollen. Die Icon Gallery des Tools hat dementsprechend wenig zu bieten, aber das sollte Sie nicht stören.

Das Tool konvertiert Ihre Grafik zu einer Sammlung von Favicons in den wichtigsten Formaten und erstellt automatisch den Code, mit dem Sie die diese in Ihre Webseite einbinden können. Beides müssen Sie dann nur noch downloaden.

Zum Seite von Favicon-Genator.org 

 

Der Favicon Generator als WordPress Plugin

Wenn Sie mit WordPress arbeiten, können Sie sich einen Generator natürlich auch als Plugin installieren. Ein sehr beliebtes Plugin dafür ist zum Beispiel der Favicon by RealFaviconGenerator.

Weitere Informationen zu diesem WordPress-Favicon-Plugin finden Sie hier

 

Weitere Favicon-Generatoren

Abbildung_-_favicon-cc

Die Unterschiede zwischen diesen Tools bestehen hauptsächlich darin, ob Sie mit dem Tool lediglich Logos oder Grafiken uploaden und umwandeln können oder ob Ihnen das Tool auch einen Editor zur Verfügung stellt, mit dem Sie selbstständig eigene Favicons gestalten können.

 

Die häufigsten Fragen

Warum sollte man einer Webseite ein Favicon zuweisen?

Mit der Einbindung eines Website-Icons erhöhen Sie den Wiedererkennungswert Ihrer Internetpräsenz deutlich – insbesondere dann, wenn ein User Ihre Webseite auf dem Home-Screen seines mobilen Endgerätes speichern möchte oder ein Lesezeichen eingerichtet hat.

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 zählt zu den meist verwendeten Grafikformaten im Internet. Ein Favicon als .png erkennen allerdings einige ältere Browser nicht. Sicherheitshalber sollten Sie dieses deshalb als .ico-Datei hinterlegen.

Wie erstelle ich eine Website?

In diesem Artikel stellen wir Ihnen die unterschiedlichsten Möglichkeiten vor, wie Sie eine Website erstellen können und worauf Sie dabei achten sollten. Zum Artikel Website erstellen

 

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.

 

20 thoughts on “Favicon in Website einbinden: So erscheint Ihr Logo in der Browser-Adresszeile

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

  4. Frage zum Favicon-Generator von Dan’s Tools:
    Wenn ich den Code in meine Seite einbinde, muss ich auch das manifest.json mit einbinden. Nun findet man aber überall im Netz Hinweise darauf, dass es sich um einen Trojaner handeln könnte..

    • Hallo Richard,

      vielen Dank für die Nachfrage. Nein, minifest.json ist ein Add-on für Mozilla Firefox, dass lediglich im Zusammenhang mit der Darstellung des Favicons im Firefox addressiert wird. Du brauchst diese Datei nicht in deine Webseite einbinden.
      Mit besten Grüßen
      Wolf-Dieter

  5. Betr. Einbinden des Favicons schreiben Sie dass die genaue Pfadangabe wichtig sei. Meines Wissens reicht die Angabe des Wurzelverzeichnis mittels Slash. Bspl:

    • Hallo,
      die genaue Pfadangabe ist am sichersten, aber es stimmt. Meist reicht auch das Wurzelverzeichnis. Man sollte es in jedem Fall ausprobieren.
      Mit besten Grüßen
      Wolf-Dieter Fiege

Schreibe einen Kommentar

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

Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/