Ein Favicon Icon erstellen


Was ist ein Favicon Icon?

Ein Favicon Icon ist das kleine Bild, was man oftmals in der Titelseite des Browsers sieht und was auch beim Hinzufügen einer Seite zu den Favoriten (im Firefox: Lesezeichen) immer vor dem Text steht.

Favicon Icon am Beispiel der Webbiene

Favicon Icon am Beispiel der Webbiene

 

 

 

 

 

 

 

 

Unter den Favoriten bzw. Lesezeichen sieht das dann so aus:

favicon-icon-lesezeichen

favicon-icon-lesezeichen

 

 

 

 

 

Anhand des Beispiels meiner Website möchte ich verdeutlichen, welchen Zweck das Favicon Icon erfüllt. Es hat auf jeden Fall einen gewissen Wiedererkennungswert: Wenn ich in der Fülle meiner Favoriten nach der Webbiene suche und dort eine Biene sehe, macht das das Auffinden der Seite doch wesentlich leichter, oder nicht?!

Wie aber erstelle ich nun ein solches Icon?

Es gibt mehrere Möglichkeiten, sich ein Favocon Icon zu erstellen: Entweder man zeichnet selber eines oder aber man wählt ein Bild aus, welches dann zu einem solchen Icon generiert wird. Ein Favicon Icon ist immer quadratisch und hat die Ausmaße 16 x 16px, erstellt werden sollte es aber in den Maßen: 32 x 32px. Es wird immer als favicon.ico abgespeichert. Die Dateiendung ist also: Ico.

Für die Erstellung eines solchen Icons gibt es viele Generatoren im Web, ein sehr guter ist hier zu finden: http://favicon-generator.org/ Dieser Generator vereint beide Varianten – man kann zum einen eine eigene Datei hochladen und diese in ein Icon umwandeln lassen oder aber man pixelt sich anhand des Editors selber ein Bild. Nachdem man ein beliebiges Bild hochgeladen hat, bekommt man es auch gleich als Download zur Verfügung gestellt und den entsprechenden Quelltext gleich mitgeliefert.

Dieser sieht dann so aus:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

Der Code mit dem „shortcut icon“ gilt dann für den Internet Explorer, da dieser einen abweichenden Code verwendet. Für alle anderen Browser reicht der Begriff „icon“ unter dem rel-Verweis. Diesen Code fügt man dann in den Head-Bereich seiner Homepage ein und Voilà – das Favicon Icon wird angezeigt!

Teile dies:

2 Gedanken zu „Ein Favicon Icon erstellen“

  1. Hallo und vielen Dank für deinen interessanten Beitrag. Ich verwende Themes von WooThemes. Dort kann man einfach ein Bild als Icon hochladen und es passt. Ohne .ico Generator etc…

    Es muss also nicht unbedingt eine .ico Datei sein, oder?

  2. Ja, sehr komfortabel. In vielen CMS-Systemen ist das mittlerweile möglich. Wenn Du aber Deine Homepage noch von Hand erstellt hast oder es eben mal nicht geht, dann musst Du auf diesen Code zurück greifen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.