Wat is een favicon?
Een favicon is een icoontje. Meestal is deze een kleinere weergave van je logo. Ze worden door verschillende browsers getoond.
Vaak verschijnen favicons bovenaan je brower. Meestal staan deze in de bovenste werkbalk, naast de titel of bij je favorieten. Kijk eens bij je favorieten. Zie je die kleine icoontjes staan naast de opgeslagen websites? Dat zijn favicons.
Deze favicon geeft meer kleur en herkenbaarheid aan je website. Dankzij dit klein logootje kunnen wederkerende bezoekers heel snel op jouw link klikken. Onrechtstreeks zorgt het dus voor meer wederkerende bezoekers.
Bovendien ziet een favicon er nog leuk uit ook. Het is niet heel ingewikkeld om te maken en het kost je weinig tijd. Het is dus zeker de moeite om deze in je website te integreren.
Hoe maak je een favicon?
Er bestaan heel wat websites waarop je gratis favicons kan maken. De populairste websites hiervoor zijn https://favicon.io/ en Real favicon generator. Beide zijn heel gebruiksvriendelijk en komen hun beloftes na.
In dit voorbeeld gaan we aan de slag met favicon.io omdat deze de bekendste en makkelijkste is.
1. Kies het juiste logo
Een favicon stelt, in een kleine weergave, jouw logo voor. Zorg ervoor dat je een logo kiest dat ook duidelijk is in een verkleinde weergave. Veel details en teksten gaan verloren in een favicon.
Soms is het ook verstandig om een apart logo voor te bereiden voor je favicon. Op onze website hebben een logo met tekst en een icoontje. Dat was te lang voor het favicon. Daarom hebben een apart logo gemaakt, zonder tekst.
Bedrijven kiezen dan ook meestal voor een afbeelding of een enkele letter. Kijk eens in je favorieten en verkrijg zo een idee van alle verschillende mogelijkheden. Ons advies: Houd het simpel en kies een duidelijke afbeelding of letter.
2. Maak er een vierkant van
Favicons worden getoond als vierkanten. Je maakt van je logo dan ook best eerst een vierkant. Op die manier gaan er geen gegevens verloren. Ook zullen generators er geen vreemde verhoudingen van kunnen maken. Dat komt amateuristisch over.
Maak van je logo, bestemd voor je favicon, al op voorhand een vierkant. De uiteindelijke favicon kan schermafmetingen krijgen van bijvoorbeeld 16×16 of 32×32 pixels. Deze hangen af van de verschillende browsers en platformen. Toch zal je altijd bij een vierkantje uitkomen.
3. Aan de slag met favicon.io
Surf naar de website https://favicon.io/ .
Vervolgens zie je enkele opties staan:
- Generate from text
- Generate from image
- Generate from Emoji
Als je een volledig nieuw logo wilt starten met een letter, kies dan voor ‘Generate from text’. Bij deze optie mag je de 2 vorige stappen zelfs overslaan. Speel met de verschillende opties en kleuren. Zo zal je al heel snel een gepaste favicon verkrijgen.
Generate from Emoji raden we voor meeste bedrijven af. Het komt niet altijd professioneel over om een emoji te kiezen voor je merk. Kies voor een favicon die de eigenheid van je brand weerspiegelt.
In ons voorbeeld gaan we aan de slag met generate from image.
Klik op de knop Generate from image. U krijgt vervolgens een pagina te zien waar u het logo kan uploaden.
4. Download je favicons en code
Sleep je logo in de zone met de stippeltjes of klik op ‘Drag your file here or click here to upload’ en zoek de afbeelding op uw computer.
Links bovenaan krijgt u een Preview te zien van de verschillende favicons. Bent u tevreden? Klik dan op Download. U krijgt nu een zip-bestand op uw computer. Open dit bestand op uw computer met winzip. Wie geen winzip heeft, kan de bestanden ook openen met WinRar.
Klik de website nog niet meteen weg. Scroll nog even naar beneden. Daar zal u de Engelstalige instructie en code vinden. Sla deze code ook op uw computer of integreer ze meteen in uw website.
Deze code zal de favicons op uw website integreren.
5. Een woordje over de verschillende formaten
Na het openen van uw winzip-bestand zal u hetzelfde favicon verkrijgen in verschillende formaten. Dit komt omdat Android, Apple en de verschillende internetbrowsers andere formaten hanteren. De verschillende favicons, in combinatie met de HTML-code zorgen voor een juiste weergave op de verschillende toestellen.
Meeste browsers en desktops hanteren de 16×16 en 32×32 formaten. Andere toestellen en ’tegels’ hanteren meestal grotere formaten.
Hoe voeg je een favicon toe aan je website?
A) HTML
U heeft daarnet de favicons en code gegenereerd. Plaats de favicons bij de afbeeldingen van uw website. De ideale plaats hiervoor is bij de root-directory van uw website. Plaats de code vervolgens in het <head> </head> gedeelte van uw website.
Test vervolgens of u het favicon te zien krijgt bij het openen van uw website.
Elke website die vanuit HTML is opgebouwd is uniek. Toch zijn er een aantal ‘good practices’ die bij web design gelden. Contacteer uw web developer indien u geen resultaat te zien krijgt.
B) WordPress website
Een favicon uploaden in WordPress is ook heel gebruiksvriendelijk. Er zijn heel wat thema’s of plug-ins die al het technische werk in jouw plaats doen.
Via je thema:
Er zijn veel verschillende WordPress thema’s. Elk thema heeft zijn eigen kenmerken en plaatsen om logo’s en favicons te uploaden. Ter illustratie tonen wij je hoe je een favicon upload in Divi. Divi is een van de populairste premium WordPress thema’s (lees hier ons Divi theme review).
Bij het Divi thema volg je deze stappen:
- Ga naar je dashboard
- Klik op Weergave
- Kies Customizer
- Klik op General Settings
- Klik op Site identity
- Upload je logo bij Favicon
Verschillende thema’s hebben verschillende manieren op dit te doen. Bij de bekendste thema’s zal je online heel wat info of filmpjes vinden hoe je dit moet doen. Niet gevonden? Maak je geen zorgen. Je kan ook favicons uploaden via een plug-in (zie hieronder).
Via Plug-ins:
Plug-ins zijn kleine stukjes software die een bepaalde taak op je website vervullen. Doorgaans is het de regel om zo weinig mogelijk plug-ins op je website te installeren. Wanneer je favicons kan uploaden via code of een thema, is dit nog altijd de beste optie.
Nochtans zijn favicon plug-ins niet zwaar of belastend voor een website. Kies een plugin die recent nog een update kreeg en compatibel is met jouw versie van WordPress (staat bij plugins naast het aantal actieve installaties).
- Klik bij Plugins op Nieuwe plugin.
- Klik op het vakje ‘Plugins zoeken…’
- Typ het zoekwoord ‘favicon’ in.
- Zoek ‘Favicon by RealFaviconGenerator’ en klik op ‘Nu installeren’
- Klik vervolgens op activeren
Volg de instructies op van de plugin. Kijk vervolgens na of je favicons getoond worden op je website en browser.
Conclusie
Er zijn heel wat generators en mogelijkheden om een plugin op je website te krijgen. Neem even de tijd om dit in orde te maken. Het is een leuk onderdeel voor jouw nieuwe website.
Laat de technische kant je niet afschrikken. Volg het stappenplan of laat je helpen door verschillende tools. Denk vooral aan de gouden regel: Houd het simpel en overzichtelijk. Veel succes!
