Wanneer we het over handige tools hebben dan mag een gratis online favicon generator niet ontbreken, en zeker niet degene waar we het nu over gaan hebben. Vroeger was een favicon vrij simpel, gewoon een leuk logootje maken, het plaatje opslaan als favicon.ico en uploaden naar de root (hoofdmap) van je website. Tegenwoordig is het wel even anders. Met alle verschillende apparaten zoals mobiel, tablet en laptop/desktop en dan ook nog de verschillende besturingssystemen die op die apparaten draaien word het een hele klus om de juiste favicons te maken. Dat is nu verleden tijd want nu is er een serieuze Online Favicon Generator die ook nog eens helemaal gratis is. (Nee, ik word niet gesponsord, het is gewoon een geweldige generator :-)
Favicons voor je website maken en plaatsen
Ten eerste zorg je dat je een afbeelding hebt van minimaal 70 x 70 pixels en voor een optimaal resultaat op zijn minst 260 x 260 pixels. Vervolgens ga je naar RealFaviconGenerator, je kunt hier je favicons maken maar ook je huidige favicon testen. Voor nu gaan we favicons maken. Je zult een pagina zien met een knop waar je je afbeelding kunt uploaden alsook een knop waarmee je de favicon generator demo kunt proberen. Klik hier op de blauwe knop 'Select your Favicon image'
Op de volgende pagina die je te zien krijgt gaat het echte werk beginnen. Weet je niet echt wat voor opties je moet gebruiken? Geen probleem, speel met de verschillende kleuren en stijlen voor de verschillende apparaten en besturingssystemen. Je krijgt een live voorbeeld te zien van de veranderingen die je aanbrengt. Aan het eind kun je de verschillende favicon afbeeldingen inclusief de benodigde code genereren. Zorg ervoor dat je onderaan de pagina met opties ervoor kiest om een versienummer aan de code toe te voegen zoals hieronder op de afbeelding te zien is. Doe je dit namelijk niet en je veranderd je favicon dan zal de oude favicon in de cache van de browser achterblijven en krijg je dus niet je nieuwe favicon te zien. Door het gebruik van een versienummer vertel je de browser dat er een nieuwe favicon word gebruikt. Zelf gebruik ik gewoon 1, 2, 3... enz maar je kunt hier zelf beslissen wat je wilt. Je kunt ook de reeks getallen en letters gebruiken die er standaard gegenereerd word.
Na het genereren van de afbeeldingen en bijbehorende code kun je het complete pakket downloaden via de knop 'Favicon package. De bestanden die hierin staan upload je naar de root van je website of de map die je aangegeven hebt op de opties pagina.
De code die je op de pagina ziet staan voeg je in op iedere pagina van je website waar je de favicons wilt gebruiken. De code zet je bovenin de HTML code van je website tussen de <head> en </head> tags van de betreffende pagina's.
Heb je dit allemaal gedaan dan kun je je nieuwe favicons testen met de Favicon Checker.
