Een favicon maken & toevoegen aan je WordPress website

Had je er al weleens van gehoord? Van een favicon? Gekke naam eigenlijk hè? Het is een samentreksel van de woorden ‘favorite’ en ‘icon’. Favicon dus… Je hebt hem al wel vaak gezien. Het is namelijk dat kleine icoontje dat je links in een browser tabblad ziet staan als je een webpagina opent. Je ziet ze ook staan in je favorietenlijst of op de voorpagina van je browser.

Een favicon zorgt voor herkenbaarheid en professionaliteit. Als je hem niet in je WordPress website hebt staan, dan laat hij in het tabblad het icoontje van WordPress zien. En dát wil je natuurlijk niet. In dit artikel leg ik je uit hoe je een favicon maakt en waar je hem importeert in je website.

Ben jij meer een kijker & luisteraar dan een lezer? Bekijk dan deze tutorial:

Wat zijn de specificaties van een favicon?

Een favicon is een afbeelding met een grootte van 512 bij 512 pixels. Het bestandsformaat dat hiervoor gebruikt kan worden is .jpg, .png en .gif. Meestal wordt voor een favicon het beeldmerk van je logo gebruikt. Omdat je beperkt bent met de ruimte, het een vierkant betreft èn omdat een favicon maar heel klein vertoont wordt, is het vaak niet mogelijk, om je hele logo te gebruiken. Mijn eigen logo is bijvoorbeeld liggend en onmogelijk om in een vierkant te krijgen. De Q in mijn logo springt eruit door de afwijkende kleur en grootte en was daarom een logische keuze om die als favicon te gebruiken.

Hoe maak je een favicon?

Een favicon maak je in een programma waar je in ieder geval een fotobestand kunt maken van 512×512 pixels, zoals een fotobewerkingsprogramma.

Programma’s die je zou kunnen gebruiken zijn:

Adobe Photoshop

Photoshop is een fotobewerkingsprogramma waar je zeer uitgebreide fotobewerkingen mee kunt doen. Het wordt veel gebruikt in de creatieve sector door bijvoorbeeld fotografen, grafisch vormgevers, dtp-ers, (web)designers en illustratoren. Photoshop is onderdeel van de Adobe Creative Cloud en je betaalt hiervoor met een jaar- of maandlidmaatschap. Een lidmaatschap is niet goedkoop; de prijzen gaan vanaf ongeveer €30,- per maand.

Affinity Photo

Een supergoed alternatief voor Photoshop is Affinity Photo.. De mogelijkheden zijn net zo uitgebreid maar de prijs ligt echt een flink stuk lager (€54,99 éénmalig). Dit programma is absoluut een aanrader voor als je je wat meer wil bekwamen in fotobewerking. Zelf ben ik onlangs overgestapt na jarenlang Adobe en ik ben er erg over te spreken.

Ze hebben overigens ook Affinity Designer (alternatief voor Adobe Illustrator en Affinity Publisher (alternatief voor Adobe Indesign).

Meer info vind je op de website van Affinity.

Favicon maken in Canva

Een favicon kan ook gemaakt worden in de zo’n-beetje-alleskunner Canva.

  • Maak een nieuw document aan van 512 x 512px
  • Upload de afbeelding die je wil gebruiken of ontwerp zelf een favicon met bijv. elementen.
  • Download je afbeelding als .png. Let op! Met de gratis versie van Canva kun je je afbeelding niet downloaden met een transparante achtergrond, die wordt dus wit. Met Canva Premium is dit wel mogelijk.
  • Comprimeer je bestand met tinypng.com om hem wat kleiner (minder zwaar) te maken.

Waar plaats je een favicon in WordPress?

Om je favicon in je WordPress website te plaatsen log je in en ga je naar je dashboard.

  • Kies voor Weergave > Customizer
  • Ga naar Algemene Instellingen
  • Kies voor Site Identiteit
  • Onderaan zie je dan ‘Site pictogram’ staan
  • Kies voor ‘Site pictogram selecteren’
  • Laad je afbeelding in via de Mediatheek
  • Klik vervolgens bovenin de Customizer op ‘Publiceren’

Gefeliciteerd! Je hebt zojuist je favicon in je website gezet. Bovenin de browsertab zie je het resulltaat.

Zeg eens… Wist jij al wat een favicon was?

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *