Je eigen favicon maken

Je ziet regelmatig voorbij komen als je surft op het internet. De vrolijke icoontje bovenin de adresbalk of tabblad. Een website herken je snel doormiddel van zo’n icoontje. Dit icoontje wordt ook wel een favicon genoemd. Veel websites maken gebruik van een favicon. Voorbeelden zijn Google, Nu.nl, Startpagina en natuurlijk ook Host-reviews. Vaak weten mensen niet direct hoe ze een favicon kunnen maken of in kunnen stellen op hun website. Verder in dit artikel gaan we je helpen om zelf een favicon te maken en te uploaden.

Je eigen favicon maken

Een favicon maken, hoe doe ik dit?

Een favicon maken is eigenlijk niet zo lastig en het is gewoon een klein plaatje wat bovenin je website staat of in een tabblad. Oorspronkelijk worden de favicons gebruikt voor een favorietenlijst. Je favorieten lijst kun je tonen in je webbrowser en door de icoontjes kun je eenvoudig zien welke website eronder schuilt. Vandaar eigenlijk de naam favicons.

favicon makenOp de website http://www.favicons.cc heb je de mogelijkheid om op een redelijk eenvoudige manier je eigen favicon te maken. Op deze website heb je de mogelijkheid zelf je favicon te tekenen of een afbeelding te uploaden onder de knop “Import Image”.

Wanneer je de afbeelding upload wordt je direct naar de volgende pagina gestuurd waar je een voorbeeld van je favicon kunt bekijken. Scroll je naar beneden dan zie je het icoontje op werkelijke grote zoals hij getoond gaat worden in de browsers. Een tip van ons is om je icoontje transparant te maken. Wanneer je denkt dat je favicon helemaal af is dan klik je op de knop “Download Favicon”.

Je favicon online zetten

Als je gebruik maakt van een CMS als Joomla, Drupal of WordPress is het vaak al voldoende je favicon te uploaden naar de root van je website d.m.v. FTP of bestandsbeheer. Wanneer je dit gedaan hebt dan kun je naar je eigen website surfen om het te testen. Als het goed is zie je nu dat je zelfgemaakte icoontje wordt geladen.

Is dit niet het geval? Plaats dan het onderstaande stukje HTML code in je website. Doe dit tussen <head></head> tag.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Ook bovenstaande code zal in de toekomst steeds minder nodig zijn als je gebruik maakt van een CMS systeem (WordPress is een goed voorbeeld). Veel thema’s van deze CMS systemen bieden de mogelijkheid om eenvoudig een favicon te kiezen. Geen gedoe met FTP en codes maar simpelweg een bestand selecteren en deze opslaan als favicon. Dit hoeft vaak ook geen speciaal .ico bestand te zijn maar een png of jpeg bestand is al voldoende. Zorg alleen wel dat de afmetingen goed zijn.

Kom je er niet uit of heb je nog vragen? Laat dan een reactie achter op dit bericht en wij proberen je zo goed mogelijk te helpen.