Favicon vierkantje maken webbrowser met icoontje

Logo cursus traing wordpress

Favicon vierkantje maken webbrowser met icoontje

Wat is een Favicon in WordPress?

Een favicon is een klein icoontje dat in de browserbalk van je bezoekers wordt getoond. Dit icoontje wordt ook gebruikt als bezoekers je website aan hun favorieten toevoegen.

In de favorieten-balk van hun browser wordt dan je favicon getoond. De meeste bedrijven kiezen voor een klein, herkenbaar beeldmerk als favicon. Een standaard favicon heeft de afmetingen 16×16, 32×32 of 64×64 pixels, en bevat 16 kleuren.

favicon maken website vierkantje ikoon website webbrowser
favicon maken website vierkantje ikoon website webbrowser

Favicon toevoegen met WordPress (beste 3 manieren)

Methode 1 | Gebruik WordPress Customizer om favicon te uploaden

Sinds WordPress 4 hebben alle WordPress websites een site icoon functie waarmee u gemakkelijk een afbeelding kunt uploaden en bijsnijden om als favicon te gebruiken.

Voor de meeste gebruikers is dit de gemakkelijkste en snelste manier om een favicon aan WordPress toe te voegen. Helemaal als je een goed thema gebruikt.

Alles wat je nodig hebt is een afbeelding met een grootte van ten minste 512 x 512 pixels. WordPress zal de rest doen.
Ga eerst naar Weergave → Customizer in het WordPress dashboard.

Met het Astra thema bijvoorbeeld ga je naar:

  • Weergave → Customizer → Site identity

Methode 2 | Installeer WordPress plugin om favicon toe te voegen.

Als u liever een plugin gebruikt in plaats van de ingebouwde WordPress-functie, kunt u de populaire gratis plugin Favicon van RealFaviconGenerator gebruiken, de cloud-gebaseerde tool die we eerder noemden.

Deze plugin is net zo makkelijk te gebruiken als de ingebouwde WordPress Customizer. Het biedt echter een aantal extra opties voor compatibiliteit met verschillende apparaten en apps.

Methode 3 | Favicon handmatig toevoegen via FTP

Als u het liever handmatig doet, kunt u een favicon aan uw WordPress website toevoegen via File Transfer Protocol (FTP) of als uw host cPanel gebruikt.

Als u deze methode gebruikt, moet u nog steeds uw eigen favicon-afbeelding maken. U kunt dit doen door de stappen onderaan het artikel te volgen.

Voor deze demonstratie gebruiken we een pakket gemaakt door RealFaviconGenerator, maar de instructies zijn verder dezelfde als u een ander gereedschap zou gebruiken.

Om handmatig een WordPress favicon aan uw website toe te voegen, dient u het volgende te doen:

  • Ga naar de van uw website, via een FTP-client of via de bestandsbeheerder in uw hosting CPanel.
  • Zoek de hoofdmap van je website en upload de inhoud van je favicon pakket (favicons.zip).
  • De bestanden moeten in dezelfde map staan als uw wp-admin en wp-content mappen.
  • Gebruik vervolgens de code die RealFaviconGenerator u eerder gaf en:
  • Gebruik een plugin zoals Insert Headers and Footers om het in de header van je thema in te voegen.
  • Voeg de code rechtstreeks in de sectie van uw thema in door het header.php bestand van uw thema te bewerken.
Favicon vierkantje maken webbrowser met icoontje voor WordPress
Favicon vierkantje maken in webbrowser met icoontje voor WordPress met plugin

In het ideale geval gebruikt u de Headers and Footers plugin, omdat die ervoor zorgt dat u uw favicon niet verliest als u later uw wijzigt.

Installeer en activeer hiervoor de functie Kop- en Voetteksten invoegen. Ga dan naar Instellingen → Kop- en Voetteksten invoegen en plak de code in de sectie Scripts in Kopteksten:

Favicon maken met Photoshop

Om een favicon te maken voor je WordPress website, kun je het beste een vierkante afbeelding maken met een minimaal formaat van 512×512 pixels. Je kan Photoshop gebruiken of een ander programma.
Adobe Photoshop en fotobewerkingbewerkingprogramma's

Favicon online maken

Je kan ook een favicon online maken. Dit vind ik zelf een goede website. Je kan zelf een favicon intekenen:
https://www.favicon.cc

Transparante achtergrond voor favicon

Ik raad aan om je favicon als PNG te maken. Logo's en beeldmerken zien er als PNG vaak scherper uit dan JPG. Bovendien kan een PNG-afbeelding een transparante hebben. Zo weet je zeker dat je favicon er in iedere browser mooi uit ziet. In de onderstaande afbeelding zie je het verschil tussen een JPG en een transparante PNG. Klik op de afbeelding voor een grotere weergave.


Wil je meer details over Favicon vierkantje maken webbrowser met icoontjeof info?

Wil je meer weten? Veel bezoekers met interesse in Favicon vierkantje maken webbrowser met icoontje bekeken ook de onderstaande handleidingen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress website beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je website mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Favicon vierkantje maken webbrowser met icoontje

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Favicon vierkantje maken webbrowser met icoontje en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven