Wat is een favicon? Installeer een favicon op jouw website

Het gezegde "echte rijkdom schuilt in de kleine dingen" geldt zeker voor de bescheiden favicon. Wat is een favicon? Je kent ze ongetwijfeld. Deze kleine merkbadges zijn namelijk al sinds de tijd van Internet Explorer in de jaren negentig te vinden in webbrowsers, waar ze verschijnen in browsertabbladen en bladwijzerweergaven. Favicons kun je zien als visuele geheugensteuntjes die klanten helpen om je website te associëren met de merkidentiteit van je bedrijf.

Maak er meer van dan slechts het generieke browserpictogram van een contentmanagementsysteem (CMS). Met dit stappenplan voeg je een favicon toe die indruk maakt op je klanten (en ze helpt om gemakkelijker te navigeren door een browservenster vol openstaande tabbladen).

Een favicon is een kleine afbeelding die naast paginatitels verschijnt in browsertabbladen, bladwijzerbalken, favorietenbalken, browsergeschiedenisresultaten en zoekresultatenpagina's (SERP's).

Het woord verwijst naar ‘favorite icon’, of in het Nederlands ‘favoriet pictogram’. Een favicon is de visuele bladwijzer voor websites en helpt internetgebruikers om een webpagina gemakkelijk te identificeren wanneer ze meerdere tabbladen open hebben staan. Favicons verschijnen ook als snelkoppelingspictogrammen in de taakbalk, bijvoorbeeld bij het minimaliseren van een website. Wanneer gebruikers jouw website aan hun bladwijzers toevoegen, fungeert de favicon als bladwijzerpictogram waarmee het makkelijker is om de website tussen andere opgeslagen webpagina's terug te vinden.

In sommige besturingssystemen is de favicon zichtbaar als snelkoppeling op het bureaublad wanneer je URL's van het browservenster naar het bureaublad sleept. Browser-favicons worden vaak hergebruikt als snelkoppelingspictogrammen.

Voordelen van favicons

• Verhoog de CTR
• Bouw merkbekendheid op
• Verbeter de gebruikerservaring

Een favicon zal je website niet op magische wijze hoger laten scoren in de zoekmachineoptimalisatie (SEO). Het toevoegen van het icoontje kan wel bijdragen aan een gebruiksvriendelijkere website, samen met andere UX-designverbeteringen. Hieronder lees je meer over de voordelen van een favicon op je website:

Verhoog de CTR

Google en andere zoekmachines tonen favicons in de zoekresultaten. Een opvallende of herkenbare favicon kan je merkidentiteit versterken, waardoor mensen eerder geneigd zijn jouw website te bezoeken. Dit verhoogt de click-through rate (CTR), een belangrijke e-commerce pijler voor SEO.

Bouw merkbekendheid op

Wanneer een favicon het logo van je merk versterkt, werkt het als gratis reclame in de bladwijzerbalk van de gebruiker, op het tabblad van je website en in SERP's, wat de merkbekendheid kan verhogen.

Verbeter de gebruikerservaring

Een direct herkenbare favicon vergroot de kans dat een gebruiker je webpagina aan de bladwijzers toevoegt. Dat wordt door zoekmachines zoals Google dan weer herkend als positief signaal. Deze kleine verbetering in de gebruikerservaring stimuleert herhaalbezoeken op je website, wat je websiteverkeer en verblijftijd (ook wel dwell time genoemd) verhoogt: hoe lang een gebruiker op een webpagina blijft voordat hij terugkeert naar de SERP.

Richtlijnen voor het maken van een favicon

1. Kies de juiste grootte
2. Kies een compatibel bestandsformaat
3. Gebruik een geanimeerde favicon

Een goede favicon voldoet aan specifieke eisen qua grootte en bestandsformaat:

1. Kies de juiste grootte

De minimale grootte voor een favicon is 16 bij 16 pixels, hoewel sommige favicons worden ontworpen in 32 bij 32 pixels of 48 bij 48 pixels. De 16 bij 16 pixelgrootte wordt ondersteund in alle browserweergaven, waaronder adresbalk, tabbladen en bladwijzerweergaven. Daarom is dit de veiligste keuze. In sommige CMS kun je een favicon in meerdere groottes uploaden.

2. Kies een compatibel bestandsformaat

Het bestandsformaat speelt een cruciale rol in hoe goed een afbeelding wordt omgezet naar een favicon. De meest voorkomende favicon-bestandsformaten zijn PNG en ICO. PNG-bestanden bevatten transparantie en lossless (verliesvrije) datacompressie, wat betekent dat de beeldkwaliteit volledig behouden blijft bij het schalen. ICO-bestanden, gebruikt in Microsoft Windows Explorer, bevatten een of meer afbeeldingen in verschillende groottes en kleurdieptes, zodat ze goed kunnen worden geschaald. Het SVG-formaat kent minder browserondersteuning, maar laadt snel en is oneindig schaalbaar. Vermijd formaten zoals JPEG die beeldgegevens verliezen bij verkleining.

