Tutorial: Favicon erstellen

Wie bereits erwähnt möchte ich vereinzelnd auch ein paar Tutorials auf diesem Blog veröffentlichen. Heute geht es um "Favicons".

Ein Favicon (kurz für favorite icon, engl. für Favoriten-Symbol) ist ein kleines, 16×16 oder 32×32 Pixel großes Icon, Symbol oder Logo, das unter anderem in der Adresszeile eines Browsers links von der URL angezeigt wird und meist dazu dient, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. Quelle: Wikipedia

Um es kurz zu sagen: ein Favicon ist das hier:

Ich finde, ein Favicon gibt einer Seite noch etwas persönliches. Außerdem steigt der Wiedererkennungswert der Seite.

Wenn ihr nun ein solches Icon erstellen wollt, habt ihr mehrere Möglichkeiten. 

Photoshop

Habt ihr ein Grafikprogramm wie Photoshop, könnt ihr euch das Icon einfach selbst erstellen. Dazu öffnet ihr einfach das Programm, erstellt ein Bild in der Größe 32px x 32px und speichert es also .ico ab (Datei: Speichern unter).

Online Konverter

Steht einem kein Grafikprogramm zur Verfügung, muss man nicht gleich verzweifelt aufgeben. Im Internet gibt es inzwischen jede Menge "online Konverter". Diese "konvertieren" ein beliebiges Bild, welches ihr hochladen könnt, in eine .ico Datei. Ein solcher (kostenloser) Konverter ist zum Beispiel Icoconverter.com.

Blogger: Favicon einfügen

Um nun auf eurem Blog ein solches Favicon einzufügen, loggt ihr euch in euer Dashboard ein und begebt euch dann in den "Layout" Bereich. Dort findet ihr links oben einen Kasten namens "Favicon". Klickt auf "Bearbeiten" und ladet euer individuelles Favion hoch.

Website: Favicon einfügen

Ansonsten könnt ihr ein Favicon auch über HTML einfügen. Dazu ladet ihr euer Icon auf euren Server hoch. Danach fügt ihr folgenden Code hinter "</head>" ein:

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

"deinfavicon.ico" müsst ihr natürlich durch den Dateinamen eures Icon ersetzen ;)