Artikelen

Gepost door benjamin op 12 mrt 2010 in de categorie Algemeen HTML

Hoe maak je een icoontje die in de adresbalk van de browser verschijnt? Deze vraag gaan we in dit artikel beantwoorden. Zo’n icoontje heet een favicon of pagina icoon en heeft een speciaal bestandstype (.ico) dat gelezen wordt door de browser.



Een favicon verscheen in Explorer 6 en lager alleen als de pagina wass opgeslagen bij de favorieten. Tegenwoordig wordt de favicon direct in de adresbalk getoond zonder de pagina eerst toe te voegen aan de favorieten.

Een favicon heeft het formaat 16x16 pixels en kan niet in een standaard paint of foto edit programma (Photoshop of MS Paint) worden gemaakt. Er zijn programma’s te downloaden die van een favicon (met de extensie .ico) kunnen maken van een bitmap afbeelding. Maar tegenwoordig zijn er genoeg online programma’s die zeer eenvoudig en veilig een favicon voor je maken. Het enige wat je hoeft te doen is zelf een afbeelding te maken en deze te uploaden bij een van de onderstaande websites:

CC Favicon generator
Dynamic Drive Favicon Generator
Favicon Generator

Als je de favicon op je harde schijf hebt opgeslagen, moet je deze vervolgens in de map zetten van de server waar je website op staat. Zet de favicon in de zelfde map als de index pagina van je website (index.html of index.php). De favicon kan ook in een map met alle afbeeldingen gezet worden, alleen moet dan het onderstaande pad naar het icoon worden aangepast.

Open de index pagina van je website om deze aan te passen en zet een stuk code tussen de ‘head’ tags bovenaan de pagina. De code om de favicon weer te geven luidt als volgt:

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

Om de favicon te testen moet je wel eerst de cache gegevens van je browser legen, anders zie je geen verschil in de adresbalk en kan het enkele dagen duren voordat de favicon actief is.