Een favicon maken & toevoegen aan je WordPress website

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.

YouTube

Ben jij meer een kijker & luisteraar dan een lezer? Je kunt deze tutorial ook bekijken op mijn YouTube kanaal.

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.

Favivon maken in Canva
  • Maak een nieuw document aan van 512x512px
  • 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?

0 reacties

Een reactie versturen

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

Verder lezen?

Maak een plan voor je website, dan ga je zeker goed van start!

Voordat je begint met het maken of laten maken van een website is het belangrijk dat je een goed plan hebt, een goede fundering waarop je website gebouwd kan worden. Als je al een website hebt en deze nog niet zo succesvol is als je gehoopt had, is het aan te raden om...

De veranderingen van Mailchimp en de gevolgen voor je gratis account

Mailchimp heeft besloten om per 15 mei 2019 veranderingen aan te brengen in de abonnementen. Dit heeft voornamelijk voor de gratis versie best wel wat consequenties. Toen ik startte met mijn bedrijf heb ik voor het opbouwen van mijn e-maillijst en het versturen van...

Hoe krijg je een goede voorvertoning van een link op Facebook?

Als je de link van je nieuwe blogpost of van webpagina deelt op Facebook, dan wil je natuurlijk dat het er netjes en aantrekkelijk uitziet. De bedoeling van het plaatsen van je Facebookbericht, is uiteraard dat er mensen op je link klikken en je website...

Divi Review (2021): het beste thema voor je WordPress website?

Met een keuze uit duizenden WordPress thema's, kan de zoektocht naar het geschikte thema voor jouw website een behoorlijke uitdaging zijn. Je kunt kiezen uit de gratis en freemium thema's die via WordPress zelf te downloaden zijn of een betaald thema zoeken bij een...

Hoe kies je een goede domeinnaam voor je website?

Het kiezen van een goede domeinnaam voor je website is belangrijk. Het wordt een onderdeel van je naamsbekendheid en herkenbaarheid. Het is daarom goed om hier eens uitgebreid de tijd aan te besteden. Waar moet een goede domeinnaam eigenlijk aan voldoen? Kies de goede...

Back-up en herstel (of verhuis) je website met All-in-one WP Migration

Je bent even wat veranderingen aan het doen op je website of aan het updaten en het gaat mis. Er ontstaat ergens een conflict en de voorkant van je website ziet er ineens uit of er een storm over heen geraasd is. Of je ziet allemaal gekke dingen die er eerst niet...

WordPress geïnstalleerd? Dit kun je het beste als eerste doen

Het is je gelukt om WordPress te installeren en je staat te popelen om meteen aan de gang te gaan. Even wachten nog... Het is goed om even een paar dingen te doen voordat je verder gaat, je hoeft hier dan niet meer naar om te kijken. YouTube Ben jij meer een kijker...

7 vaak voorkomende irritaties van website bezoekers (en wat je hier aan doet)

Een goed design is heus niet alles. Wat nog veel belangrijker is, is dat je website bezoekers een goede gebruikerservaring hebben als ze op je website komen. Als ze geïrriteerd raken, dan ben je ze kwijt, en dat wil je natuurlijk voorkomen. Er zijn een aantal vaak...

De 3 populairste Page Builders voor WordPress

Als je zelf een WordPress website wil maken en niets van code weet, dan is het gebruik van een Page Builder om je website vorm te geven een goede oplossing. Zelf maak ik ook gebruik van een Page Builder om mijn websites te maken en wel de DIVI Visual Builder. De...

Verbeter de snelheid van je website door het opschonen van je database

Snelheid is hartstikke belangrijk voor je website, als de bezoekers te lang moet wachten dan haken ze af. Zo simpel is het... Een belangrijke (zo niet de belangrijkste) factor in de snelheid van je website is natuurlijk het optimaliseren van je afbeeldingen. Hier heb...
7 stappen voor een goede voorbereiding van je website

Een goede website begint bij een goede voorbereiding

Ga jij je eigen website maken? Of ben je op zoek naar een webdesigner die dat voor je doet? Allereerst is het dan belangrijk om goed voor ogen te hebben waar je met je website naartoe wilt. Dit maakt het uiteindelijk designproces veel soepeler en sneller.

Schrijf je in om waardevolle tips & inspiratie te ontvangen en je krijgt van mij de 7 stappen voor een goede voorbereiding cadeau!