We leggen in deze handleiding uit hoe je zelf de branding van je website kan beïnvloeden. Het is voor elke website belangrijk, maar vooral de WordPress favicon mag je natuurlijk niet missen.
Inhoudsopgave
Waarom is een Favicon belangrijk?
Als je op het net surft, zie je kleine icoontjes naast de naam van de website. Ze zijn vrij klein, maar ze zijn wel belangrijk en zorgen voor een snelle herkenning van je website.
Ze worden favicons genoemd, en ze zijn belangrijk. Als je een blog, een winkel, een site, of iets anders op het internet hebt, heb je er altijd een nodig!
Een favicon (afkorting van “favorites icon”) is het kleine pictogram dat naast het adres van een website in je browser verschijnt (in de locatiebalk). Het is een afbeelding dat aan de HTML code van een website wordt toegevoegd, en er zijn een aantal redenen waarom je er een wil hebben:
- De favicon verschijnt naast het adres van je website in een gebruikers browser; dus als je een favicon hebt, ziet een gebruiker, wanneer hij het adres van je website in zijn browser ziet, ook je favicon. Dit is handig voor branding doeleinden,
- Wanneer een bezoeker de website aan de favorieten toevoegt wordt deze afbeelding ook zichtbaar. Vooral op een mobiele telefoon is dat goed te zien, maar ook op een desktop of tablet zal je website herkenbaar zijn,
- Met behulp van een Favicon is je bedrijf meer zichtbaar op internet, het is een belangrijk onderdeel van je branding.
Wat voor soorten favicons zijn er?
Favicons bestaan er in een aantal verschillende formaten. De originele standaard formaten voor een Favicon zijn: 16×16 32×32 48×48 65×65 128×128 pixels, het zijn dus altijd vierkante afbeeldingen.
Bij WordPress en veel andere CMS-en wordt een afmeting van groter dan 512 x 512 geadviseerd, omdat deze dan ook bij website bezoekers met een groot beeldscherm goed getoond zal worden.
De meeste browsers laten de Favicon afbeelding goed zien wanneer het bestandsformaat PNG, GIF, of JPG is. Alleen de oudere Microsoft browsers niet, dus daarom is het Microsoft ICO formaat het meest geschikt, want deze werkt in alle browsers.
Hoe ziet een WordPress Favicon eruit?
Een Favicon op een HTML website of een ander platform ziet er in principe hetzelfde uit. Afhankelijk van de grootte kan de kwaliteit wel verschillen. Hier een paar voorbeelden hoe je het Favicon pictogram terug kan zien. Hier een voorbeeld in de Chrome browser:
Verder kan je in je browser ook bij je favorieten of geschiedenis de pictogrammen tegenkomen:
Hoe maak je een Favicon?
Een Favicon kan je maken met een beeldbewerkingsprogramma, of je kan een bestaande afbeelding gebruiken zoals je logo. bedenk wel dat wanneer je logo rechthoekig is, de Favicon dan daar een vierkante uitsnijding van zal zijn. Kortom; je zal dan mogelijk een deel van de afbeelding “kwijt” zijn.
Je kan dit van te voren doen met een online Favicon generator, zoals bijvoorbeeld:
Hoe plaats je een Favicon op een HTML website?
Stap 1: maak je afbeelding
Je kan zelf een favicon afbeelding ontwerpen met een editor zoals Photoshop, Microsoft Paint of een gratis alternatief zoals GIMP maken. Vaak gebruiken bedrijven gewoon hun bedrijfslogo, omdat dit werk scheelt en een consistente merkidentiteit ondersteunt.
Zorg ervoor dat je een vierkante afbeelding hebt, of dat er een vierkante afbeelding van gemaakt kan worden.
Stap 2: converteer de afbeelding
Als u eenmaal tevreden bent met de afbeelding, moet deze bij voorkeur worden opgeslagen als favicon.ico. Dit is het aanbevolen formaat dat door de meeste browsers wordt ondersteund en bij sommige systemen ook automatisch gedetecteerd..
Om je bestand naar het .ico-formaat te converteren kan je eventueel een van de eerder genoemde online tools gebruiken. Zorg ervoor dat de bestandsnaam favicon is, dus wanneer je de uitgangen van bestandsformaten kan zien wordt de naam: favicon.ico.
Stap 3: upload de afbeelding naar je website
Het .ico-bestand moet worden geüpload naar de hoofdmap van je website. Dan zou de afbeelding zichtbaar moeten zijn als je naar www.jouwwebsite.nl/favicon.ico gaat.
Stap 4: voeg eenvoudige HTML-code toe
Soms moet je bij oudere browsers helpen om de favicon-afbeelding te vinden. Dat kun je doen door de HTML-pagina van je website te bewerken.
De meeste moderne browsers zullen het favicon-bestand vinden zonder dat je code hoeft toe te voegen, maar om ervoor te zorgen dat alle browsers het correct weergeven, voeg je een code toe aan de webpagina’s binnen de <head> tags van de pagina’s op je website:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />Technisch gezien wordt er op deze manier vanuit de pagina’s op je website gerefereerd naar het afbeeldingsbestand van de favicons, favicon.
Gelukkig kan je bij de meeste CMS-systemen, zoals WordPress dit meestal ook op een andere manier doen. Via een menu kan je dan gewoon de afbeelding kiezen en het systeem zorgt voor de rest.
Hoe stel je een nieuwe WordPress Favicon in?
Gelukkig heb je bij WordPress websites een veel makkelijker manier om je favicon te plaatsen. Hiervoor ga je naar de Customizer.
Stap 1:
De Customizer kan je in het beheergedeelte van WordPress vinden in het menu aan de linkerkant onder het kopje Weergave:
Of anders aan de bezoekerskant in de zwarte balk bovenin. Om deze balk te zien moet je wel ook ingelogd zijn:
Stap 2:
Na het klikken opent het Customizer menu zich nu links naast de inhoud van je website:
Stap 3:
Dan klik je op het onderdeel Site-identiteit
Wanneer je dit onderdeel niet direct kan terugvinden kan het in een van de andere “mappen” zitten, zoals: Globaal, Algemeen, Site-wide of een andere naam(kan per thema verschillen).
Stap 4:
Het menu wat nu openklapt ziet er meestal zo uit als hieronder, maar kan er ook verschillend uitzien. Dit komt doordat sommige thema’s hier nog dingen aan toevoegen of de volgorde veranderen.
Wanneer je het onderdeel Site Pictogram(Favicon) hebt gevonden kan je deze nu veranderen of verwijderen door de betreffende buttons aan te klikken. Na de optie “verwijderen” kan je natuurlijk altijd weer een nieuwe instellen, dus geen zorgen.
Stap 5:
Je zal na het veranderen nu een voorbeeld zien in het tabblad.
Wanneer je hier blij mee bent kan je op de blauwe knop “Publiceren” helemaal bovenin klikken. Wanneer die grijs is heb je dat al gedaan, of heb je nog niks veranderd.
Wanneer je niet tevreden bent met het resultaat kan je op de “X” klikken, dan krijg je een pop-up venster die vraagt of je wil stoppen zonder op te slaan, dus heb je nog de keuze om alsnog op te slaan of inderdaad alles te laten zoals het was(er veranderd dan niets).
Veranderen of verwijderen van je WordPress Favicon?
Het veranderen of verwijderen van de WordPress Favicon gaat op dezelfde manier als het instellen ervan, dus ook via de Customizer. Volg hiervoor dezelfde stappen als bij het instellen van een nieuwe Favicon.
Nawoord
Je hebt in deze handleiding geleerd wat een Favicon is en hoe je deze kan maken. We hebben verder een aantal handige tools met je gedeeld zodat je eventueel je logo of een andere bestaande afbeelding kan omzetten naar een Favicon. Natuurlijk komt dit onderwerp ook aan de orde in onze WordPress cursus, maar wanneer je al een WordPress website hebt kan je de stappen hierboven volgen en zal je merken dat dit het zo ingewikkeld is. Vragen en opmerkingen kan je hieronder kwijt, dan reageren we altijd snel.
Geef een reactie