Favicon für Webseiten erstellen

Ein Favicon ist das Gesicht einer Webseite im Tab des Browsers der Besucher. Ohne das kleine Icon finden Besucher nur schwer die besuchte Webseite bei mehreren offenen Browser-Tabs wieder. Deshalb sollte auf keinen Fall auf das Favicon verzichtet werden. Doch wie lässt sich ein gutes und hochauflösendes Favicon für die eigene Webseite erstellen?

Wer nach den Wörtern Favicon und Webseite googlet, findet eine endlose Zahl an Webseiten, die bei der Erstellung von Favicons helfen. Das Angebot der meisten Webseiten ist kostenlos. Doch worauf gilt des bei der Erstellung eines Favicons für Webseiten zu achten?

Favicon für Webseiten erstellen

Das Favicon für Webseiten und die Browser zur Darstellung der Icons haben sich über die Jahre weiterentwickelt. Während früher viele dieser Symbole aus 16 x 16 Pixel bestanden, sind heute Auflösungen von bis zu 64 x 64 Pixel möglich. Der Unterschied ist gravierend und zeigt das Favicon der Webseite deutlich schärfer im offenen Browser-Tab an. RandomBrick.de verwendet im Bild unten noch ein 16 x 16 Pixel Favicon weshalb das Icon deutlich unschärfer aussieht als das von WhatsApp oder Handelsblatt.

Favicon für Webseiten erstellen
Favicons im Browser-Tab ermöglichen das Unterscheiden der offenen Webseiten (Bild: Screenshot Google Chrome).

Aber nicht jede Webseite die ein Favicon für Webseiten erstellen kann, beherrscht die höchste Auflösung. Nachfolgend stelle ich euch ein Angebot vor, mit der ich sehr gute Erfahrung bei der Erstellung von Favicons gemacht habe und erkläre, wie sich ein Icon für die eigene Webseite in wenigen Minuten selbst erstellen lässt.

Schritt 1: Icon per Bildbearbeitung erstellen

GIMP: Download

Der schnellste Weg zum Wunsch-Favicon geht über ein Programm zur Bildbearbeitung. Ich verwende hierfür das kostenlose GIMP. Das Programm ist für Windows, OS X und Linux verfügbar und ermöglicht das einfache Manipulieren von Bilder.

Schritt 2: Bild erstellen

In GIMP muss ein neues Bild erstellt werden. Hierbei die Größe des Bildes auf 64 x 64 Pixel zu setzen. Solltet Ihr schon ein Logo haben, können Schritt 2 und 3 übersprungen werden.

Bild in GIMP erstellen
Ein neues Bild in GIMP erstellen (Bild: Screenshot GIMP).

Schritt 3: Als PNG oder GIF speichern

Für den Fall, das der Hintergrund des Favicons leer sein soll, also keine Hintergrund haben darf, muss das Icon aus der Bildbearbeitung als PNG oder GIF gespeichert werden. JPGs unterstützen keinen leeren Hintergrund.

Favicon mit GIMP erstellen
Mit GIMP wird das Erstellen des Favicons vorbereitet (Bild: Screenshot GIMP).

Schritt 4: X-Icon Editor aufrufen

X-Icon Editor: Zur Webseite

Der X-Icon Editor erstellt aus hochgeladenen Bildern Favicons in unterschiedlichen Größen. Optional kann direkt im X-Icon Editor ein Favicon von Hand erstellt und Pixel per Pixel gemalt werden. Die Funktionsweise von X-Icon Editor ist großteils selbsterklärend. Hochgeladene Bilder lassen selbstverständlich im X-Icon Editor nachträglich anpassen und verändern.

X-Icon Editor für Favicon
Der X-Icon Editor zum Erstellen von Favicons (Bild: X-Icon Editor).

Schritt 5: Favicon in Webseite einbinden

Abschließend lässt sich das Favicon aus dem X-Icon Editor exportieren. Jetzt muss das Favicon nur noch auf den eigenen Webspace hochgeladen und dem Webbrowser gesagt werden, dass ein Favicon für eure Webseite vorhanden ist. Dafür wird ein <link> Tag in dem <head> der Webseite benötigt.

<link rel=“shortcut icon“ href=“favicon.ico“/>

Abschließender Tipp: Hexadezimale Farbdefinition

ColorHexa.com: Zur Webseite

Im Bereich von Webseiten arbeiten sehr viele mit hexadezimalen Farbdefinitionen. Leider unterstützt der X-Icon Editor keine Eingabe des Hexadezimalcodes sondern nur die RGB Werte. Mit der Webseite ColorHexa ist eine Umwandlung von hexadezimalen Farbdefinitionen in RGB Werte keine Problem.

Persönliche Meinung

Fehlt euch etwas in dieser Anleitung oder konntet Ihr alle Informationen finden, die für das Erstellen von Favicons für Webseiten benötigt werden? Schreibt mir in den Kommentaren, so dass ich diesen Beitrag ausbauen und verbessern kann. Wenn euch dieser Beitrag geholfen hat, dann teilt ihn mit euren Freunden. Sharing is caring.

Kommentar verfassen