Wat is een favicon en hoe kun je er een maken voor je website?
Bij het publiceren van een nieuw gemaakte website, zien te veel mensen een kleine finishing touch over het hoofd die een groot verschil kan maken - de favicon. Deze kleine toevoegingen aan je website laten een indruk achter die veel groter is dan het werkelijke formaat, onderschat de kracht en het belang niet. Hier is alles wat je moet weten over favicons en hoe je ze kunt maken:
Wat is een favicon
Een favicon is een klein icoontje van 16x16 pixels dat in webbrowsers wordt gebruikt om een website of pagina weer te geven. Een favicon, afkorting van ‘favoriete icoon’, wordt meestal weergegeven op het tabblad boven in een webbrowser, maar ze is ook te vinden in de bladwijzerbalk, geschiedenis en meer delen van je browser. In sommige gevallen, zoals in Google Chrome, verschijnen ze zelfs op de startpagina van je browser. Met andere woorden, de favicon dient als de icoon van je website of als een visueel teken waarmee je je website op internet kunt identificeren.
Waarom favicons belangrijk zijn
Ondanks hun minuscule formaat zijn favicons van groot belang voor elke website, waardoor de gebruikerservaring, branding en professionaliteit worden verbeterd:
Gebruikerservaring: favicons fungeren als gedenkwaardige visuele aanwijzingen voor je website en verbeteren de gebruikerservaring. Ze helpen gebruikers het tabblad van je website gemakkelijk te vinden in hun browser en in verschillende applicaties, zoals de bladwijzerbalk, waardoor het gemakkelijker wordt om steeds opnieuw naar de site terug te keren.
Branding: voor een echt samenhangend merk is het belangrijk om zelfs de kleinste details niet over het hoofd te zien. Favicons dragen bij aan de branding en zichtbaarheid van je website, waardoor de stijl en taal buiten de website, en in de webbrowser wordt uitgebreid.
Professionaliteit: favicons dragen bij aan de legitimiteit en professionaliteit van je website, waardoor deze er scherp en doordacht uitziet.
Hoe maak je een favicon
Om een favicon te maken, kun je overwegen om een professionele ontwerper in te huren (als je al met iemand werkt, kun je het maken van een favicon in je overeenkomst opnemen). Je kunt ook zelf een favicon maken met een ontwerpprogramma naar keuze of met verschillende online tools. Een van deze aanbevolen tools is de Wix Logo Maker, waarmee je een professionele en gepersonaliseerde favicon kunt maken die het beste bij je stijl en behoeften past.
Grootte: de optimale grootte voor het maken van een favicon is 16x16 pixels, de grootte waarin ze het meest worden weergegeven. Ze kunnen echter soms ook in grotere afmetingen verschijnen (zoals 32x32 pixels).
Bestand: het voorkeursbestand voor een favicon is JPEG of PNG.
Transparantie: als je ontwerp een transparante achtergrond heeft, zorg er dan voor dat je je bestand opslaat als PNG en met de transparantie-instelling ingeschakeld.
Tips voor het ontwerpen van een favicon
Het ontwerpen van zoiets piepklein lijkt misschien een eitje. Het feit dat websitepictogrammen zo klein zijn, betekent echter dat je extra nauwkeurig moet zijn, omdat er geen ruimte is voor fouten. Hier zijn een paar tips om een favicon te maken die het beste bij je merk en website past:
Eenvoud: het kleine formaat van favicons vereist dat je ontwerp nauwkeurig is. Ga niet te veel in op details, zoals lijntjes, textuur of schaduw. Streef in plaats daarvan naar een krachtig, duidelijk en eenvoudig pictogram dat direct herkenbaar is.
De Wix website van kunstenaar en illustrator Adam J. Kurtz is een goed voorbeeld van een eenvoudig favicon ontwerp, met zijn opvallende gele ster. Een ander voorbeeld is de favicon van sieradenontwerpster en Wix gebruiker Ilaria Bonardi, die bestaat uit drie simpele puntjes.
Merkidentiteit: een favicon moet de geest van je website en merk weerspiegelen, en dezelfde visuele taal en kleurenschema behouden zoals de rest van je website.
Voor de Wix website van modemerk Sorry is de X-vormige favicon een voortzetting van dezelfde gewaagde, zwart-wit beeldtaal als hun kleding en logo. Op dezelfde manier combineert eBay's favicon de kleuren van het merk met een klein boodschappentas icoontje, waardoor de geest van de site perfect wordt weerspiegeld.
Weinig tot geen tekst: als je typografie (tekst) in je favicon wilt opnemen, zoals je merknaam, gebruik dan maximaal 3 tekens. Initialen of afkortingen zijn vaak een goede oplossingen om tekst in te korten.
De Wix website van de non-profit organisatie Arte, gebruikt de hoofdletter A van hun logo als favicon, met een toegevoegde neon groene achtergrond om de aandacht te trekken. Als alternatief heeft de favicon van Red Fern Brooklyn, helemaal geen tekst. In plaats daarvan hebben ze alleen een icoon van een blad gebruikt, waardoor maximale leesbaarheid wordt bereikt.
Het gebruik van logo's: hoewel sommige logo's er op hun best uitzien, zelfs in faviconformaat, zijn de meeste nauwelijks leesbaar wanneer ze worden verkleind. Als je je logo als favicon wilt gebruiken, zijn er waarschijnlijk enkele aanpassingen nodig. Het weglaten van de slogan of het gebruik van slechts één initiaal zijn enkele van de manieren om logo's in kleine formaten te laten werken.
Merk op dat het favicon van Google enigszins verschilt van het logo, terwijl het dezelfde ontwerpwaarden belichaamt. De favicon toont alleen de bekende G-initiaal, terwijl alle vier de merkkleuren naadloos in die ene letter zijn verwerkt. Een andere benadering werd gekozen door illustrator en Wix gebruiker Charlotte Mei, die de initialen van haar handgetekende logo als haar favicon gebruikt.
Kleur: houd er rekening mee dat de favicon op verschillende gekleurde achtergronden wordt weergegeven, afhankelijk van de gebruikte context en browser. Zorg er daarom voor dat je je favicon test op een grijze, witte en zwarte achtergrond voordat je het ontwerp afrondt.
Hoe kun je een favicon aan je Wix site toevoegen
Wix sites bevatten een standaard favicon, maar je kunt deze aanpassen door te upgraden naar een premiumpakket en je site te koppelen aan een domein.
Je kunt je favicon gemakkelijk wijzigen op je Wix site:
Ga via je dashboard naar 'Instellingen'.
Klik op ‘Algemeen’ en zoek naar Favicon in het overzicht.
Klik op ‘Afbeelding uploaden’ en selecteer een bestaande afbeelding of klik op ‘Media uploaden’ om een afbeelding vanaf je computer te uploaden.
Klik op ‘Toevoegen aan pagina’. Je ziet nu een voorbeeld van hoe je favicon eruit zou zien op je browsertabblad.
Klik op ‘Opslaan’ en ta-da! Je website heeft nu een favicon. Het verschijnt op het tabblad van je website zodra je op publiceren klikt.
Team Wix