Favicon maken: in 4 stappen een eigen icoontje voor je website
Als je een eigen website hebt, kom je vroeg of laat het woord favicon tegen. Dat is het kleine icoontje dat naast de paginatitel in je browsertabblad verschijnt. Klein, maar belangrijker dan veel mensen denken. In dit artikel leg ik uit wat een favicon precies is, waarom je er eentje wilt en hoe je in een paar stappen een favicon maakt voor je site.
Wat is een favicon?
Een favicon is een klein icoontje dat je website vertegenwoordigt in de browser. De naam is een samentrekking van “favorite icon”. Je ziet hem op verschillende plekken terug:
in het browsertabblad bovenaan;
in de bladwijzerbalk;
in je browsergeschiedenis;
in de zoekresultaten van Google op mobiel.
De eerste favicon werd in 1999 geïntroduceerd door Microsoft, in Internet Explorer 5. Sindsdien is hij uitgegroeid tot een vaste webstandaard. Alle moderne browsers ondersteunen favicons.
Waarom een favicon?
Een favicon lijkt een detail. Maar hij doet meer werk dan je verwacht.
- Hij maakt je website herkenbaar tussen openstaande tabbladen. Heb jij weleens 15 tabs openstaan? Ik wel. Dan is een favicon goud waard om je site terug te vinden.
- Hij geeft je site een afgewerkte uitstraling. Een browser die het standaardicoontje toont (bijvoorbeeld van WordPress), geeft een rommelig signaal af. Een eigen favicon laat zien dat je hebt nagedacht over de details.
- Hij versterkt je merk. Je favicon staat naast je domeinnaam in zoekresultaten en bladwijzers. Elke keer dat iemand je site terugvindt, ziet hij ook jouw beeldmerk. Gratis exposure, week in week uit.
- Wat doet een favicon met je SEO? Direct invloed op je positie in Google heeft hij niet. Indirect kan een herkenbare favicon je doorklikratio (CTR) wel helpen, simpelweg omdat een resultaat met een sterk icoon meer aandacht trekt dan eentje zonder. Google adviseert in zijn officiële richtlijnen voor Google Search dat je favicon visueel representatief moet zijn voor je merk.
Een favicon maken in 4 stappen
Goed, naar de praktijk. Je hoeft geen designer te zijn om een goede favicon te maken. Met deze 4 stappen kom je een heel eind.
Stap 1. Vertrek van je logo of beeldmerk
De meeste favicons zijn een vereenvoudigde versie van een logo. Vaak werkt alleen het beeldmerk (zonder de tekst), of een initiaal in je merkkleur. Een logo met een complete bedrijfsnaam erin is op 16 bij 16 pixels niet leesbaar. Stel je een visitekaartje voor dat je vanaf 5 meter afstand nog moet kunnen herkennen. Wat blijft er over? Dat is je favicon.
Heb je nog geen logo? Dan is dit het moment om er een te (laten) maken. Een herkenbare visuele identiteit is sowieso de basis als je een website maakt voor je bedrijf.
Stap 2. Kies de juiste afmetingen
Een favicon is altijd vierkant. De klassieke maat is 16 bij 16 pixels. In de praktijk werk je beter met een groter bronbestand, zodat je favicon ook scherp blijft op moderne schermen en mobiele apparaten.
Google adviseert een veelvoud van 48 pixels. Denk aan:
48 bij 48 pixels;
96 bij 96 pixels;
144 bij 144 pixels;
180 bij 180 pixels (voor iPhones en iPads, dit heet de Apple Touch Icon).
Mijn tip:
Maak je favicon één keer in een groot formaat (bijvoorbeeld 512 bij 512 pixels) en exporteer hem daarna naar de kleinere maten die je nodig hebt.
Stap 3. Kies een bestandsformaat
Vroeger was ICO de enige optie. Tegenwoordig heb je meer keus:
PNG. Het meest gebruikte formaat. Levert scherpe icoontjes op, met optionele transparante achtergrond.
SVG. Schaalbaar en blijft op elk scherm haarscherp. De ondersteuning is inmiddels breed.
ICO. Werkt nog steeds en is handig als fallback voor oudere browsers. Eén bestand kan meerdere maten bevatten.
Veel ondernemers houden het simpel: een PNG voor de browser, eventueel aangevuld met een ICO als fallback.
Stap 4. Sla op en plaats hem op je site
Hoe je je favicon plaatst, hangt af van hoe je website is gebouwd. Daar kom ik zo op.
Tools om zelf een favicon te ontwerpen
Niet handig met designsoftware? Geen probleem. Er zijn meerdere gratis tools waarmee je een favicon maakt zonder Photoshop of Illustrator te openen.
RealFaviconGenerator. Genereert in 1 keer alle benodigde formaten en codefragmenten voor je. Je uploadt een afbeelding en krijgt een zip-bestand terug met PNG, ICO, Apple Touch Icon en de bijbehorende HTML-snippet.
Favicon.io. Werkt op een vergelijkbare manier. Heeft daarnaast een tool waarmee je een favicon bouwt op basis van een tekst (bijvoorbeeld je initialen) en een achtergrondkleur.
Wil je liever zelf in een ontwerpprogramma werken? Probeer dan eens Canva, GIMP of Figma. Het belangrijkste is dat je eindigt met een vierkant bestand in de juiste afmetingen.
5 ontwerptips voor een favicon die werkt
Een favicon ontwerpen is lastiger dan het lijkt. Op postzegelformaat moet alles kloppen.
- Hou het simpel. Een favicon van 16 bij 16 pixels heeft geen ruimte voor fijne lijnen of textuur. Werk met 1 duidelijk symbool, 1 lettervorm of een basale vorm.
- Vermijd tekst, of beperk je tot 1 of 2 letters. Een complete bedrijfsnaam is niet leesbaar. De initialen van je merk in een sterke kleur werken vaak beter dan een gekrompen logo.
- Zet contrast in. Je favicon verschijnt op witte tabbladen, donkere bookmark-balken en grijze geschiedenisschermen. Zorg dat hij overal opvalt.
- Blijf trouw aan je huisstijl. Je favicon, je logo en je website moeten bij elkaar passen. Dezelfde kleur, dezelfde toon, dezelfde sfeer.
- Test op meerdere plekken. Bekijk je favicon in een licht én donker browsertabblad, in mobiele zoekresultaten van Google en op een snelkoppeling op je telefoon. Pas dan zie je of hij overal overeind blijft.
Een favicon plaatsen in WordPress
Werk je met WordPress? Dan is je favicon in een paar klikken geregeld. Vanaf WordPress versie 4.3 heet de favicon het “site-icoon”.
- Log in op je WordPress-dashboard.
- Ga in het menu naar “Weergave” en kies “Customizer”.
- Open “Site-identiteit”.
- Upload je afbeelding bij “Site-icoon” en sla de wijzigingen op.
WordPress regelt vervolgens zelf dat het juiste icoon op de juiste plek wordt getoond, in alle benodigde formaten. Werk je nog niet met WordPress en denk je erover na? Dan kun je beginnen met WordPress hosting bij Hostnet. Wij installeren WordPress voor je en je krijgt meteen een https-verbinding en zakelijke e-mail erbij.
Een favicon toevoegen in Website Builder
Gebruik je onze Website Builder? Dan gaat het nog iets sneller.
- Log in op de Website Builder-editor.
- Klik via het menu rechtsboven op “Instellingen” in het linkermenu.
- Klik bij “Favicon” op “Afbeelding toevoegen”.
- Kies een afbeelding uit je webruimte of upload een nieuw bestand.
- Klik op “Voeg toe aan pagina”, sla op en publiceer.
Je favicon is nu zichtbaar voor je bezoekers. Kom je er niet uit, lees dan dit helpdeskartikel.
Mijn tip
Kies een vierkante afbeelding van minimaal 32 bij 32 pixels. Het liefst je beeldmerk of een opvallende initiaal.
Een favicon toevoegen via HTML of FTP
Heb je je website laten bouwen door een ontwikkelaar? Of werk je zelf in de code? Dan voeg je je favicon zelf toe in de HTML. In de <head> van je homepage plaats je een regel als deze:
<link rel="icon" type="image/png" href="/favicon.png">Voor een SVG-versie of een ICO-fallback voeg je een extra regel toe. Het bestand zelf upload je naar de root van je webhosting. Dat is dezelfde map waar ook je index.html of WordPress-installatie staat. Dat doe je via een FTP-client zoals FileZilla, of via de File Manager bij je hostingpakket. Host je je website bij Hostnet? Dan vind je in Mijn Hostnet de juiste tools om je bestanden te beheren.
Mijn favicon werkt niet: wat nu?
Je hebt alles ingesteld, maar in je browser of in Google verschijnt nog steeds het oude icoon. Of een leeg veldje. Frustrerend. En meestal goed op te lossen.
Je browser laat een oude versie zien
Browsers slaan favicons op in hun cache. Open je website in een incognitovenster of leeg de cache van je browser. Vaak zie je dan meteen je nieuwe icoon.
Google heeft het nog niet opgepakt
Voor zoekresultaten kan het meerdere dagen tot enkele weken duren voordat Google je nieuwe favicon indexeert. Een herindexeringsverzoek via Google Search Console kan helpen.
Het bestand staat niet in de juiste map
Je favicon hoort in de hoofdmap (de root) van je domein te staan. Staat hij in een submap? Dan vindt Google hem mogelijk niet.
Het formaat klopt niet
Een niet-vierkante afbeelding of een te klein bestand wordt door Google overgeslagen. Vierkant en minimaal 8 bij 8 pixels, met een voorkeur voor formaten van 48 pixels en hoger.
Klein detail, blijvende indruk
Een favicon is geen prijswinnend designproject. Maar hij hoort wel bij de basis van een afgewerkte website, net zoals een eigen domeinnaam en een zakelijk e-mailadres. Het zijn juist die kleine onderdelen die samen bepalen hoe professioneel jouw site overkomt op een bezoeker.
Twintig minuten werk, een blijvende indruk.
Heb jij nog tips om een goede favicon te maken? Of liep je tegen iets aan toen je er eentje plaatste op je site? Laat het hieronder weten in een reactie!
