Tijdelijke deal - Bespaar tot 80 %

+ GRATIS domein voor 1 jaar

Deal eindigt over:

04 :

13 :

24 :

13

Zyro blog

Alle onderwerpen
Design E-commerce blog Inspiratie Marketing Tips voor kleine bedrijven Web essentials Zakelijke ideeën

Hoe Maak je een Favicon

Favicons laptop close-up

Een klein detail dat ervoor zorgt dat je bedrijf opvalt bij je klanten, je mag de favicon zeker niet vergeten wanneer je een merk opbouwt.

Het maken van een favicon bijna geen inspanning.

Dus hoewel je je website zonder een website kunt lanceren, is er echt geen reden om geen favicon op je branding to-do-lijst op te nemen.

Dus, wat is een favicon?

Favicons zijn de kleine pictogrammen die worden weergegeven op tabbladen en in favorieten- of bladwijzerlijsten in browsers zoals Chrome, Mozilla en Safari.

Het woord ‘favicon’ is een verkorte versie van ‘favoriet pictogram’, maar kan ook andere namen hebben:

  • Snelkoppeling icoon
  • Website icoon
  • Bladwijzer icoon

Ze betekenen echter allemaal hetzelfde.

Favicons, die al in 1999 bestonden, werden geïntroduceerd bij internetgebruikers met de lancering van Internet Explorer 5.

Bedrijven gebruiken meestal een verkleinde versie van hun logo als een favicon, verkleind tot slechts 16×16 pixels.

Ze worden gebruikt als visuele kenmerken voor gebruikers, zodat ze makkelijk door meerdere websites kunnen bladeren.

Stel dat je op zoek bent naar nieuwe kleding. Stel je voor dat de dozijn tabbladen die je in je browser hebt geopend een winkelcentrum vertegenwoordigen.

Wat je kunt zien, is een rij kleine logo’s, zodat je tijdens het vergelijken van artikelen en prijzen gemakkelijk tussen winkels kunt schakelen.

Natuurlijk staan er naast elke favicon meta titels die je zou kunnen lezen, maar wie heeft er tijd om dit constant te doen?

Hoe maak je een favicon

Drawing man, closeup

Nu je weet wat een favicon is, wil je er waarschijnlijk een voor je eigen website hebben.

Het is een van de makkelijkste manieren om je bedrijf onvergetelijk te maken voor internetgebruikers, en het zal je ook een professionele uitstraling geven.

En als je wilt weten hoe je een favicon maakt, dit is niet moeilijk.

Je hebt zelfs opties. Wil je het zelf doen, of laat je een favicon generator het werk voor je doen?

Omdat het een handige vaardigheid is om te leren, zullen we eerst de stappen die je moet nemen doorlopen om handmatig een favicon te maken voor je site.

1. Maak een afbeelding 

Als het gaat om het vinden van een geschikt pictogram voor een website, is het logo van je merk de meest voor de hand liggende keuze.

Maar je kunt elke afbeelding kiezen om je site te vertegenwoordigen. Zorg er wel voor dat:

  • Het is consistent met je branding. Gebruik dezelfde kleuren, typografie en vormgeving.
  • Het opvalt. Je klanten moeten de afbeelding kunnen onthouden.
  • Je geen ander pictogram of afbeelding kopieert. Zorg ervoor dat je niet verward wordt met een ander merk.

Je kunt een favicon afbeelding ontwerpen met een editor zoals Photoshop of met open-source software zoals Canva. Als budget geen probleem is, zou je zelfs een professionele ontwerper kunnen inhuren.

Er zijn een paar ontwerpelementen die volledig vermeden moeten worden als je wilt dat je favicon er gelikt, professioneel en onvergetelijk uitziet.

Zorg ervoor dat je deze onuitgesproken favicon regels niet vergeet:

  • Geen foto’s. Met het formaat dat je favicon moet hebben om in een browsertabblad te passen, zal geen enkele foto duidelijk genoeg zijn om er goed uit te zien of zelfs maar enigszins onvergetelijk.
  • Geen woorden. Je zou zeker een, twee of zelfs drie letters in je favicon kunnen opnemen, vooral als het deel uitmaakt van je logo, maar geen volledige woorden.
  • Geen marketing. Hoewel het geweldig is voor de branding consistentie en het imago, is een favicon niet de plek voor promotietools zoals ‘nieuw’ of ‘uitverkoop’ banners.

Gebruik het juiste formaat

Terwijl browsertabblad favicons worden weergeven in 16×16 pixels, kunnen ze ook op een site worden weergegeven met maximaal 32×32 of zelfs met 64×64 pixels.

Zorg ervoor dat je favicon er op elke site op zijn best uitziet, en maak het in een groter formaat. Dit kan namelijk altijd worden verkleind tot 16×16 pixels.

Gebruik de juiste opmaak

Hoewel voorheen favicons moesten worden opgeslagen als .ico, worden .png-bestanden nu ook geaccepteerd. Je kunt tools zoals faviconer.com gebruiken om bestanden naar het .ico-formaat te converteren.

Maar als je wilt dat je favicon wordt weergegeven als een Safari Pinned Tab-pictogram, moet je 

Gebruik de juiste stijl 

Hou er rekening mee dat favicons niet alleen op browsertabbladen en in bladwijzerlijsten worden weergegeven. Ze zullen ook zichtbaar zijn op draadloze apparaten en snelmenu’s.

Maak met dat in gedachten twee versies van je favicon afbeelding: een in effen kleur en een die transparant is. Op die manier heb je de garantie dat het er overal goed uit zal zien.

