Was klingt wie ein Pokémon, ist in Wirklichkeit eine kleine Grafik: Sogenannte Favicons sind Symbole, die in der Browserleiste links neben der URL einer Webseite stehen. Ihre Aufgabe ist es, für einen besseren Wiedererkennungswert Ihrer Seite sorgen. Das Wort Favicon steht dabei für die Bestandteile „favourite“ und „icon“.

Gute Nachrichten für alle, die mit IT wenig am Hut haben: Das Erstellen und Einbinden eines Favicons gelingt in nur wenigen Schritten. Hier erfahren Sie, wie Sie es anstellen.

E-Book-Download: Mit einer optimierten Website zu mehr Traffic und Leads

Welche Vorteile hat ein Favicon?

Ein Favicon ist eine ausgezeichnete Möglichkeit, um Ihr Unternehmenslogo virtuell in Szene zu setzen. Dafür platzieren Sie es direkt in der Browser-Adressleiste und machen es so für alle Besucher sichtbar.

Favicon Beispiel

Bild: https://www.designerinaction.de

Das Favicon wird darüber hinaus auch in Registerkarten, Lesezeichen oder Verlaufsarchiven eines Browsers angezeigt. Benutzer sehen so direkt Ihr Logo, was ihnen eine zusätzliche Orientierung bietet. So finden die potenziellen Kunden zügig wieder zu Ihnen zurück, ohne lang die URL studieren zu müssen.

Bei Smartphones und Tablets ist das Favicon direkt in den Google-Suchergebnissen sichtbar und wirkt hier als Blickfang.

Wie erstelle ich ein Favicon?

Sie haben es vermutlich schon geahnt: Als Favicon eignet sich besonders Ihr Unternehmenslogo. Wenn Sie dieses ohnehin bereits auf Ihrer Webseite verwenden, können Sie so für einen einheitlichen virtuellen Auftritt sorgen. Doch Vorsicht: Ein Favicon ist ziemlich klein, weshalb sich manche Logos nicht gut konvertieren lassen.

Hat Ihr Logo viele Details, Schattierungen oder andere aufwändige Elemente, ist eine kleine Darstellung eventuell nicht ratsam. Alternativ können Sie daher auch ein einfaches Symbol in den Farben Ihres Corporate Designs verwenden oder Ihr Logo zu diesem Zweck auf ein minimalistisches Design „herunterbrechen“.

Favicon erstellen: Online-Möglichkeiten

Es gibt mittlerweile verschiedene Online-Möglichkeiten, um Favicons zu erstellen. Dafür wandeln Favicon-Generatoren Dateien wie PNG, JPEG, JPG oder GIF in eine ICO-Datei um. Die besten Ergebnisse erhalten Sie, wenn Ihre Ausgangsdatei bereits ein quadratisches Format hat.

Die 6 besten Favicon-Generatoren

Mit Favicon-Generatoren können Sie Favicon-Dateien automatisch erstellen. Wie bereits angedeutet funktionieren die Generatoren am besten mit einfachen Symbolen oder Logos, da bei komplexeren Grafiken durch die Konvertierung Details verloren gehen.

Im nächsten Abschnitt folgt eine Übersicht gängiger Favicon-Generatoren:

1) IONOS Favicon Generator

Der IONOS Favicon Generator erstellt alle gängigen Dateiformate für ein Favicon. Mit dem Tool können auch eigene Favicons direkt im Browser gezeichnet werden. Zusätzlich können auch die zugehörigen App-Icons für Android, iOS und Windows generiert werden.

2) favicon.io

Auf favicon.io haben Sie verschiedene Möglichkeiten, ein Favicon zu erstellen. PNG-Dateien lassen sich mit der Funktion „PNG to ICO“ umwandeln. Mit „TEXT to ICO“ kann ein Favicon aus Buchstaben erstellt werden. Sogar Emojis können mit „EMOJI to ICO“ als Favicon eingebunden werden.

Der Code für die Einbindung in Ihre Webseite wird von favicon.io automatisch erstellt. Sie müssen die Favicons nur in das Hauptverzeichnis Ihrer Webseite laden und den Code in die Header-Datei Ihrer Seite einfügen.

