Favicon für eine Website erstellen und einbauen

Erstellt am 25. Juli 2010 von Texblock

Toller Favicon Generator

Hällöchen Leute,
der eine oder andere von euch hat bestimmt seine eigene Website. Jede Website besitzt auch ein kleines Logo, ein sogenanntes Favicon! Dieses steht immer oben links in der Adresszeile… die Frage ist nur: Wie erstelle ich mein eigenes Favicon und wo kann es genutzt werden?
Favicon’s sind kleine Grafikdateien mit einem winzigen Format von 16 x 16 oder aber auch 32 x 32 Pixeln. Erkennbar ist ein Favicon an der Dateiendung ».ico«. Sie stehen, wie oben bereits erwähnt, in der Adresszeile des Browsers, direkt neben der URL.
Beispielsweise Tex-Block:


Zuerst sollten wir folgende Frage beantworten: In welchen Bereichen erscheinen denn überhaupt Favicon’s?

• Im Favoritenverzeichnis des Webbrowsers
• Im WIndows Startmenü
• In der Adresszeile des Browsers
• Als Verknüpfung auf dem Desktop
• In der Task- und Linkleiste
• In der Titelseite des Browsers (nur bei einigen Browsern)

Die Bandbreite ist zwar nicht all zu groß, bietet aber für eine so kleine Grafikdatei doch viele Einsatzmöglichkeiten, oder?!
Was nun aber viel wichtiger ist – wie erstelle ich mein eigenes Favicon? Brauche ich dazu sogar vielleicht teure Grafikprogramme?
Prinzipiell benötigt ihr schon ein Grafikprogramm wie zum Beispiel Photoshop, sowie ein Programm zur Konvertierung eurer Grafik in das Icon-Format ».ico« (was Photoshop mit sich bringt). So öffnet ihr in Photoshop einfach eine neue Datei in 16 x 16 bzw 32 x 32 Pixel, gestaltet euer Icon und speichert es einfach manuell als .ico ab. Aber wenn man jetzt nicht unbedingt Photoshop & Co. zur Verfügung hat, geht das natürlich auch anders (und für manche auch einfacher):
Im Internet habt ihr nämlich die Möglichkeit, für Windows / Mac zahlreiche Favicon-Generatoren zu nutzen. Das ist total einfach und sehr praktisch, da das Format schon eingestellt ist und ihr nur noch das Icon zeichnen oder hochladen müsst!
Hochladen, wie jetzt? Nun ja, ihr werdet gefragt, ob ihr von eurem Rechner eine Datei, ein Bild hochladen wollt. Dadurch müsst ihr nicht umständlich die Pipette zücken, sondern einfach das Bild platzieren. Zu guter letzt könnt ihr das Bild zusätzlich auch problemlos als .ico-Datei anspeichern! Und wer hätte es gedacht: Alles kostenlos!
Ich empfehle euch folgende Anbieter:

http://www.favicon-generator.de/
http://www.degraeve.com/favicon/
http://favicon.co.uk/
Viel Umfang bieten dabei die ersten zwei Seiten! Wenn es schnell gehen soll und ihr ein Bild einfach nur hochladen wollt, so nutzt den dritten Dienst (was aber wie gesagt alle können).
Bevor es nun losgeht, möchte ich euch noch einen Hinweis mitgeben: Da die geringe Größe der Icon’s keine detaillierten Meisterwerke erlaubt, solltet ihr bei der Auswahl eines Favicon-Motivs darauf achten, klare und markante Flächen einzusetzen! Probiert es einfach mal aus
Na, seid ihr fertig? Jetzt habt ihr zwar ein Icon, müsst dieses aber auch noch in eure Homepage oder Blog einbauen. Dazu müsst ihr folgenden Code in den Head-Bereich einfügen:

<link href=”name.ico” type=”image/x-icon” rel=”shortcut icon”/>

Für »name.ico« setzt ihr einfach den Namen eures Icons ein, zum Beispiel »tex-block.ico« (Die Endung .ico bleibt immer gleich).
Na dann, viel Spaß beim erstellen eures Favicons