Favicon mit HTML einbinden

Sie haben zwei Möglichkeiten, wenn Sie ein Favicon mit HTML einbinden möchten. Am sinnvollsten ist es allerdings, die Bildmarke über ein HTML-Element zu referenzieren. Für die Erstellung der passenden Bildmarke ist ein Generator der beste Weg.

Ein Favicon (Kofferwort aus „favorite“ und „icon“) ist die kleine Bildmarke, die z. B. im Reiter dieses Tabs als weißes „I“ auf blauem Grund angezeigt wird. Das kleine Icon sorgt nicht nur für hohen Wiedererkennungswert in den Tab-Reitern, sondern wird u. a. auch in der Toolbar, bei den Lesezeichen, in einer App-Liste oder bei den Sucherergebnissen Ihrer Suchmaschine angezeigt. Alles Wissenswerte zu dem nützlichen Symbol finden Sie in unserem umfassenden Guide zum Thema „Was ist ein Favicon?“.

Bevor Sie ein Favicon mit HTML einbinden können, müssen Sie es zunächst selbst erstellen. Auch hierzu finden Sie wertvolle Tipps im oben verlinkten Ratgeber. Sie sollten dafür sorgen, dass das Bildchen in niedriger und hoher Auflösung funktioniert und sofort als Teil Ihrer Marke zu erkennen ist. Die passenden Auflösungen, die für die meisten Browser funktionieren, sind 16 x 16 oder 32 x 32 Pixel und das Bild sollte möglichst in den Formaten .ico, .gif oder .png gespeichert werden. Am einfachsten funktioniert die Erstellung allerdings mit einem guten Favicon-Generator für HTML.

Am sichersten können Sie Ihr Favicon einbauen, indem Sie es über HTML referenzieren. Dafür laden Sie die Bildmarke in das Hauptverzeichnis Ihrer Domain. Wir erklären Ihnen hier Schritt für Schritt, wie Sie ein Icon in Ihre Website einbinden.

Schritt 1: Erstellen Sie zunächst ein Icon im richtigen Format. Achten Sie darauf, dass das Bild die richtige Größe für ein Favicon hat, möglichst kontrastreich ist und auch bei geringer Auflösung funktioniert.

Schritt 2: Laden Sie das Icon in das Hauptverzeichnis Ihrer Domain hoch.

Schritt 3: Rufen Sie nun den Header Ihrer Website auf und geben Sie folgenden Code ein:

Dieser Weg funktioniert allerdings nur, wenn Sie ein Icon im .ico-Format auf Ihrer Website einbinden. Für .png lautet der passende Code folgendermaßen:

Haben Sie Ihr Favicon für HTML im .gif-Format angelegt, nutzen Sie diesen Code:

Wenn Sie ein Favicon mit HTML einbinden möchten, gibt es allerdings auch noch eine deutlich einfachere Methode. Hierbei müssen Sie selbst keinen Code schreiben, sondern lediglich die Datei erstellen und korrekt benennen. Wenn Sie die Bildmarke im richtigen Format angelegt haben, speichern Sie sie unter dem Namen favicon.ico und legen sie dann im Hauptverzeichnis Ihrer Domain ab. Diese Methode funktioniert nur, wenn Sie den Namen korrekt angeben. Achten Sie dabei insbesondere auf die komplette Kleinschreibung.

Das Favicon so mit HTML einzubinden, hat allerdings auch zwei Nachteile: Erstens erkennen zwar die meisten, aber nicht alle Browser diesen Weg an. Zweitens bedingt dieses Vorgehen, dass auch alle Subdomains, die unter der Hauptdomain angelegt sind, mit diesem Icon angezeigt werden. Die deutlich sicherere Methode ist daher die oben beschriebene.

Wenn Sie ein Favicon einbinden, hat das zahlreiche Vorteile. Ihre Website wirkt professioneller, wird schneller gefunden und verfügt über ein stringentes Design. Gerade in Bezug auf die Optimierung für mobile Endgeräte wie Smartphones oder Tablets ist das kleine Symbol allerdings noch wichtiger. So benötigen Mobile Devices ein Favicon, um eine Website mit einem Touch-Icon auf dem Homescreen zu speichern. Dafür nutzt das Gerät die hinterlegte Bilddatei. Da es hierbei allerdings Unterschiede zwischen den verschiedenen Anbietern gibt, sollten Sie mehrere Formate anlegen, wenn Sie Ihr Favicon einbinden:

• Eine .ico-Datei, die insbesondere für ältere Browser notwendig ist. Der Dateiname lautet in diesem Fall favicon.ico.
• Eine .png-Datei für neuere Browser. Diese nennt sich favicon.png.
• Ein Apple-Touch-Icon für Android Chrome und iOS Safari. Dieses hat das Format 128 x 128 Pixel.

Am einfachsten gelingt Ihnen die Erstellung aller Dateien mit einem entsprechenden Programm wie dem IONOS Favicon-Generator.