Websites met stijl
40. Favicons
De hoofdstukken na hoofdstuk 34 bevatten nieuwe artikelen over allerlei onderwerpen. Dit is het zesde en laatste artikel.
In dit hoofdstuk
Wat zijn favicons?
In de afbeelding rechts zie je het tabblad van de webbrowser met de website websites met stijl.
Links van het webadres staat een klein plaatje, het zogenaamde favicon. Verreweg de meeste websites hebben zo'n favicon. Het is als het ware het logo van je website.
Een favicon geeft je website een meer professionele look.
In 1999 werd het favicon geïntroduceerd als een icoontje van 16x16 pixels in het ico formaat. Het werd onder de naam favicon.ico opgeslagen in de hoofdmap van de website. Browsers gaven het dan automatisch weer.
In de loop van de jaren werd het ook mogelijk om andere bestandsformaten te gebruiken, zoals jpg en png. Ook konden andere afmetingen worden gebruikt (zoals 32x32 pixels en 192x192 pixels voor tegels in windows 10). En de naam hoeft meer favicon te zijn (al is die naam nog steeds heel gebruikelijk). Tenslotte mag een favicon nu ook in een andere map worden geplaatst, bv. de map met afbeeldingen. Als een favicon niet onder de naam favicon.ico in de hoofdmap gezet wordt, moeten naam en plaats van het favicon wel in de html code worden aangegeven.
Een favicon maken
Uit het bovenstaande blijkt dat er veel mogelijkheden zijn. We zullen een favicon in het png bestandsformaat maken, een veelgebruikte en gemakkelijke methode.
Stap 1 - Ontwerp
Het maken van een favicon begint met het maken of opzoeken van een plaatje dat je als logo wilt gebruiken. Misschien is die eerste stap wel de moeilijkste.
Als je al een logo hebt is dat mooi, maar anders maak of zoek je een plaatje dat daarvoor geschikt is.
Het moet een eenvoudig plaatje zijn zonder veel details - het favicon wordt immers maar 16x16 puntjes groot - maar toch moet het herkenbaar en uitnodigend zijn.
In de figuur hieronder zie je waarom: afbeelding 1 is als favicon nog heel herkenbaar, afbeelding 2 nauwelijks.
Je favicon moet vierkant zijn, rond mag ook. Maar lengte en breedte moeten liefst even groot zijn. Maak het plaatje niet te klein, ca 300x300 pixels is goed.
Sla het ontwerp bij voorkeur op als png bestand, daarin zijn lijnen en randen scherper dan bij jpg.
Stap 2 - Het favicon plaatsen
Open het ontwerp weer, maak de afmetingen 16x16 pixels (geen cm!) en sla het op onder de naam favicon.png in de hoofdmap van je website.
Stap 3 - De verwijzing aanbrengen
Open het bestand index.html van je website en plaats de regel hieronder in de head direct onder de het title element.
Als je het favicon in de map img hebt geplaatst wordt de verwijzing:
En als je het favicon een andere naam hebt gegeven moet je ook de naam favicon.png aanpassen in de verwijzing.
Open het bestand index.html en controleer of het favicon zichtbaar is. (Is het niet zichtbaar? Dan is er meestal een foutje in de verwijzing of het favicon staat in de verkeerde map).
Niet vergeten:
Herhaal stap 3 voor elke pagina van je website. Doe je dat niet dan is alleen de startpagina van je website voorzien van een favicon.
Opmerking:
Het verdient dus aanbeveling de link naar je favicon op te nemen in het sjabloon van een lege pagina (zie hoofdstuk 3).