Favicon.ico

Je logo in de adresbalk van je browser

Katinka Hesselink Mei 2007

Moderne browsers laten bij veel websites een leuk icoontje zien in de adresbalk of de tab. Dit icoontje heet een favicon (FAVorit ICON). Dit is een handige manier om je logo nogmaals onder de aandacht van mensen te brengen. Hieronder de manier om dit op je website te krijgen.

Hieronder hoe mijn website er in Firefox uit ziet - met de favicon omcirkeld in geel. Het gebruik van de favicon verschilt iets per browser - maar in alle gevallen is het vet cool. ;)

screenshot favicon.ico

Vier stappen:

  1. Maak een plaatje van 16x16 pixels of 32x32 pixels
  2. Zet dit om in .ico bestand in Adobe Photoshop en hernoem het tot favicon.ico (precies die spelling)
  3. Zet het online
  4. Voeg de volgende code toe aan al je files: <link rel="Shortcut Icon" href="http://www.jewebsite.nl/favicon.ico"> Dit voor die paar browsers die je icoontje niet uit zichzelf vinden. 

Stappen 1 en 2 zijn overigens over te slaan met een van de vele online favicon.ico generatoren. Zorg dat je met je eigen grafische programma alvast een precies vierkant gemaakt en een handige uitsnede genomen hebt. Vervolgens upload je die file op http://www.chami.com/html-kit/services/favicon/ en zij doen de rest.

Lijkt het dan nog nergens naar, verklein je logo dan eerst met je eigen grafische programma, zodat je meer controle hebt over hoe kleuren en dergelijke gefilterd worden. 32x32 pixels is weinig informatie, dus voor allerlei tussenkleuren heb je geen ruimte. Sla je bestand bijvoorbeeld op als jpg met 8 kleuren. Vervolgens kun je het omzetten naar een .ico bestand alsnog aan de html-kit overlaten.