In deze handleiding vertellen we je alles over de favicon. Wat is een favicon? Hoe maak ik een favicon en hoe gebruik ik een favicon? Op al deze vragen krijg je antwoord in deze heldere handleiding. Lees snel verder!
Wat is een favicon?
Een favicon zie je eigenlijk veel vaker dan je denkt. Een favicon is namelijk het icoontje dat je ziet in de tabladen van je browser. Vaak is de favicon het logo van het bedrijf waarvan je de website bezoekt. Zo heeft elke website zijn eigen favicon. Maar een favicon wordt tegenwoordig niet alleen meer gebruikt als icoontje voor enkel de tabbladen. Denk hierbij aan je favoriete pagina’s op je iPad en zoekresultaten in Google. Omdat je de favicon tegenwoordig op veel meer plekken tegenkomt is het belangrijk dat deze overal goed wordt weergeven.
In 1999 kwam Microsoft met de wereldberoemde Internet Explorer 5. Deze browser ondersteunde voor het eerst Favicons. Fun fact: Het woord favicon is afgeleid van ‘Favorite Icon’.
Waarom is een favicon belangrijk?
Er zijn een aantal redenen waarom favicons zo belangrijk zijn.
Een favicon zorgt voor herkenbaarheid.
Een unieke, heldere favicon zorgt voor herkenbaarheid. Daardoor blijf je beter hangen bij je doelgroep en website bezoekers.
Een favicon wordt steeds belangrijker.
Zo experimenteert Google (grootste zoekmachine ter wereld) op dit moment met het laten terugkomen van favicons in de zoekresultaten van desktop apparaten. Voorheen gebeurde dit alleen op mobiele apparaten. Een goede favicon kan dus zorgen dat iemand eerder op je website klikt omdat je opvalt.
Snelle herkenning.
Wanneer mensen je bedrijf al kennen weten ze je sneller (terug) te vinden tussen de zoekresultaten en bookmarks.
Het is onderdeel van je branding.
Een eerste contactmoment tussen consument en bedrijf is vaak een resultaat in Google. Een goede favicon draagt bij aan het overbrengen van je merk.
Hoe maak je een favicon?
Een favicon lijkt een simpel klein icoontje. Toch komt er nog heel wat bij kijken om een goede favicon te maken en in te stellen. Je moet rekening houden met meerdere factoren. Ook zijn er meerdere wegen die naar Rome leiden als het aankomt op het maken van een favicon.
Er zijn een aantal dingen waar je je altijd aan dient te houden. Zo moet een favicon altijd vierkant zijn. Ook kun je geen hele gedetailleerde logo’s gebruiken omdat een favicon erg klein is en je altijd details verliest. Kies daarom altijd een simpele, maar duidelijke favicon. Denk hierbij aan een simpele afbeelding of letter.
Favicon maken in Photoshop
Het is mogelijk om een favicon te maken in Photoshop. Echter raden wij dit niet aan. Het kost namelijk veel werk. Wil je automatisch alle juiste favicon formaten? Maak dan gebruik de techniek uit de volgende alinea. Heb je geen kennis van Photoshop? Sla dit stuk dan over.
Begin altijd met een transparante achtergrond en met een bestand van 512×512 pixels. Deze grootte werkt namelijk fijn zodat je zelf nog kunt zien wat je aan het doen bent (werken met 64×64 pixels is namelijk te klein). Wanneer je klaar bent verklein je het icoon naar 64×64 pixels en vervolgens sla je het op als een .ico bestand. Noem dit bestand favicon.ico. Je zou de favicon ook op kunnen slaan als 32×32 pixels, maar ik raad hier 64×64 pixels aan omdat dit een groter icoon oplevert. Hoe groter het icoon, hoe meer pixels, hoe meer details.
Favicon maken met online tool
Het makkelijkst om een favicon te maken is met het gebruik maken een online tool. Er zijn verschillende tools maar ik heb goede ervaringen met favicon.io. Deze tool werkt erg gemakkelijk.
Sleep de afbeelding naar het drag-en-drop veld en klik vervolgens op download. Je download vervolgens een ZIP bestand met allerlei formaten van je Favicon.
Favicon aan je website toevoegen
Er zijn meerdere methodes om een favicon op je website te krijgen. Wij beginnen met de moeilijkste. Deze methode vergt wat technische kennis van HTML. Maak je gebruik van WordPress? Lees dan dit.
Favicon uit Photoshop toevoegen aan je website
Sla de favicon.ico in de hoofdmap van je server op. Vervolgens voeg je onderstaande code toe in de <head> van je website.
<link rel="shortcut icon" type="image/x-icon" href="/website/myicon.ico">
Het stukje /website/myicon.ico kun je vervangen voor de locatie van jouw favicon op de server. Je hebt nu 1 formaat aangeleverd waardoor niet elk apparaat optimaal gebruik kan maken van jouw favicon. Het liefst pak je dit natuurlijk wat nauwkeuriger aan. Dit kun je doen door voor elk verschillend apparaat een andere favicon te uploaden. Veel handmatig werk. Dit kan makkelijker! Lees snel verder.
Favicon van online tool toevoegen aan website
Na het gebruik van favicon.io heb je een ZIP map gedownload met daarin allerlei verschillende formaten en namen van favicons:
- android-chrome-192×192.png
- android-chrome-512×512.png
- apple-touch-icon.png
- favicon-16×16.png
- favicon-32×32.png
- favicon.ico
- site.webmanifest
Zet de volgende code in de <head> van je website:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
Heb je een website op basis van WordPress? Lees dan snel verder voor een eenvoudigere optie.
Favicon aan je WordPress website toevoegen
We kennen allemaal de voordelen van een WordPress website. Dat is met favicons dan ook niet anders. Middels een plugin kun je heel gemakkelijk zelf een favicon toevoegen aan je WordPress website. Er zijn verschillende plugins die je kunt gebruiken maar wij raden ‘Favicon by RealFaviconGenerator’ aan.
- Ga naar Plugins > Nieuwe plugin
- Zoek op ‘Favicon by RealFaviconGenerator’
- Installeer de plugin
- Ga nu naar Weergave > Favicon en de rest spreekt voor zich
Gefeliciteerd! Je hebt nu een favicon gemaakt en op je website gezet.
Hoe nuttig was dit artikel?
Klik op een ster om deze te beoordelen!
Gemiddelde waardering 4.4 / 5. Stemtelling: 68
Tot nu toe geen stemmen! Wees de eerste die dit bericht waardeert.