Je hebt het misschien wel eens gezien, zo'n klein icoontje net voor het begin van het webadres (url) van een website. Kijk anders maar eens op de volgende websites:

http://abnamro.nl/nl/index.html
http://www.paardentips.com
http://www.google.nl
http://www.yahoo.com
http://www.purpleandbrown.eu

Als je geen icoontje ziet, dan moet je de websites eerst even toevoegen aan je favorieten en dan nog eens openen. Dan zul je ze voortaan wel zien. Zo'n icoontje noemen we een favicon, ook wel pagina-icoon genoemd. Favicon staat voor 'Favorite Icon' en het is normaal gezien 16 bij 16 pixels groot. Het icoontje is als het ware gekoppeld aan de betreffende domeinnaam en veel grafische webbrowsers laten ze zien, zoals recente versies van Internet Explorer, FireFox, Opera en Konqueror. Ze geven je website net dat beetje meer uitstraling.

Nu wordt er doorgaans nogal moeilijk gedaan over het maken van zo'n favicon. Je hebt er allerlei forums van die je van hot naar her sturen en er bestaan ook 'favicon-generators', die je automatisch kunnen voorzien van die begeerde favicon.

Vandaag gaan we het helemaal anders doen. Het is eigenlijk veel leuker en ook leerzamer als je een favicon zelf kunt maken en kunt laten werken. Het valt ook allemaal best wel mee, je moet het alleen even weten.

Wat heb je allemaal nodig om je favicon te kunnen maken en te laten werken?

1. Een eigen website met je eigen domeinnaam.
2. Een ftp-programma zoals SmartFTP.
3. Een klein plaatje waar niet teveel in gebeurt, bijvoorbeeld een plaatje van een simpel logo of zo.
4. Een programma om je plaatje mee te kunnen bewerken.
5. De link die nodig is om in je hostingaccount te kunnen plaatsen, zodat de favicon echt gaat werken.

Laten we beginnen!!

Ga naar de volgende website: http://www.rw-designer.com/online_icon_maker.php

Je kunt op deze website je eigen plaatje gaan ontwerpen of je implementeert een plaatje. Het plaatje kun je in het tooltje krijgen door te gaan naar 'Create favicon from picture' en te klikken op bladeren. Zoek dan het plaatje dat je wilt gebruiken voor je favicon en klik op 'Openen' en 'Go'.

Klik daarna op 'Download Icon' en sla die ergens op je eigen computer op waar je het snel weer terug kunt vinden.

Nu je favicon klaar is, kun je de ftp van je hostingaccount openen. Upload het plaatje rechtstreeks in de map waarin je site staat (bij Alphamegacliënten is dat de map httpdocs).

Dan open je de index.html (homepage) van je website, zodat je die kunt aanpassen, want tussen de head-tags (< HEAD> en < /HEAD>) moet de volgende code komen staan:

<link rel="shortcut icon" href="/sitecoach/favicon.ico" />

Na het aanpassen van de index.html kun je die weer uploaden in je hostingaccount en dan kiezen voor het overschrijven van de oudere versie en dan werkt het!

Let op dat je bij sommige browserprogramma's eerst de link van je site bij Favorieten/Bladwijzer moet plaatsen voordat hij echt zichtbaar is. Bijvoorbeeld bij IE6 is dit het geval, maar bij IE7 is de favicon al direct zichtbaar.

Succes!