Zelf een favicon maken voor je website

Een Favicon is het icoontje dat je bij vele websites in de adresbalk van je browser ziet staan naast de url. Vrijwel alle browsers ondersteunen het Favicon. In browsers als Internet Explorer en Mozilla Firefox wordt het icoon ook weergegeven op de tabbladen, en voor de naam van de website in je favorieten of bookmarks. Door favicons te gebruiken kunnen bezoekers snel zien welke website bezocht wordt.

Dit kan bijvoorbeeld tijd schelen als je bijvoorbeeld tien websites tegelijk open hebt staan in je browser.

Favicon maken

Een Favicon moet een formaat hebben van 16x16 pixels of 32x32 pixels. En het icon bestand moet één van deze drie bestandsformaten zijn: .ico, .gif of .png. Je kunt je icoon het beste de naam favicon.ico geven. Vrijwel alle browsers herkennen het bestand dan als favicon. Je hoeft dan verder geen html meer toe te voegen aan je website.

Online favicon generators

Je kunt zelf heel makkelijk een icoon maken met een icon editor of je kunt een online generator gebruiken. Een voorbeeld van zo’n gratis online generator is FavIcon Generator van Dynamic Drive. Je zoekt het gewenste plaatje op je harde schijf, klikt op Create Icon en de generator maakt een mooi icoontje van je plaatje.

Ook kun je grafische programma’s als Photoshop gebruiken om een icoon te maken voor je website, of kun je kant en klare iconen downloaden.

Favicon uploaden

Als je favicon helemaal klaar is en de naam favicon.ico heeft, moet je hem uploaden naar je webserver. Dus de server waar je je website op host. Je kunt het bestand direct in de root directory plaatsen; dat is de hoofddirectory van je site.

Normaal gesproken zou dit genoeg moeten zijn. Vrijwel alle browsers herkennen het favicon. Toch kun je overwegen om je favicon te verwijzen in de headsectie van al je webpagina’s door middel van het gebruik van de linktag en het rel attribuut.

Bijvoorbeeld:

<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.jouwdomeinnaam.nl/favicon.ico" />

Het kan zijn dat je favicon geen .ico bestand is maar een .gif of .png. Als je een gif hebt gebruik je deze regel code in de head:

<link rel="icon" type="image/gif" href="http://www.jedomeinnaam.nl/favicon.gif" />

En als je een .png favicon hebt gebruik je deze regel:

<link rel="icon" type="image/png" href="http://www.jedomeinnaam.nl/favicon.png" />