In deze column over Internet Techniek een uitleg over Favicons, de kleine icoontjes die zichtbaar worden in de browser tijdens het surfen.

Wat zijn favicons?
Favicons is een afkorting voor Favorite Icons. Het heeft geen enkel doel, behalve het tonen van een extra icoontje als bezoekers een pagina bezoeken. Een website met een favicon ziet er professioneel uit en geeft extra herkenning van uw website binnen de veelal ongeorganiseerde favoriet lijsten van de meeste mensen. Als u een favicon bezit geeft dit de mogelijkheid tot extra herkenning en een hogere kans tot herhalingsbezoek.


Waar wordt een favicon zichtbaar?
De meeste web browser tonen dat icoontje in de adresbalk voor de URL (het http:// adres) in uw web browser als u surft naar een website waar de webmaster deze mogelijkheid heeft toegepast. Ook worden in de meeste browsers als de pagina aan de favorieten (ook wel favorites of bookmarks genaamd) deze icoontjes toegevoegd. Sommige browsers, zoals Internet Explorer 5.x tonen de favicons niet.

Bewegende favicons?
Hoewel de naam van het icon standaard favicon.ico is en de bestandsextensie dus die van een icoonbestand is, blijkt het op sommige browsers mogelijk een animated gif - bestand dat onder deze naam is opgeslagen, als een bewegende afbeelding te tonen. Zorg ervoor dat het eerste plaatje van dit bewegende plaatje er zinvol uitziet voor bezoekers met browsers die dit niet ondersteunen.

Kan ik online een favicon maken?
Er zijn websites die een service aanbieden om online van een bepaald plaatje een favicon bestand te maken. Bijvoorbeeld: Chami Html-kit en Favicon (java applet) bieden een online editor aan.

Hoe maak ik een favicon?
De onderstaande aanwijzingen zijn bedoeld voor (beginnende) webdesigners.
Maak een bestand aan met de naam "favicon.bmp" met afmetingen 16 bij 16 beeldpunten (pixels) in een tekenprogramma zoals bijvoorbeeld MS-Paint, Adobe Photoshop of Paint Shop Pro. Daarna moet het aantal kleuren naar maximaal 16. Dit kunt u doen met apart programma (voor Windows is er bijvoorbeeld de gratis IrFanView). In Paint Shop Pro kunt u bij het menu onderdeel 'Image' kiezen voor de optie 'Decrease Color Depth'. Bewaar het plaatje als (gebruik de optie "Save as") Windows Icon Format (het bestand heet dan "favicon.ico"). Upload dit bestand met FTP naar de root (basis) folder van uw website. Dit betreft het eerste niveau van uw webppagina's, waar u meestal ook de eerste pagina van de website aantreft met namen zoals index.html, index.htm of default.htm). Open vervolgens ook de indexpagina (bijvoorbeeld index.html), en voeg een regel zoals onderstaand voorbeeld in na eventueel reeds aanwezige andere meta tags in de HEAD sectie, maar in ieder geval voor de tag .

Herlaad de pagina, en probeer eens uw pagina toe te voegen aan uw favorieten. Sluit de browser af en start het programma weer en keer terug naar de site. Uw nieuwe favicon is nu voor iedereen zichtbaar.

Relevante links:
http://nl.wikipedia.org/wiki/Favicon
http://www.chami.com/html-kit/services/favicon/
http://favicon.com/
http://www.irfanview.com/