Je hebt ze vast al opgemerkt, de kleine logo’s in het tabblad van je browser.

Maar wat is een favicon nu precies? Kan je zelf een favicon maken? En hoe installeer je ze? In deze blogpost geef ik een antwoord op al deze vragen. 

Een favicon is een kleine afbeelding die je website vertegenwoordigt. Je vindt dit icoontje terug naast de naam van een webpagina op het tabblad van je webbrowser, bij je bladwijzers en je surfgeschiedenis. Vaak gaat het om een vereenvoudigde of verkleinde versie van het logo van de website.

Maar is een favicon nu werkelijk zo belangrijk om er een heel artikel aan te wijden? Gezien het wijdverspreide gebruik ervan is er best wat over te vertellen.  

Wat is de betekenis van een favicon?

Favicon komt van het Engelse ‘favorite icon’. Dit verwijst naar hun oorspronkelijke gebruik als bladwijzer. 

Favicons maakten voor het eerst hun opwachting in 1999 toen Microsoft Internet Explorer 5 uitbracht. Ze werden gebruikt om de websites aan te duiden die je opgeslagen had in je ‘favorieten’. 

Tegenwoordig worden favicons ondersteund door alle browsers. 

Naast op het tabblad van je browser vind je ze ook nog op verschillende andere plaatsen: 

• Bladwijzers

• Browser extensies

• Geschiedenis

In 2019 begon Google de favicons ook weer te geven in de zoekresultaten voor mobiele apparaten.

Voor desktop gebruikers is dit nog niet het geval maar Google begon begin 2020 wel met experimenten voor de implementatie hiervan.

Waarom is een favicon belangrijk?

Als je zoals mij werkt, dan heb je tijdens een internetsessie een hele hoop tabbladen openstaan.

De favicons zorgen ervoor dat je makkelijk tussen de verschillende tabbladen kan navigeren op basis van het icoontje. 

Ze zijn ook een onderdeel van je branding en zorgen voor de herkenbaarheid van je site. Op die manier kan je website makkelijker geïdentificeerd worden. 

Daar bovenop geven Favicons vertrouwen. Als ik moet kiezen tussen een website waar een favicon aanwezig is, of eentje zonder, dan kies ik altijd voor de website met. Het toont me een bepaald niveau van professionaliteit. 

Hoewel favicons geen directe impact hebben op je SEO, toch kunnen ze een belangrijke bijdrage leveren. 

• De gebruiksvriendelijkheid van een website speelt wel een grote rol in de zoekresultaten. Je favicon zorgt ervoor dat men je website makkelijker terugvindt in bladwijzers, tabbladen, enz. Met andere woorden de gebruiker van je website minder tijd laten verspillen bevordert de gebruiksvriendelijkheid. 
• Daarnaast zou het ontbreken van een favicon ervoor kunnen zorgen dat je website niet wordt opgeslagen door de gebruiker in zijn favorieten. Het opgeslagen worden als bladwijzer wordt door Google mogelijks gezien als een rangschikkingssignaal. 

Welk type bestand is een favicon?

Oorspronkelijk werd het bestand opgeslagen als favicon.ico in de root directory van je website. 

Tegenwoordig kunnen ook andere bestandstypes gebruikt worden.

In onderstaand voorbeeld kunnen volgens Wikipedia ICO, PNG en GIF bestanden door alle browsers gebruikt worden.

Mijns inziens wordt tegenwoordig de PNG extensie heel vaak gebruikt omdat de bestandsgrootte heel beperkt blijft en de transparante achtergrond de mogelijkheid biedt om andere vormen dan een simpel vierkant weer te geven.

Hoe groot moet een favicon zijn?

Google raadt aan dat favicons vierkanten zijn waarvan de grootte een veelvoud is van 48 pixels. 

Google schaalt deze afbeeldingen dan naar 16 x 16 pixels om te tonen op de browser tabbladen. Er worden echter verschillende groottes getoond op verschillende apparaten. 

• 16×16: De grootte van webbrowser favicons.
• 32×32: De grootte van de startmenu icoontjes.
• 96×96: De grootte van het bureaublad pictogram.
• 180×180: De grootte van de Apple Touch iconen.
• 300×300: De grootte die door Squarespace gevraagd wordt.
• 512×512:De grootte die door WordPress gevraagd wordt.

Belangrijk om te onthouden als je een favicon maakt of laat maken: zorg ervoor dat de favicon duidelijk herkenbaar is. Als je een logo hebt met veel details of tekst is de kans groot dat dit niet meer zichtbaar is wanneer de afbeelding naar 16 x 16 pixels verkleind wordt. 

Dit zie je ook duidelijk als je kijkt naar de favicon van grote bedrijven als Facebook, Google, of Youtube. Dit zijn duidelijk herkenbare symbolen die je associeert met hun merk, zonder tekst (ok, ok, een letter is technisch gezien ook tekst maar je snapt wat ik bedoel). 