3. Gebruik een geanimeerde favicon

Geanimeerde GIF's of Javascript-bestanden maken je favicon extra opvallend. Houd wel rekening met mogelijke beperkingen, waaronder browsercompatibiliteit. Test een geanimeerde favicon in meerdere browsers om zeker te zijn dat het werkt. Wat bijvoorbeeld in Google Chrome goed uitpakt, betekent niet automatisch dat dit ook in een andere browser het geval is.

Populaire favicon generators

Je kunt een online favicon generator gebruiken om een favicon te maken die past bij jouw merkidentiteit. Dit zijn populaire opties:

• Favicon.io laat je eenvoudig een favicon maken van een afbeeldingsbestand, link, tekst of emoji die je kunt converteren naar verschillende formaten. Download de geconverteerde bestanden, plaats ze in de hoofdmap van je website, kopieer de link-tags en plak ze in de head-tag van je HTML-pagina.

• RealFaviconGenerator is een interactieve API waarmee je kunt specificeren hoe een afbeelding moet worden bewerkt om de favicon te genereren.

• Favicon Generator kan favicons maken per platform, zodat je kunt controleren hoe de designs eruitzien op verschillende platforms en browsers.

Tip: kijk deze video met ondertiteling aan.

Voeg een favicon toe aan HTML

Heb je een favicon voor jouw website gemaakt? Vervolgens moet je deze uploaden naar je website en de code toevoegen, zodat de favicon zichtbaar wordt in browsers en webapps.

Je kunt dit toevoegen aan HTML op je website. Een verwijzing naar de favicon verschijnt als regel in het <head>-gedeelte van het HTML-bestand van de website. Browsers lezen de instructies in de head-tag om de favicon te vinden en weer te geven. Stel dat je favicon-bestand een PNG-bestand is met de naam "merkXpictogram.png." Voeg dan deze regel toe binnen de <head></head>-tag:

<link rel="icon" type="image/png" rel="noopener" target="_blank" href="https://hk220.bbgameadm.vip/merkXpictogram.png">

De favicon kan in elke map op de site staan. In het voorbeeld bevindt deze zich in de hoofdmap van de site: een veelgebruikte locatie. Controleer altijd of het bestandspad klopt.

Het is ook mogelijk om meer dan één favicon-grootte te hebben en deze allemaal te uploaden. Je hebt één regel code nodig voor elke grootte, allemaal binnen de <head> </head>-tag. Geef elke grootte een unieke bestandsnaam en voeg een "sizes"-attribuut toe aan de code, zoals hieronder:

<link rel="icon" type="image/png" sizes="16x16" rel="noopener" target="_blank" href="https://hk220.bbgameadm.vip/merkXpictogram16x16.png">

<link rel="icon" type="image/png" sizes="32x32" rel="noopener" target="_blank" href="https://hk220.bbgameadm.vip/merkXpictogram32x32.png">

Voeg een favicon toe aan een Shopify-website

Op een Shopify-website voeg je eenvoudig een favicon toe, zonder aan de code te hoeven sleutelen:

1. Ga in een desktop-browser naar je online winkel-beheerpaneel.

2. Selecteer "Thema's" > "Aanpassen" om de thema-editor te openen.

3. Klik op "Thema-instellingen." Zoek naar het tandwielpictogram.

4. Selecteer Favicon (in sommige thema's heet dit "Logo").

5. Selecteer je afbeelding uit de bibliotheek of upload een nieuwe.

6. Indien beschikbaar, bewerk de "Alt-tekst" voor de favicon (dit verbetert de toegankelijkheid van je website). Deze tekst verschijnt wanneer een gebruiker over de favicon beweegt.

7. Sla op en test de prestaties van de favicon in verschillende browsers.

Voor meer informatie over het toevoegen van favicons vanaf een iPhone of Android-apparaat, zie het Shopify-helponderwerp over favicons.

Voeg een favicon toe op WordPress

Volg deze handleiding om een favicon toe te voegen op een WordPress-website:

1. Ga naar het WordPress-dashboard en klik op “Weergave.”

2. Klik op “Aanpassen” voor een lijst met opties.

3. Klik op “Site-identiteit.” Hier voeg je zaken toe zoals titel, tagline en logo.

4. In het gedeelte “Site-pictogram” klik je op “Selecteer site-pictogram” om de nieuwe favicon-afbeelding te uploaden.

5. Klik op “Publiceren.”

6. Test de favicon in verschillende browsers.

Voeg een favicon toe op Wix

Elke Wix-website krijgt een standaard favicon, maar Premium Plan-leden kunnen deze aanpassen. Zo wijzig je de favicon op je Wix-website:

1. Ga naar “Instellingen” in het dashboard van de site.

2. Naast “Favicon” klik je op “Beheren.”

3. Klik op “Afbeelding uploaden” of “Media uploaden” om een afbeelding toe te voegen.

4. Klik op “Toevoegen aan pagina.” Bekijk het uiterlijk van de favicon op je browsertabblad.

5. Klik op “Opslaan” en vervolgens op “Publiceren.”