Was ist ein Favicon? Und wie kann ich ein Favicon erstellen?

Hallo zusammen,

ich hatte ja schon mal über die FavIcons geschrieben. (Favicon erstellen) Damals hatte ich mir ein Script zum Favicon erstellen gekauft… aber es war für den Einsatz absolut nicht geeignet. Also habe ich selbst Hand angelegt und jetzt erstellt es wunderbar Favicons. ;-) Aber es geht heute nicht darum ein Favicon zu erstellen sondern was ist ein Favicon eigentlich?

Ein FavIcon ist – wie der Name schon sagt – ein kleines Icon / Bild welches im Browser (meist neben der Internetadresse) angezeigt wird. Schau mal oben links neben https://www.gordonzube.com/… Da sollte ein kleines schwarz/weißes Symbol sein. Das ist das FavIcon.

Über seine Geschichte erfährt man leider nicht sehr viel. Das FavIcon wurde von Microsoft erfunden. Meines Wissens nach wurde es eigentlich Erfunden um dem Chaos in den Lesezeichen ein Ende zu machen. Wer viel mit Lesezeichen/Bookmarks arbeitet der wird schnell feststellen das die Liste, ab einer gewissen Größe, sehr unübersichtlich wird. Das sollte das FavIcon (deswegen auch Favoriten Icon) ändern. Sobald eine Webseite, die ein FavIcon eingebunden hat, als Lesezeichen gespeichert wird (ich spreche hier von den Lesezeichen im Webbrowser) ist das FavIcon vor dem Lesezeichen zu sehen.
Zum Beispiel in meinem Firefox. Wenn ich oben auf Lesezeichen klicke dann geht eine Liste mit ca. 200 Lesezeichen (jaa, ich habe mal gesammelt :-) ) auf. Die meisten haben kein FavIcon erstellt und haben somit das Standart-Weiße Symbol erhalten. Dazwischen sind ab und zu ein paar bunte kleine Bildchen vor dem Seitennamen. Und ich erkenne daran sofort um welche Seite es sich handelt und finde die entsprechende viel schneller. Das war der eigentliche Sinn.
Natürlich ist das Icon auch in der Adressleiste des Browsers sehr schick… aber dort findet es kaum Beachtung. Bei mir jedenfalls nicht.

Im großen und ganzen Interessiert dieses kleine FavIcon wohl kaum noch einen Webmaster wirklich. Es ist wohl “out”.
Aber dennoch… es sollte auf jeder Webseite vorhanden sein. Warum? Ganz einfach. Die Browser Interessieren sich noch sehr für die kleinen Bildchen und suchen Sie auf jeder Webseite. Bei jedem neuen Zugriff wird es angefragt. Ist es nicht vorhanden gibt der Webserver einen 404-Error zurück. Nicht sichtbar für den Besucher, denn das passiert im Hintergrund. Aber in den Log-Files des Servers sind sie definitiv zu finden… gleich vor oder nach dem Error für die nicht vorhandene robots.txt :-P

Also… auch wenn es vielleicht unnötig erscheint: Erstellt für euere Webseite ein Favicon. Erstens hört der 404-Error auf und daneben macht es eure Webseite ein kleines (16×16 Pixel großes) Stück individueller. Und das sollte doch jede Webseite sein. Individuell und nicht von der Stange! ;-)

Wie funktioniert es. Als erstes braucht man natürlich ein Ausgangsbild. Am besten natürlich euer Logo. Das Ausgangsbild sollte in eine möglichst Quadratische Form gebracht werden. Ein FavIcon ist immer quadratisch. Das Icon hat meist 16×16 Pixel. Es gibt auch Abwandlungen mit 32×32 Pixel… warum weiß nur Gott allein. Denn jeder mir bekannte Browser zeigt die FavIcons nur mit 16×16 Pixeln an.
Egal. Wenn das Ausgangsbild vorhanden und in Form gebracht ist braucht man ein Programm welches aus dem Bild ein FavIcon erstellt. Ein sogenannter FavIcon-Generator. Einen guten findest du hier: FavIcon erstellen

In den FavIcon Generator lädst Du dein Ausgangsbild und kannst meist auch noch einen Text eingeben, welcher dann durchläuft. Quasi ein Animiertes FavIcon. Ich finde diese Spielerei aber quatsch und es sieht nicht Professionell aus… aber manch einer sieht das anders ;-)
Dann musst Du ein paar Sekunden warten bis der FavIcon-Generator das FavIcon erstellt und kannst es sofort downloaden. Du erhältst ein Archiv welches mit z.B. WinRAR entpackt werden kann. In dem Archiv befinden sich meist einige Dateien. Bei dem obigen Generator die eigentlich “altmodische” ICO-Datei, eine 16×16 Pixel PNG-Datei, eine 32×32 Pixel PNG-Datei, eine animierte GIF-Datei (sofern Text eingegeben wurde) und noch eine Readme.txt mit Anweisungen wie das FavIcon einzubauen ist.

Ich persönlich würde immer die “altmodische” ICO-Datei nutzen. Sofern die Farben nicht total daneben sind. Falls die Farben irgendwie total daneben sein sollten dann kann man auf die 16×16 Pixel PNG-Version ausweichen.

Wie baut man das FavIcon nun in die Webseite ein. Auch ganz einfach. Als erstes die gewünschte Datei (die favicon.ico natürlich ;-) ) in das Stammverzeichnis der Webseite packen. Auf dem Webserver natürlich. Meist ist es dort wo die index.html oder index.php oder wie auch immer sie heißt, liegt.
Wichtig ist natürlich auch noch zu beachten das die favicon.ico auch wirklich favicon.ico heißt. Eigentlich ist es nicht sooo wichtig… aber besser ist das.
Liegt die Datei auf dem Server so müssen wir noch einen Eintrag im Header hinterlassen. Freuen wird sich nun der der den Header seiner Internetdateien zentral lagert, explodieren wird der der 100 HTML-Seiten hat und nun jede einzelne Datei bearbeiten muss :-P

Wie geht es? Das unterscheidet sich jetzt ein wenig davon welche Datei wir gewählt haben. Packe den folgenden Code zwischen den <head> und dem </head> Tag deines HTML-Konstruktes:

Für die favicon.ico:

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

Für die favicon.png:

<link rel=”shortcut icon” href=”favicon.png” type=”image/png”>

Und für das GIF-Format (favicon.gif):

<link rel=”shortcut icon” href=”favicon.gif” type=”image/gif”>

(Achtet beim Kopieren bitte darauf das mein Blog die Gänsefüsschen vermurkst… bitte beim Kopieren in richtige ändern… “Memo an mich selbst: Problem mal beheben”)

Speichern (einmal oder 100 mal) und dann deine Webseite im Browser aufrufen. Einmal STRG+F5 drücken und nun sollte… wenn alles glatt gegangen ist… dein FavIcon links neben deiner Webadresse im Browser erscheinen. Manchmal gibt es auch Cache-Probleme und auch ein STRG+F5 bringt nix. Dann mal einen anderen Brower austesten (wenn möglich) oder bis zum nächsten Neustart warten.

Ist auch dann noch kein FavIcon zu sehen… dann noch einmal alle Punkte gründlich checken. FavIcon auf dem Server? Im Stammverzeichnis? Der Tag (siehe oben) richtig im HTML-Kontrukt eingefügt? Evtl. Dateinamen angepasst? … Browser noch von Grossmutter installiert? Ja? Bitte neue Version installieren ;-)

So, hätten wir das auch geklärt ;-) Hier noch mal der FavIcon Generator

See you
Gordon