GreenSmilies

Schon vor ein paar Tagen ist mir das neue Google Favicon aufgefallen und was soll ich sagen, es ist tausendmal besser als das alte blaue, langweilige “g” von vorher, welches selbst erst Mitte 2008 eingeführt wurde (hier nachzulesen).

Wer noch das alte Favicon im Cache hat, so sieht es aus, das Neue:

In der offiziellen Google Presseerklärung heißt es:

André Resende, a computer science undergraduate student at the University of Campinas in Brazil, submitted the design that inspired our new favicon. His placement of a white ‘g’ on a color-blocked background was highly recognizable and attractive, while seeming to capture the essence of Google.

Although we changed the color layout slightly and moved the ‘g’ off center, his submission formed the basis for our new design.

Hat er gut gemacht!

Bitte hier klicken um den gesamten Beitrag zu lesen: Pacman frisst Favicon

Nachdem AveN auch wollte, dass sein Favicon dem von Prinzzess folgt, habe ich mir gedacht, man könnte daraus eine kleine Blog-Aktion machen. Wer also will das sein Favicon im Magen des grünen Pacman landet, schreibe einfach einen Kommentar oder Trackback und ich werde das dann umsetzen.

Ich werde alle Teilnehmer in einer Liste hier bereithalten:

AveN:

Prinzzess:

B-King:

haboard:

Ocean90:

Z-MANN:

HASENFARM:

PS: Erwähnt bitte, ob der Pacman-Smilie auf dunklem oder hellem Hintergrund zum Einsatz kommen soll, manche Favicons brauchen dafür eine extra Anpassung.

Noch nen Extra für Google:

Ein Extra für Frank Bueltge, für seinen Pacman Fund, einfach dem Link folgen:

*Update*

Es gibt für die Favicon-Mampfer nun eine eigene Seite im Smilie-Album.

Zwei Ninjas mit zwei Link-Tipps für euch. Der erste Ninja ist für helle Hintergründe und führt euch zu einer Geschichte mit dem Titel “Ninjai: The Little Ninja”. Über mehrere Kapitel erzählt der Flash-Film die Geschichte vom kleinen Ninjai und das exzellent umgesetzt, sowohl visuell also auch akustisch und vor allem etwas blutig und daher nichts für zartbesaitete. Follow the Ninja!

Der zweite Ninja ist im Prinzip wie der andere, nur ist er für dunkle Hintergründe optimiert. Der Link führt euch zu einer äußersten ungewöhnlichen Spielumsetzng, gespielt wird nämlich in der Browseradresszeile und zwar im Favicon! Glaubt ihr nicht, dann klickt mal!

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="http://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