HTML - Favicon instellen


Na het openen van vrijwel elke website staat er een icoon op het tabblad van de browser afkomstig van de geopende website. Zo ook is dat het geval zodra je WebSonic.nl bezoekt.

Favorieten icoon maken

Dit icoon heet een Favicon en zie je dus terug op het tabblad maar bijvoorbeeld ook als een website wordt opgeslagen in de Favorieten van de browser zal hier het icoon terugkomen. Een Favicon maken voor je eigen site is vrij eenvoudig en gaat als volgt.

Favicon maken

Maak als eerste met een programma als Photoshop of Paint Shop Pro een afbeelding van 16 x 16 pixels. Sla het bestand dan op als bijvoorbeeld favicon.gif, favicon.png of favicon.jpg. De volgende stap is dan om het icoon om te zetten naar een .ico bestand.

Dit kan op twee manieren, handmatig met behulp van een aanvullend programma dat geinstalleerd moet worden op je computer, of met behulp van een Favicon generator die via Google op diverse websites is te vinden. Met de favicon generator upload je als eerste het originele bestand waarna deze automatisch zal worden omgezet naar .ico. Je kunt vervolgens dan het .ico bestand downloaden en weer uploaden naar je eigen website.

Zodra je het icoon hebt geupload plaats dan in het <head> gedeelte de onderstaande code om het icoon aan te roepen. Zorg uiteraard dat de locatie van het icoon klopt.

<link rel="shortcut icon" type="image/x-icon" href="http://www.website.nl/favicon.ico">


Je kunt het bestand ook zonder generator omzetten naar een .ico en dan heb je een programma nodig. Een voorbeeld van zo'n programma is IrfanView, hier te downloaden. Eenmaal gedownload en geinstalleerd, start IrfanView en ga vervolgens naar File en klik op "Batch conversion/rename". Sleep het bestand in het witte linkervenster en zet aan de rechterkant onder "batch conversion settings" het output format op "ICO - Windows icon". Selecteer daarboven de map waar het bestand opgeslagen moet worden en klik op start.

iPhone, iPad en iPod Touch

Aanvullend op het bovenstaande verhaal zie eventueel ook de tutorial die gaat over het instellen van specifieke iconen voor de iPhone, iPad en iPod Touch. Deze lees je hier.