Favicons zijn bekend als de kleine icoontjes die je in het tabblad van je browser ziet, naast de naam van een website. Tenminste, dat is waar ze origineel voor gebruikt werden. Inmiddels kunnen WordPress favicons ook gebruikt worden in de favorieten, op het iOS startscherm en op nog veel meer plekken.
Het is daarom een belangrijk deel van je branding. Wanneer je dit goed gebruikt, kan een favicon of “website icon” je bedrijf herkenbaarder maken voor gebruikers. Dit versterkt je naamsbekendheid en kan zelfs de User Experience (UX) van je site verbeteren.
In dit artikel zullen we het hebben over de voordelen van een favicon voor een WordPress website. Daarna leggen we uit hoe je een favicon kunt maken en drie simpele manieren om deze vervolgens aan je website toe te voegen.
Als laatste zullen we nog wat tips en best practices voor favicons geven.
De voordelen van een WordPress favicon
Als je wel eens te veel tabbladen open hebt staan, zul je het nut van een favicon meteen snappen. Een favicon maakt het makkelijk voor gebruikers om je website te identificeren wanneer ze meerdere tabbladen open hebben staan.
Afhankelijk van het aantal open tabbladen, kan het zijn dat de titel van je website niet zichtbaar is. Op zo’n moment verbetert een favicon de UX voor je gebruikers.
Naast dat het naamsherkenning in het algemeen versterkt, geeft een WordPress favicon je website ook een meer professionele en geloofwaardige uitstraling. En dat zorgt weer voor meer vertrouwen van je klanten.
Daarnaast zal de favicon gebruikt worden als icoontje wanneer iemand je website opslaat op hun startscherm van hun mobiele apparaat. Door je logo of verwante afbeelding te gebruiken wordt je site herkenbaarder, en helpt bij het creëren van een consistente huisstijl.
Zo maak je een WordPress favicon
Als je al een favicon hebt (veel bedrijven gebruiken hun logo of een vereenvoudigde versie daarvan), sla dit deel dan gerust over. Zo niet, dan gaan we nu kijken hoe je een favicon afbeelding kunt maken.
In het verleden moest je een specifiek ICO bestand voor je favicon gebruiken. Maar tegenwoordig ondersteunen alle moderne browsers zowel ICO, PNG en GIF als favicon. JPEG wordt ook breed ondersteund (lees ook: JPG vs JPEG) maar niet in alle versies van Internet Explorer, waardoor dit een minder veilige keus is.
Als je veel met Photoshop werkt, kun je dat gebruiken om handmatig een favicon te maken. Maar het is vaak makkelijker om een eenvoudige cloud-based tool te gebruiken om een favicon te maken van een bestaande afbeelding.
RealFaviconGenerator (de cloud-based variant van de plugin waar we het later over hebben) is een ideale optie omdat:
- Het ook icoontjes voor apps maakt.
- Het de favicon iconen in zowel PNG als ICO aanbiedt.
- Je de favicon kunt aanpassen na het uploaden van je afbeelding.
- Het enige dat je moet doen is de code die de plugin maakt kopiëren en plakken.
Andere handige favicon-generators zijn:
- Favicon.cc, waarmee je een favicon helemaal vanuit het niets kunt maken of een bestaande afbeelding kunt bewerken.
- Favicon Generator die op eenzelfde manier werkt als RealFaviconGenerator.
Om RealFaviconGenerator te gebruiken, begin je door je gewenste afbeelding te uploaden door te klikken op Select your Favicon Image:
Op het volgende scherm kun je bepaalde details voor je favicon-set definiëren, als je dat wilt. Wanneer je dat gedaan hebt, scrol je naar beneden en klik je op Generate your Favicons and HTML code:
Op de volgende pagina klik je op Favicon package om je favicon-afbeelding te downloaden.
Let erop dat je deze pagina geopend houdt als je van plan bent de favicon handmatig aan je website toe te voegen.
Tips voor het maken van een WordPress favicon
Er zijn een paar tips omtrent design en formatting die de moeite waard zijn om over na te denken voordat je een favicon maakt. Als eerste dat de aanbevolen grootte voor favicons 512×512 pixels is.
Je WordPress favicon zal een perfect vierkant zijn, maar je kunt natuurlijk alsnog een rechthoekige afbeelding gebruiken en deze bijsnijden voor of nadat je deze uploadt naar WordPress. WordPress heeft een ingebouwde functie voor het bijsnijden van icoontjes als je ze toevoegt via de Customizer (waar we je zo doorheen zullen leiden).
Het is verder belangrijk om te weten dat je favicon weergegeven zal worden als een 16×16 vierkantje. Je zult dus een afbeelding willen gebruiken die er ook nog goed uitziet na het krimpen tot deze afmetingen. Alhoewel het op deze grootte weergegeven zal worden, moet het nog altijd een hoogte en breedte hebben van minstens 512 px.
Als laatste is het een goed idee om nog eens te kijken naar enkele van de Google Guidelines voor het maken en gebruiken van favicons. Dit helpt om ervoor te zorgen dat je icoon optimaal weergegeven wordt binnen zoekmachines en browser tabbladen.
Zo voeg je een WordPress Favicon toe aan je website (3 makkelijke manieren)
Nu je een favicon hebt, kun je deze gaan toevoegen aan je WordPress website. Laten we naar drie manieren kijken waarop je dat kunt doen:
1. Gebruik de WordPress Customizer om je favicon te uploaden
Sinds WordPress 4.3 hebben alle WordPress websites een site-icoon feature die het makkelijk maakt om een afbeelding te uploaden en bij te snijden om als favicon te gebruiken. Voor de meeste gebruikers is dit de eenvoudigste en snelste manier om een favicon toe te voegen aan WordPress.
Het enige wat je nodig hebt is een afbeelding van minstens 512 x 512 pixels. WordPress doet de rest. Begin door naar Weergave → Customizer te gaan binnen het WordPress dashboard.
Vanaf daar ga je naar het tabblad Site-identiteit:
Vervolgens kijk je onderaan het deel Favicon, en klik je op de knop Site icoon selecteren:
De normale interface van de WordPress mediabibliotheek zal nu verschijnen. Je kunt een bestaande afbeelding uit je Media Library kiezen of een nieuwe uploaden. Als je RealFaviconGenerator gebruikt hebt om je favicon te maken, moet je eerst het pakket dat je gedownload hebt uitpakken.
Wanneer je de goede afbeelding hebt gekozen, klik je erop en kies je Selecteren onderaan rechts:
Als je afbeelding nog geen perfect vierkant is (dus 512 x 512 px), zal WordPress je de mogelijkheid geven de afbeelding bij te snijden in het volgende scherm.
Gebruik de box om het deel van de afbeelding dat je wilt gebruiken te markeren. Aan de rechterkant zul je een preview zien van hoe je bijgesneden afbeelding eruit zal zien.
Klik op Crop Image als je tevreden bent om het proces af te ronden:
Dat is het, klaar! Het enige wat je nog moet doen, zoals altijd, is Publiceren selecteren zodat je favicon live is. Mocht je in de toekomst nog je favicon willen veranderen, dan kun je gewoon teruggaan naar deze interface.
2. Installeren van een plugin om je WordPress favicon toe te voegen
Als je liever een plugin gebruikt in plaats van de ingebouwde WordPress functie, dan kun je de populaire, gratis plugin Favicon by RealFaviconGenerator gebruiken, de plugin van de cloud-based tool die we eerder noemden.
Deze plugin is net zo eenvoudig te gebruiken als de ingebouwde WordPress Customizer. Maar het geeft nog wat extra opties voor compatibiliteit met verschillende apparaten en apps. Om het te gebruiken, installeer en activeer je de gratis plugin via je WordPress dashboard:
Na het activeren van de plugin ga je naar Weergave → Favicon om je favicon-set te maken. Het enige dat je hoeft te doen is een afbeelding te selecteren of te uploaden die minsten 70×70 px is (liefst 260x260px):
Nadat je de gewenste afbeelding hebt geselecteerd klik je op Generate favicon. Door op deze knop te klikken zal de plugin je naar de RealFaviconGenerator website brengen.
Onderaan de site kun je Generate your Favicons and HTML code selecteren, zoals we in de vorige sectie al zagen. Terwijl de tool bezig is, zal Real Favicon Generator je ondertussen terugsturen naar je WordPress dashboard:
Daarna zal je favicon helemaal klaar zijn. Je kunt previews zien van hoe het er op verschillende apparaten uit zal zien binnen de interface van de plugin.
3. Handmatig je Favicon toevoegen via FTP
Als je dingen liever handmatig doet, kun je een favicon toevoegen aan je WordPress website via File Transfer Protocol(FTP) of File Manager als je host cPanel gebruikt.
Als je deze methode gebruikt, moet je alsnog je eigen favicon afbeelding maken. Je kunt dat doen door de stappen hierboven in het artikel te volgen.
Voor deze demonstratie zullen we een pakket gebruiken dat we via RealFaviconGenerator hebben aangemaakt, maar de instructies zijn verder hetzelfde als je een andere tool gebruikt hebt.
Om handmatig een WordPress favicon aan je website toe te voegen moet je:
- Naar de bestanden van je website gaan, via een FTP client of via de File Manager in je hosting cPanel.
- De rootmapvan je site vinden en de inhoud van je favicon package daarheen uploaden (favicons.zip).
De bestanden moeten in dezelfde map staan als je wp-admin en wp-content mappen. Vervolgens gebruik je de code die RealFaviconGenerator je eerder had gegeven, en:
- Gebruik je een plugin zoals Insert Headers and Footers om het aan de header van je thema toe te voegen.
- Plak je de code direct in de <head> sectie van je thema door het header.php bestand van je thema te bewerken.
Idealiter gebruik je de route met de Headers and Footers plugin omdat het ervoor zorgt dat je je favicon niet kwijtraakt als je later je WordPress thema verandert.
Dit doe je door Insert Headers and Footers te installeren en activeren. Vervolgens ga je naar Instellingen → Insert Headers and Footers en plak je de code in het deel Scripts in Header:
Sla vervolgens je wijzigingen op. En helemaal klaar!
Verdere tips voor het gebruik van WordPress favicons
Als je elke site binnen je multisite netwerk een eigen favicon wilt geven, kun je dit het beste doen via een favicon-plugin zoals die we hierboven noemden. Alhoewel je de bestanden van je thema zelf kunt bewerken om elke site een eigen favicon te geven, is dit een aanzienlijk ingewikkelder proces dan gewoon een plugin te gebruiken.
Je zou ook kunnen overwegen om een Content Delivery Network(CDN) te gebruiken om je favicon-afbeelding te laden. De drie methoden die we eerder in dit artikel gebruikten slaan allemaal je afbeelding op op je server. Maar je kunt je website verder optimaliseren door een CDN te gebruiken voor deze bestanden.
Wanneer je Cloudflare installeert of een dienst zoals KeyCDN zullen de browser van je bezoekers de favicon laden vanuit je CDN in plaats van de server van je website. Een plugin zoals CDN Enabler zou automatisch de URL van je WordPress favicon moeten herschrijven om met bovenstaande methoden te werken.
Samenvatting
Een WordPress favicon kan je merkbekendheid verbeteren, je merk nog sterker maken, en de UX voor je bezoekers verbeteren. Gelukkig heb je verschillende manieren om eenvoudig een favicon toe te voegen.
De drie belangrijkste manieren die je kunt gebruiken om een WordPress favicon toe te voegen aan je website zijn:
- De WordPress Customizer gebruiken om een site icon te uploaden.
- Een plugin te installeren, zoals Favicon by RealFaviconGenerator.
- Handmatig een favicon toevoegen via een FTP client of je File Manager.
