Een favicon, beter bekend als het kleine icoontje dat je website weergeeft naast de titel van je website. Je bezoekers kunnen gemakkelijk je website identificeren, bijvoorbeeld als ze meerdere tabbladen tegelijkertijd open hebben staan. Daarnaast zorgt het voor een grotere herkenning van je website: je favicon wordt tegenwoordig namelijk vaak weergegeven naast een zoekresultaat in zoekmachines als Google. Smartphones gebruiken de favicon van een website ook, wanneer iemand je website als sneltoets heeft ingesteld. Genoeg redenen dus om ook voor jouw website een eigen, unieke favicon aan te maken. Hoe je dat doet, lees je hier.
Favicon maken en instellen
Het ontwerpen en instellen van je Favicon kan soms even wat tijd kosten, maar het is niet heel ingewikkeld. Daarnaast heeft het dus ook verschillende voordelen. Voordat we je uitleggen hoe je een Favicon kan instellen, is het eerst belangrijk je te vertellen waar je Favicon aan moet voldoen.
Voorwaarden voor het ontwerp van favicons
Maak je Favicon vierkant
Hoewel de meeste Favicons worden weergegeven als rondjes, moet je Favicon oorspronkelijk vierkant zijn. Houd hier dus rekening mee bij het ontwerpen van je Favicon, omdat deze mogelijk bijgesneden moet gaan worden.
Verklein je Favicon tot 512 x 512 pixels
Dit is de meest gangbare maat voor een Favicon. Vroeger waren deze icoontjes een stuk kleiner met 16 x 16 of 32 x 32, maar hou tegenwoordig dus 512 x 512 pixels aan.
Sla je Favicon op als ‘bestandsnaam.ico’
Door je bestand op te slaan als ‘bestandnaam.ico’ (waar je bij ‘bestandsnaam’ natuurlijk een zelfgekozen naam kunt neerzetten), kunnen alle browsers je logo lezen. Je kunt er ook voor kiezen om een .png of een .gif bestand als Favicon te gebruiken, al worden deze niet door elke browser ondersteund. Via websites als www.favicorner.com helpen je om je afbeelding om te zetten in een .ico bestand.
Hou rekening met de grootte
Je Favicon is slechts 512 x 512 pixels groot. Probeer dus niet je gehele logo, naam of iets anders groots te uploaden, want dat is voor niemand meer leesbaar. Hou het simpel en duidelijk, zoals bijvoorbeeld de eerste letter van je naam of het beeldmerk in je logo. Doe inspiratie op bij andere merken en kijk wat zij hebben ingesteld. Zorg daarnaast ook voor een transparante achtergrond.
Favicon instellen via WordPress
Via WordPress Admin
Benodigde tijd: 2 minuten
In de nieuwere versie van WordPress, vanaf versie 4.3, is het heel makkelijk om je Favicon toe te voegen aan je website. Volg hiervoor de onderstaande stappen:
- Open WordPress Admin
- Ga naar Weergave
- Kies voor de WordPress Customizer
- Zoek naar Site-identiteit
- Onder de sitetitel en ondertitel kun je kiezen voor je Favicon
- Kies ‘selecteer afbeelding’
- Upload je zojuist gemaakte Favicon
- Bekijk het voorbeeldresultaat
- Sla op en publiceer je website
Via een FTP Client
Als het niet lukt via de bovenstaande manier of de nieuwere versie van WordPress nog niet werkt voor je site, is er nog een andere manier om je Favicon in te stellen. Dit gaat via een FTP-client. Hier vind je onder andere de code van je website terug. Deze code hebben we nodig om je Favicon in te stellen. Eerst gaan we je Favicon instellen in de code zelf. Hiervoor volg je de onderstaande stappen.
- Log in op je eigen FTP client
- Zoek naar de hoofdmap van je WordPress thema. Deze heet vaak wp-content/themes.
- Vervang de huidige Favicon door je eigen Favicon
- Zet je Favicon ook in de root directory / hoofdmap van je website. Pas hiervoor de URL aan. Deze krijgt de volgende vorm: ‘naamvanwebsite.nl/naamfavicon.ico’
- Nu gaan we de aanpassing doorvoeren zodat deze zichtbaar wordt op de site zelf. Hiervoor doe je het volgende:
- Log in op het WordPress dashboard
- Ga naar Weergave en vervolgens Customizer
- Zoek naar de volgende regel
- ‘ Vervang deze regel door de volgende regel /favicon.ico” />
- Kun je de coderegel niet vinden? Plaats bovenstaande code dan in de tag
- Sla het bestand op
- Controleer of je Favicon te zien is. Doe dit in verschillende gangbare browsers zoals Internet Explorer, Edge, Chrome of Firefox. Is het niet te zien? Gebruik dan een harde refresh, waardoor je cache geleegd wordt. Je Favicon moet nu zichtbaar zijn.
Zo, nu heeft ook jouw website een eigen Favicon! Naast dat het er super strak en professioneel uitziet, is het ook makkelijker voor je bezoekers en onthouden ze je website beter. Een echte win-win situatie dus. Heb je toch nog hulp nodig bij het genereren van een Favicon? Gebruik dan deze favicon generator!
Lukt het nog steeds niet? Of heb je ook hulp nodig bij meerdere zaken? Neem even contact met onze WordPress specialisten op via de live chat, e-mail of bel ons op 030 20 72 488.
