Favicon in Website einbinden: So erscheint Ihr Logo in der Browser-Adresszeile

(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. Im Browser-Tab wird dieses neben dem Titel oder 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.

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 Größe hat ein Favicon?

Aufgrund der vielen Anzeigeorte benötigen Sie für Ihre Webseite unterschiedliche 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 .gif- oder .png-Formate 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 Darstellung für Ihre Webseite vorab 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.

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

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:

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.

Favicon in WordPress bearbeiten

Eine detaillierte Anleitung, wie Sie Ihr Logo oder ein anderes Icon in WordPress bearbeiten, haben wir Ihnen in diesem 101 WordPress-Tutorial zusammengestellt.

Darstellung auf mobilen 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 diese, 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 von Favicons bereitstellen:

• Für aktuelle Browser sollten Sie eine Portable Network Graphic hinterlegen (favicon.png)
• Ältere Browser benötigen das klassische 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 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 für die Erstellung

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

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 Genator 

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-Plugin finden Sie hier

Weitere Favicon-Generatoren

• Favicon Generator. For real
• Favic-O-Matic
• Favikon
• Faviconit
• Der Favicon Generator von Webestools
• Favinator
• FavIcon.pro
• Favicongenerator
• 60 tools.com
• 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.

• Über
• Letzte Artikel

Wolf-Dieter Fiege

Wolf-Dieter Fiege ist Head of Content Marketing Germany und Chefredakteur des Blogs der Host Europe GmbH, einem der größten Anbieter von Domain- und Webhosting sowie Serverprodukten in Europa.

Letzte Artikel von Wolf-Dieter Fiege (Alle anzeigen)

• Kostenlose Übersetzungsprogramme – die besten Online-Tools in der Übersicht - 1. März 2023
• Microsoft Word kostenlos nutzen – die Online-Version mit allen Basisfunktionen - 7. Dezember 2022
• Digitale Transformation im Mittelstand – Status Quo - 6. Dezember 2022