PretLetters

September 2005

Favicon.ico

Fri, 30 Sep 2005 21:45 +0200

Voor mijn site had ik al vroeg in het ontstaan een 'favicon' gemaakt. Favicon is een samentrekking van Favourites en Icon. Het is een vondst van Microsoft en is initieel bedoeld om een website een klein icoontje te laten tonen als hij in een rijtje favorieten van een bezoeker is opgenomen. Een piepklein icoontje van 16 bij 16 pixels, waar een (afgeleide van het) logootje in past, bijvoorbeeld, en dat de bezoeker helpt om visueel in de lijst de gewenste site vlot te identificeren.

Andere browsers maakten die Favicon ook functioneel, toen die eenmaal breed werd ingezet door webontwerpers, designers. Bovendien breidden zij het gebruik er van uit. Niet alleen werd het icoontje in de lijst met favorieten, ook wel bookmarks, opgenomen, maar browsers begonnen het icoontje ook te tonen in de adresbalk bijvoorbeeld.
Toen de eerste tabbed browsers1) verschenen, plaatsten die het icoontje van een site bij de titel van de pagina op de tabs in het browser-venster.

De favicon heeft dus in de loop van de tijd veel meer de functie gekregen van klein logootje, dan van icoontje dat in de lijst met favorieten wordt opgenomen. Het gebruik er van is dan ook door meer en meer webontwerpers ontdekt. Ook door mij.

De favicon wordt als plaatje van 16x16px in een eigen format, .ico, opgeslagen. Als dat plaatje in de root van een site wordt geplaatst, verschijnt hij vanzelf waar de browser dat zo heeft gepland, bij iedere pagina van die site.
Als je de favicon niet in de root kan zetten (bij redirects bijvoorbeeld, of bij een site op de gratis web space van je ISP2)), kun je er toch nog gebruik van maken, door er per pagina naar te verwijzen3).

Zo'n favicon maken is vrij eenvoudig. Je maakt een eenvoudig vierkant plaatje, importeert dat in bijvoorbeeld IrfanView (of een andere beeldtoner/-bewerker/-converteerder), verkleint daarin de boel tot 16x16 pixels en slaat het resultaat vanuit daar op als icoon (met de extensie .ico). Je upload het icoontje naar de server vanwaar je site draait, et voila, je hebt een werkende Favicon.

Je uitgangsplaatje hoeft niet eens zo heel eenvoudig te zijn. Ik heb een hele tijd domweg een soort initialen als Favicon gebruikt,  PL , meer een mock-up dan een echt logootje. Per vandaag is mijn Favicon verandert.

Vandaag ontdekte in het fenomeen 'X-Face' in e-mail of usenet-berichten. In header X-Face kun je een klein logootje met je berichten meezenden. Anderen zien dat logootje verschijnen bij jouw berichten in hun mail/newsclient en dat vergroot weer de herkenbaarheid.
Gezichtje, zwart-wit Geestig idee. Ik nam een fotootje van mezelf, knipte daar een vierkant uit, maakte er in IrfanView een zwartwit plaatje van 48x48 pixels van en uploadde het naar X-Face Convertor. Als je door je oogharen kijkt, herken je me er goed in.

Dat spelen met zo'n fotootje gaf me het idee om te kijken hoe lang iets herkenbaar blijft. Dus probeerde ik met dezelfde foto-uitsnede als welke ik voor de X-Face heb gebruikt, een Favicon te maken.
Verbluffend. super klein fotootje van gezicht In één woord, verbluffend. 16x16 Pixels groot en ik herken mezelf er nog steeds in. Hoe is het mogelijk?

Bekomen van de blije verrassing, bedacht ik me dat ik dit voortaan mijn Favicon laat zijn. Botweg mijn eigen kop als icoon de wereld over.

| Categorie: updates internet webontwerp |

1) Bijvoorbeeld Opera en Firefox openen pagina's in verschillende tabbladen in één browser-venster. Dit in tegenstelling tot Internet Explorer, waar meerdere browser-vensters nodig zijn, als je meerdere sites wilt zien of zelfs meerdere pagina's van één site.

2) Zie ook mijn eerdere artikel over het benutten van de (meestal) 20Mb schijfruimte bij je Internet Service Provider.

3) In de markup van de individuele pagina's plaats je in de head een link-element met de volgende attributen: <link rel="shotcut icon" href="foo/bar/favicon.ico">.

copyright © 2003-2005 Barbara de Zoete