Favicon für eine Website erstellen und einbauen

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 ;-)

Veröffentlicht von

Thomas Noschka

Hallo, ich bin Thomas – Blogger, Grafik- und Interface Designer. Ich skate gerne, trinke Tee, reise oft und sehe das Internet als große Spielwiese an. Wenn du mehr über mich wissen möchtest, dann besuche mich auf Twitter, Facebook, Google+ und YouTube

2 Gedanken zu „Favicon für eine Website erstellen und einbauen“

  1. Ich will zwar keine Website eröffnen oder einen Blog aber wenn dann greife ich hierdrauf zurück ;-)

Schreibe einen Kommentar

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