Hoe maak je zelf een favicon?

Favicons maken kan op allerlei verschillende manieren. Je kan aan de slag met gratis of betalende software of als je het nog eenvoudiger wil, laat je iemand anders het werk voor je doen.

Een favicon maken met Photoshop

• Stap 1: Bestand > Nieuw
• Stap 2: Ik ga ervan uit dat je met WordPress werkt voor dit voorbeeld dus geef bij Breedte en Hoogte 512 in en zorg dat de afmetingen in pixels staan. Aangezien het om een afbeelding gaat die op de computer gebruikt wordt, kan je de resolutie op 72 pixels/inch en de kleurmodus op RGB laten staan.

• Stap 3: Als je gewoon je logo wil gebruiken als favicon, open dan je logo in Photoshop.
• Stap 4: Kijk aan de rechterkant van het scherm waar je layers of lagen staan. Als je logo een gewone afbeelding is als een PNG of JPG bestand, dan zal hier waarschijnlijk Achtergrond staan met een slotje. In dat geval dubbelklik je op het slotje en verschijnt er een venster met nieuwe laag. Hier klik je gewoon OK. Achtergrond is nu veranderd in Laag. Als er oorspronkelijk al laag stond, kan je deze stap overslaan.

• Stap 5: Neem de Move Tool (shortcut V) en sleep je logo nu naar het tabblad waarin je je favicon wil maken. Let op: je sleept het logo zelf van het ene tabblad naar het andere, niet het tabblad proberen verslepen. Als alles goed gaat, heb je nu je oorspronkelijk aangemaakte bestand van 512 x 512 pixels waarin je 2 lagen hebt: eentje waar niets op staat, en eentje waar je logo in zit. 

• In mijn bovenstaande voorbeeld (dit is trouwens gewoon een random logo dat ik van het internet geplukt heb ter illustratie) komt de grootte van het logo enigszins overeen met de grootte van het aangemaakte bestand (512 x 512 pixels). Dit gaat echter niet altijd het geval zijn. Het zou perfect kunnen dat je logo 2.000 pixels groot is hetgaan betekent dat je het zal moeten verkleinen. 
• Stap 6: Terwijl de laag van je logo geselecteerd is, klik je op Edit > Transformeren > Schalen. In bovenstaande foto zie je het verschil tussen de lagen. De bovenste laag is geselecteerd en heeft een blauwere kleur terwijl de onderste laag gewoon grijs is en dus niet geselecteerd.

• Stap 7: Je merkt nu dat de randen van het logo bestand zichtbaar worden. Je cursor is ook veranderd in een pointer. Je kan nu met het logo slepen totdat je één van de hoeken van het logo bestand in beeld hebt. Als je met je cursor over een van de hoeken gaat, zie je dat de cursor verandert naar een dubbele pijl. 

• Stap 8: Klik op de hoek van de afbeelding en hou de muisknop ingedrukt. Druk voor je begint te verschuiven ook de SHIFT knop in en hou deze ingedrukt. Dit zorgt ervoor dat de afbeelding evenredig geschaald wordt. Moest er iets mislukken, kan je bij Edit voor Ongedaan maken kiezen. 
• Stap 9: Klik op Enter zodra je tevreden bent over de grootte van het logo. 
• Stap 10: Om je bestand op te slaan, ga je naar Bestand > Opslaan voor web. 

• Stap 11: Kies voor de PNG extensie en klik Opslaan. Je kan nu aangeven waar je je bestand op je computer wil opslaan. 

• De bovenstaande stappen zorgen ervoor dat je een favicon gemaakt hebt met een afbeelding in een wit vierkant. Wil je liever een doorzichtige achtergrond dan komen er nog enkele stappen bij. Zie hieronder de 2 versies naast elkaar.

• Stap 12: Kies in het menu Selecteer > Color Range. Je krijgt nu een pipetje te zien waarmee je op de achtergrond klikt. Er opent zich ook een venster om je te tonen wat er precies geselecteerd wordt. 

• Ik zet de Fuzziness op maximum maar je kan hiermee schuiven om te zien wat het beste resultaat geeft. Hetgeen de afbeelding in het zwart toont, is hetgeen overblijft nadat je de achtergrond verwijderd hebt.
• Stap 13: Klik op OK. Je ziet nu een stippellijn rond de elementen van je logo om aan te geven wat er allemaal geselecteerd is. Klik op delete en de achtergrond verdwijnt. 

• Stap 14: Klik op Select > Deselecteren om de selectie ongedaan te maken. Keer nu terug naar Stap 10 om het bestand op te slaan als een PNG bestand. Vergeet niet Transparantie aan te vinken!

Heb je geen toegang tot Photoshop, dan kan je ook altijd gratis online foto editors gebruiken zoals Pixlr of Canva.

Een favicon maken met favicon generators