2. Upload de afbeelding op je website

Man Working on Laptop with Dog

Als je eenmaal een pictogram klaar hebt, is de volgende stap relatief eenvoudig.

Hernoem je .png- of .ico-afbeeldingsbestand als ‘favicon’ en upload het bestand naar de hoofdmap van je website.

Als je een .png-bestand hebt gemaakt, zul je waarschijnlijk meerdere bestanden moeten uploaden om aan alle grootte vereisten te voldoen.

Dit is waar het handig is om je favicon naar een .ico-indeling te converteren. Een .ico-bestand kan meer dan één pictogram bevatten, wat betekent dat je verschillende formaten als één pictogram naar je site kunnen worden geüpload.

3. Voeg een eenvoudige HTML-code toe 

De kans is groot dat je geen code hoeft toe te voegen om moderne browsers te helpen met het vinden van je favicon. De meesten zullen automatisch favicon.png of favicon.ico detecteren en deze instellen als je pictogram.

Dat gezegd hebbende, is het wel de moeite waard om een basiscode toe te voegen die ervoor zorgt dat je pictogram in elke browser zichtbaar is.

Je kunt een ‘link rel= shortcut icon’ HTML-code implementeren door het header.php-bestand te openen en dit onder of na de </head> tag in te typen:

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

Vergeet niet om het type bestandsextensie te wijzigen, afhankelijk van het formaat waarin je je favicon opgeslagen hebt

4. Maak het veelzijdig

Apple logo outdoor sign

E-commerce transacties vinden steeds vaker plaats via mobiele apparaten, dus als je je site kunt optimaliseren voor draadloos gebruik, zou je dit zeker moeten doen.

Hoewel niet iedereen ter wereld een Apple-apparaat heeft, zul je een Apple Touch pictogram moeten maken als je wilt dat je favicon goed werkt voor deze gebruikers.

Apple Touch pictogrammen vertegenwoordigen websites die zijn opgeslagen op het startscherm op een Apple-telefoon of -tablet.

Niet elke site heeft zijn favorieten geoptimaliseerd voor gebruik met Apple Touch. In deze gevallen, wanneer een gebruiker de site-URL opslaat op zijn startscherm, wordt een miniatuurversie van de bestemmingspagina weergegeven.

Maar als je er supergelikt uit wilt zien, kun je een pictogram bestand dat speciaal is gemaakt voor gebruik op een Apple Touch-apparaat maken en uploaden.

Het bestand moet worden aangeleverd in een .png formaat. Ook is het het beste om het pictogram te maken met een resolutie van maximaal 180×180 pixels, dit om ervoor te zorgen dat je pictogram er geweldig uitziet in elk gewenst formaat.

Ten slotte is het de moeite waard om een afzonderlijke HTML-code aan je website toe te voegen voor je Apple Touch pictogrammen. De codering ziet er ongeveer zo uit:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

Hoe je het nog makkelijker kunt maken

Hopelijk herinner je je het deel van dit artikel dat vermeldde dat er twee opties waren om favicons voor je eigen site te maken.

En misschien vraag je je af hoe de tweede optie eenvoudiger zou kunnen zijn dan de eerste – die was tenslotte vrij eenvoudig.

Gebruik een website bouwer.

Ontworpen om je leven op alle mogelijke manieren makkelijker te maken, in ieder geval als het gaat om het maken van een succesvolle site, wordt een fatsoenlijke website bouwer geleverd met een favicon generator.

Met Zyro’s favicon generator tool krijg je alle informatie die je nodig hebt om te weten hoe je een favicon maakt zonder de extra stappen van coderen, converteren en het vinden van een ontwerper.

Laten we de stappen doorlopen voor het maken en uploaden van een favicon met een generator tool, we zullen Zyro als voorbeeld gebruiken.

Favicon generator home screenshot Zyro

1. Kies een template

Je kunt kiezen uit een van Zyro’s templates of je kunt je eigen aangepaste afbeelding uploaden.

2. Aanpassen tot perfectie

Maak gebruik van de tools die tot je beschikking staan om de kleur, lay-out en tekst van de afbeelding of template te bewerken.

3. Download en go

Je bent klaar – het is tijd om je favicon te downloaden als .png- of .ico-bestand en om deze op je site te publiceren.

Als het gaat om het uploaden van je gegenereerde favicon naar je Zyro site, hoef je niets te coderen, niets te converteren en je doet het in slechts een paar klikken. 

Ga naar de Zyro editor. Als je meerdere websites hebt, kies dan de site waar je de favicon wilt uploaden.

Selecteer Algemene instellingen in het vervolgkeuzemenu, zoek je Favicon en bekijk de beschikbare opties.

Ga naar blader door bestanden om de favicon afbeelding te vinden die je met de tool van Zyro gegenereerd hebt, en dubbelklik om deze te uploaden.

Bekijk vervolgens het voorbeeld van hoe je pictogram in browsers weergegeven wordt.Als je er tevreden mee bent, klik je op wijzigingen opslaan en je favicon wordt geladen.

Geschreven door

Auteur avatar

Patty

Patty heeft veel kennis over website bouwers, en is een professional in e-commerce. Met haar kennis over e-commerce en digitale marketing heeft ze al veel bedrijven geholpen om online succesvol te worden. Wanneer Patty niet bezig is met haar werk houdt ze ervan om te dansen en om een goed boek te lezen.

Praat mee

je e-mailadres zal niet gepubliceerd worden. Alle velden zijn verplicht.