3) Favicon-Genator.org

Auf der Webseite favicon-generator.org können Sie Ihr Logo oder Ihre Grafik einfach hochladen und mit ein paar Klicks ein Favicon erstellen. Achten Sie jedoch darauf, das Häkchen bei „Include your favicon.ico in the public gallery“ zu entfernen.

Ihr Favicon wird automatisch in verschiedenen Formaten erstellt. Dazu erhalten Sie auch den Code, mit dem Sie das Favicon in Ihre Webseite einbinden können.

4) Favic-o-matic

Favic-o-matic bietet zwei interessante Möglichkeiten: Bei Option eins können Sie ein Bild oder eine Grafik hochladen und diese in die ICO-Datei konvertieren.

Benötigen Sie mehr Formate, ist Option zwei passend. Hier werden Favicons für alle üblichen Plattformen (inklusive iOS- und Android-Apps) erstellt. In den erweiterten Einstellungen können Sie dazu bestimmen, welche Favicon-Formate Sie erhalten möchten.

5) Genfavicon

Mit Genfavicon können Sie ein Bild hochladen und es anschließend zuschneiden. Anschließend wird aus Ihrem gewählten Ausschnitt ein Favicon erstellt. In einem Vorschaufenster können Sie sehen, wie das Favicon-Symbol im Browser aussehen wird. Das Favicon kann in folgenden Größen erstellt werden: 16 × 16, 32 × 32, 48 × 48, 64 × 64 und 128 × 128 Pixel.

6) Favicon-Generator als WordPress-Plug-in

Falls Ihre Webseite mit WordPress erstellt wurde, können Sie ein Favicon-Generator-Plug-in installieren. Unser Tipp: Favicon by RealFaviconGenerator ist eine gute Wahl.

Favicon in HTML einbinden

Wenn Sie nun Ihr Favicon generiert haben, müssen Sie die Datei nur noch in Ihre Webseite einbinden. Dazu können Sie die ICO-Datei einfach unter dem Namen „favicon.ico“ im Hauptverzeichnis Ihrer Domain ablegen. Das funktioniert jedoch nicht in allen Browsern – eine Referenzierung über ein HTML-Element ist daher der sicherste Weg.

Um das Favicon in HTML einzubinden, muss es in das Hauptverzeichnis Ihrer Domain hochgeladen werden. Neben dem ICO-Format können Sie auch GIF-Formate oder PNG-Formate verwenden und mit individuellen Dateinamen versehen.

Dabei muss die Datei „favicon.ico“ nicht im Namen haben. Sie muss jedoch zunächst referenziert werden. Dazu benötigen Sie die folgenden Code-Zeilen, die Sie im Kopfbereich () des HTML-Elements Ihrer Webseite ergänzen.

Welche Code-Zeile Sie einfügen müssen, hängt davon ab, welches Dateiformat Sie verwenden.

Bei einem ICO-Dateiformat sieht der Code wie folgt aus:

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

Wenn es sich um eine GIF-Datei handelt, setzen Sie stattdessen folgenden Code ein:

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

Bei einer PNG-Datei verwenden Sie hingegen diese Zeile:

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

Dabei ist es wichtig, dass sowohl der Pfad als auch der Dateiname korrekt angegeben werden.

Favicons sorgen dafür, dass Ihre Webseite im Internet sichtbarer ist. Wenn Ihre Seite beispielsweise in Lesezeichenlisten abgespeichert wird, können Sie mit Ihrem Favicon optisch hervorstechen und Ihrer Webseite einen höheren Wiedererkennungswert geben.

Mit einem Favicon-Generator lässt sich dabei leicht aus Ihrem Unternehmenslogo, Symbol oder Foto ein Favicon erstellen. Dieses können Sie anschließend mit den im Artikel dargestellten Möglichkeiten bequem in den HTML-Code Ihrer Seite implementieren.

website optimierung

Titelbild: BoxerX / Getty Images

Ursprünglich veröffentlicht am 26. November 2020, aktualisiert am November 26 2020

Themen:

Webdesign