Je kan online ook gespecialiseerde tools vinden om favicons te maken. Ik gebruik deze tools zelf niet maar ik geef je graag een overzicht. 

• https://www.favicongenerator.com/
• http://www.genfavicon.com/
• https://favikon.com/
• https://www.favicon-generator.org/
• Dynamic Drive Favicon Tool;
• Favigen
• Degraeve Favicon
• Favicon.cc
• X-icon editor 

Een favicon laten maken op Fiverr

Als je al het bovenstaande te moeilijk of teveel werk lijkt, kan je ook gewoon iemand anders (tegen betaling) vragen om je favicon te maken. Op Fiverr vind je veel keuze!

Hoe Voeg Je Een Favicon Toe Aan Je Website?

Nu je hebt geleerd wat een favicon is en hoe je er een kan maken of bestellen, toon ik je hoe je het favicon bestand toevoegt aan je website. 

Een favicon toevoegen aan een WordPress website

Een favicon toevoegen aan WordPress kan met enkele klikken van de muis. 

Als je ingelogd bent in je WordPress website ga je naar ‘Appearance’ en klik je vervolgens op ‘Customize’.

Dan klik je op ‘Site Identity’ en hier kan je de titel en de tagline van je website veranderen, maar ook je favicon toevoegen. 

Klik simpelweg op ‘Select site icon’ en dan kan je favicon afbeelding selecteren uit je mediabibliotheek.

Heb je je favicon afbeelding nog niet geüpload, klik dan op ‘Bestanden uploaden’ en dan kan je van daar uit je bestand selecteren. 

Zoals je hierboven ziet, geeft WordPress zelf al aan dat je best een afbeelding van minimaal 512 x 512 pixels gebruikt.   

Moest je gebruik maken van websitebouwers zoals Divi van Elegant Themes of Elementor, kan je op exact dezelfde manier als hierboven aangegeven je favicon toevoegen aan je website. 

Een favicon toevoegen aan een Thrive Themes website

Thrive Themes is een bedrijf dat themes en plugins maakt voor WordPress. Ze specialiseren zich in het aanzetten tot conversie, met andere woorden bezoekers aanzetten tot klikken, inschrijven, of kopen. 

Mijn website Poenscheppen.online is gemaakt met Thrive Themes en ik persoonlijk vind het één van de eenvoudigste websitebouwers waar ik tot nu toe al mee gewerkt heb. 

Aangezien Thrive Themes met WordPress werkt, kan je dus je favicon ook op bovenstaande manier toevoegen. 

Thrive Themes heeft echter ook eigen menu’s hiervoor voorzien. 

Als je ingelogd bent in je WordPress site ga je  naar ‘Thrive Dashboard’ en klik je op ‘Thrive Theme Builder’.

Dan kan je in het menu kiezen voor ‘Branding’. 

Onder ‘Branding’ kan je kiezen voor ‘Favicon’ en kan je je bestand uploaden. 

Een favicon toevoegen aan een Blogger website

Als je een Blogger website hebt, dan zal je vast al gemerkt hebben dat er al een favicon op je browser tabblad staat. 

De witte ‘B’ op een oranje achtergrond is de standaard favicon die voor alle Blogger websites gebruikt wordt. 

Je  kan deze echter makkelijk vervangen door je eigen favicon. 

Als je ingelogd bent in je Blogger website, klik je op ‘Layout’. Je ziet dan de ‘Favicon’ widget en klikt op ‘Edit’.

Hier kan je dan je eigen favicon toevoegen. Door Blogger wordt gevraagd dat je favicon een vierkant bestand is, en kleiner dan 100 kb.

Ik heb zelf geen Blogger website maar onderstaande video toont heel duidelijk hoe het moet. 

Een favicon toevoegen aan een Wix website

Wix is een online platform waarmee je websites en blogs kunt bouwen. 

Als je ingelogd bent in je Wix website klik je op ‘Manage & Edit Site’. 

In het menu aan de linkerkant klik je op ‘Favicon’ en daarna op ‘Upload Favicon’.

In onderstaande Wix tutorial wordt het proces op een simpele manier getoond. 

Een favicon toevoegen aan een Squarespace website

Om een favicon toe te voegen aan je Squarespace website kan je de onderstaande instructie volgen of de video tutorial bekijken. 

Als je ingelogd bent in je Squarespace website, klik dan in het menu aan de linkerkant op ‘Design’. Hierna klik je op ‘Browser Icon’ en kan je je favicon uploaden.

Vergeet niet om na het uploaden op ‘Save’ te klikken om de wijzigingen op te slaan. 

Wat Is Een Favicon Conclusie

Als je dit een nuttig artikel vond, mag je me altijd iets laten weten in de comments. Moest er iets niet duidelijk zijn, kan je me daar ook altijd een berichtje sturen. 

Klik hier voor meer informatie over zelf een blog beginnen.