Website - Favorieten icoon maken / favicon


Met regelmaat staan er iconen in de adresbalk van de browser voor de URL van een website. Zo ook is dat het geval bij WebSonic.nl waarvan je hieronder een screenshot ziet.

Favorieten icoon maken

Het icoon heet een Favicon en zie je dus terug in de adresbalk maar 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.

Maak als eerste met een programma als bijvoorbeeld Photoshop of Paint Shop Pro een afbeelding van 16 x 16 pixels, dit is de standaard afmeting van een favicon. Sla het bestand dan op als bijvoorbeeld favi.gif, of favi.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 de Favicon generator hier op WebSonic.nl. Met de favicon generator upload je snel je gif bestand waarna deze omgezet wordt naar .ico. Je kunt vervolgens dan het .ico bestand opslaan en uploaden naar je eigen website, meer instructies op de pagina met de generator zelf.

Om het .gif bestand zelf om te zetten naar een .ico bestand heb je een ander programma nodig die dit ondersteund. Een voorbeeld van zo'n programma is IrfanView dat is te downloaden via de onderstaande link.



Eenmaal gedownload en geinstalleerd, start IrfanView en ga vervolgens naar File en klik op "Batch conversion/rename". Sleep je .gif bestand in het witte linkervenster en zet aan de rechterkant onder "batch conversion settings" het output format op "ICO - Windows icon". Selecteer even daarboven de map waar het bestandje opgeslagen moet worden en klik nu bovenaan naast het witte venster op start.

Upload het icoon dan naar je site. Dan is het nog benodigd om in de <head> sectie van je pagina's de onderstaande code op te nemen waarin het icoon wordt aangeroepen.

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

Delen: