Favicon

GreenSmilies.com hat nun ein eigenes Favicon – natürlich ist es Mr. Green!

Wer die letzten Tage aufmerksam war, müsste mich auch beim Experimentieren mit unterschiedlichen Favicons gesehen haben:

Links außen ein Standard 15×15 Smilie der lange Zeit hier zu sehen war, rechts außen vor dem Original dann das fertige Favicon. Da das ganze doch nicht so simple ist, möchte ich meine Erfahrungen damit kundtun.

Favicon einbauen

Was ein Favicon ist, verrät der obige Link zur Wikipedia, eingebaut wird das ganze am besten als Link-Tag im Head auf allen Seiten das zugehörige Favicon verlinkt. Ich verwende auf allen Seiten das gleiche Favicon und die dazu notwendige Codezeile sieht in meinem Fall so aus:

<link rel="SHORTCUT ICON" href="https://www.greensmilies.com/favicon.ico"  type="image/vnd.microsoft.icon" />

Generell sollte das Favicon immer im root-Verzeichnis der Domain liegen, manche Browser ignorieren nämlich den Link-Tag und suchen im root der Domain eine Datei mit dem Namen „favicon.ico“.

Favicon erstellen

Nun kommen wir zur wichtigsten Frage: Wie erstelle ich ein Favicon? Technisch gesehen ist es eine Datei im Icon-Format (MIME-Type image/vnd.microsoft.icon) und ein meiner Ansicht nach gutes Programm zum Erstellen und Berarbeiten ist VariIcon. Auch wenn einige Browser damit umgehen können, ist es kein guter Stil *.bmp, *.gif oder *.jpg Bilder einfach in *.ico umzubenennen!

Hat man sich in das Programm mal eingearbeitet, wird die Frage nach dem passenden Format aufkommen, hierbei kann ich folgendes empfehlen:

16×16 Pixel bei 32bpp

Es kann nicht schaden auch alle darunter liegenden Farbtiefen mit anzubieten (16 Farben, 256 Farben und 24bbp). Wer es ganz schön haben will, legt dann auch noch eine Ebene mit 32×32 Pixel bei 8 bis 32bpp an, dann wird das Favicon nicht grobpixelig, wenn man es als Verknüpfung auf dem Desktop hat.

Einfache Transparenz scheinen die drei wichtigsten Browser (Internet Explorer, Firefox und Opera) alle zu beherrschen, von alphatransparenten PNGs welche man importieren kann bzw. allgemein von Alphatransparenz kann ich aber nur abraten, da der Internet Explorer 6 damit nicht zurechtkommt und das Icon dadurch sehr unschön aussieht.

Der Internet Explorer 6 zeigt ein Favicon nur an, wenn die Seite in den Favoriten gespeichert wird. Leider ist das kein Garant dafür, dass das Favicon auch weiterhin angezeigt wird – der IE leidet diesbzgl. scheinbar an Demenz.

Zusammenfassung

– Einbau als Link-Tag im Head-Bereich der Seite
– Name der Datei „favicon.ico“
– Immer im root Verzeichnis der Domain
– 16×16 Pixel groß
– Einfache Transparenz ja, aber keine Alphatransparenz
– Möglichst alle Farbtiefen anbieten, vor allem die kleineren

Die ganz Faulen, können einen dieser Favicon-Generatoren verwenden:
– FavIcon from Pics
– FavIcon Generator
– Favicon Creator
– favikon