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.
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.
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.
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.
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.
Geek, Blogger, Consultant & Reisender. Auf seiner Detail-Seite findest du weitere Informationen über Benjamin. In seiner Freizeit schreibt Benjamin bevorzugt über Technik-Themen. Neben Anleitungen und How-To’s interessieren Benjamin auch Nachrichten zur IT-Sicherheit. Sollte die Technik nicht im Vordergrund stehen, geht Benjamin gerne wandern.