Zelf een Favicon op jouw WordPress-website instellen [Must Read]

Het is je vast niet ontgaan dat Google Search op mobiel een nieuw uiterlijk heeft gekregen. Wat doen al die favicons (pagina-icoon) opeens in de mobiele zoekresultaten? Op 22 mei is er door Google een update gecommuniceerd én uitgerold. Enkele dagen later was het nieuwe mobiele design van Google ook voor ons in Nederland zichtbaar.

In mijn vorige blog schreef ik al over Google Mobile First Indexing. En ook nu rolt Google een belangrijke mobiele update uit waar ook jij mee aan de slag ‘moet’. Het is vanaf nu belangrijk geworden om een icoontje aan je website toe te voegen.

Ik vertel je graag meer over deze update, hoe je zelf een favicon kan toevoegen aan je WordPress-website en waarom dit dus zo belangrijk is geworden. Lees je mee?

Wat is een favicon?

Een favicon kan je ook wel een site-icon of pagina-icoon noemen en is simpelweg een pictogram van jouw website, merk of bedrijf. Naast het feit, dat de favicons tegenwoordig in de mobiele zoekresultaten worden weergegeven, kan het jouw website net die ‘finishing touch’ geven. Het is daarnaast een stukje branding van jouw bedrijf, merk, product, dienst enzovoorts. Ik hoor je al denken: “Kan je dan ook meerdere icoontjes per website instellen?” Nee, het is niet mogelijk om meer dan één site-icon per website te gebruiken.

Favicon-tabblad-maatwerk-online

Hoe ziet zo’n pagina-icoon er nu uit?

De favicon wordt onder andere weergegeven in de browserbalk, in de mobiele zoekresultaten en ook als iemand jouw website als favoriet opslaat. In onderstaand voorbeeld zie je hoe de mobiele zoekresultaten voor en na de update eruitzagen. Al met al zorgt een favicon met jouw logo/icoon voor herkenning bij de zoeker of (potentiële) klant.

mobiele-google-resultaten-favicon-weergave-oud-vs-nieuw

Ga nu zelf aan de slag: Maak jouw pagina-icoon

Om een Favicon aan jouw WordPress-website toe te voegen heb je allereerst een afbeelding of logo nodig. Die herkenning, waar ik het zojuist over had, is erg belangrijk voor jouw website en branding. Weeg dus alle opties af maar wees gerust, een favicon kan je altijd weer wijzigen. Alleen zou ik je aanraden niet te vaak van pagina-icoon te wisselen omdat er op een gegeven moment geen duidelijke herkenning meer is voor de bezoeker.

Wat heb je nodig om zelf een favicon te maken en op WordPress in te stellen?

  • Photoshop of Microsoft Paint
  • WordPress 4.3 (minimale vereisten)
  • Inloggegevens van jouw WordPress omgeving

Kan je ze allemaal afvinken? Tijd om aan de slag te gaan! Het aanbevolen formaat van een favicon is 512 x 512 pixels. Je kan via Photoshop dus zelf een logo ontwerpen of ervoor zorgen dat een bestaande afbeeldingen voldoet aan de minimale pixels eisen. Als dit inmiddels gelukt is raden we je aan de afbeelding op te slaan als JPG, PNG of GIF-bestand.

Tip:
Vergeet niet om de achtergrond transparant te maken zodat jouw favicon er nog professioneler uitziet. Hiervoor heb je Photoshop en een PNG-bestand nodig. Waarom PNG? Omdat je met dit bestand de achtergrond wel transparant kunt maken. Een nadeel aan een JPG-bestand is dat het een witte achtergrond heeft en er minder scherp uitziet.

Heb ik dan geen .ico bestand nodig?

Als je op internet zoekt hoe je een favicon moet instellen, kom je nog steeds artikelen tegen waarin wordt gesproken over een .ico bestand. Vroeger moest je jouw pagina-icoon inderdaad opslaan als .ico bestand in 16 x16 pixels. Maar tegenwoordig is dit niet meer nodig.

Favicon instellen op WordPress

Als het goed is heb je inmiddels een JPG, PNG of GIF-bestand van minimaal 512 x 512 pixels met jouw gewenste beeldmerk. Dan is het nu tijd om jouw WordPress-website in te duiken. Als je eenmaal een keer een favicon in een WorPress-website hebt toegevoegd, is het voortaan een fluitje van een cent. Dat beloof ik ?

Ga naar Weergave en klik dan op Customizer of klik direct op Customizer als je de homepage bekijkt. Vervolgens kom je terecht in de WordPress Customizer, klik dan nu op Site-Identiteit. In ons geval is Site-Identiteit herbenoemd als Voorkomen. In dit tabblad kan je de site-titel, ondertitel en logo aanpassen, maar uiteraard ook jouw zojuist aangemaakte favicon. Kies vervolgens voor wijzig afbeelding en upload jouw logo. Klik vervolgens bovenin op Publiceren en je bent klaar! Je hebt nu zelf een Favicon in WordPress ingesteld.

favicon-in-wordpress-instellen-maatwerk-online

Problemen met instellen?

Hopelijk is het ook je nu gelukt om zelf een logo op WordPress-website in te stellen. Heb je toch problemen ervaren of kom je er niet uit? Neem dan gerust contact met mij op en ik zal je erdoorheen loodsen.