Introductie
FavIcon is een afkorting voor favorietenpictogram. Favicons zijn populair als pictogrammen die naast websiteadressen op het favorieten- resp. bladwijzermenu van de browser worden getoond. Tegenwoordig worden favicons weergegeven op de browser adresregel en browsertabs, evenals bij bladwijzers en Internet afkortingen. Een favicon is een pictogram verbonden aan een web-pagina of een HTML-document.
Hoewel het niet noodzakelijk is om een favicon aan een Web-pagina of een website toe te voegen, kan het associëren van een pictogram met een websiteadres het voor bezoekers gemakkelijker maken om de plaats te herinneren. In het geval van zaken en promotieplaatsen, kunnen favicons worden gebruikt om de visualisatie van bedrijfs- en sitelogo's te verbeteren.
Een favicon maken
Aangezien een favicon een Windows pictogrambestand is, kan elke toepassing die in staat is om bitmaps toe te passen in het ICO-formaat (*.ico) dit gebruiken om een favicon te maken.
Nochtans, ondersteunen niet alle beeldeditors ico-bestanden of vereisen een add-on om een ico-formaat op te slaan. Hoewel sommige browsers ook de afbeeldingen van GIF en PNG als favicons ondersteunen kunnen alleen favicons in ico-formaat gemaakt worden voor een zo breed mogelijke compatabiliteit bij webbrowsers.
Laten we beginnen met het maken van een favicon. Methode nummer 1 is gewoonlijk de snelste manier om een favicon tot stand te brengen. De handmatige methode is methode nummer 2 en vereist extra software.
Methode 1: Automatisch produceren van een favicon
FavIcon from Pics (=Favicon vanuit afbeeldingen), een gratis service beschikbaar gesteld door de HTML-Kit site, kan worden gebruikt voor een kant-en-klare favicon.
- Kies een afbeelding, een logo of een andere grafische voorstelling als bronplaatje bij "Source Image".
- Klik daarna op Generate Favicon.ico.
- Dowload het gegenereerd bestand. Het bevat de favicon.ico en een klein hulpbestand.
Methode 2: Handmatig gemaakte favicon
Als je er de voorkeur aan geeft om een favicon met de hand te maken en je afbeeldingen-editor het ICO-formaat ondersteunt dan kan je een 16 bij 16 pixels bitmap maken en opslaan als favicon.ico in ICO-formaat. Voor het beste resultaat controleer je of het favicon.ico bestand voldoet aan de volgende specificaties:
- Breedte en hoogte: 16 bij 16 pixels
- Kleuren: 256 of minder kleuren
- Bestandsformaatt: ICO (*.ico)
- Sla op met als bestandsnaam: favicon.ico
Installeren van een favicon
Wanneer je favicon hebt gemaakt dan kan dat naar een of meerdere webpagina's worden toegewezen.
Om het simpel te houden en ook om het terugwerkend compatibel te houden met oudere browsers gebruik je favicon.ico als naam voor je favicon bestand.
Er zijn verschillende manieren om een favicon toe te voegen aan een website, afhankelijk hoe de site wordt gehost en hoe het wordt geupdated. Alvorens een van de volgende methoden toe te passen upload je eerst je favicon.ico naar je website. Het zou in de root of in eerste map van je site moeten staan.
Methode 1: Voeg het favicon-label toe aan de HEAD-sectie
Als je toegang hebt tot de html-bestanden op je website is dit de aanbevolen manier om een favicon toe te voegen aan je webpagina's.
Open de index-pagina of de hoofdpagina van je site in HTML-Kit Tools. Je kan ook een teksteditor als kladblok (Notepad) o.i.d gebruiken. De index-pagina heeft gebruikelijk als naam index.html of default.html. Verder wordt in dit document de naam index.html gebruikt.
Als index.html eenmaal geopend is in de editor zoek dan naar: <head>
(genaamd het <head>-startlabel), gepositioneerd aan het begin van de pagina. Een aantal regels daaronder staat het label,
</head>
(genaamd het </head>-eindlabel).
Plak de volgende regel (genaamd het favicon-linklabel) onder <head> maar voor </head>,
<link rel="shortcut icon" href="favicon.ico">
Als je FavIcon from Pics hebt gebruikt lees dan het Read.txt bestand dat bijgesloten is in de download van het favicon-bestand. Doe wat er in deze ReadMe.txt staat in plaats van dat wat hierboven beschreven is.
Upload tenslotte het index.html bestand naar je site.
Methode 2: Upload favicon.ico naar je web site's root
Als je geen toegang tot HTML-bestanden op je website hebt of als je verkiest ze niet te wijzigen, kan je de favicon.ico eenvoudig naar de root/hoofdmap uploaden. Deze methode geeft niet de beste resultaten en zou slechts moeten worden gebruikt als de methode 1 niet kan worden gebruikt.
Methode 3: Check de webhosting documentatie
Als je geen toegang tot HTML-bestanden op je website en niet in staat bent om de favicon.ico naar de root/hoofdmap kan uploaden, zal je je op andere methodes moeten baseren die door de webhost worden verstrekt. Als je het hosting account met een controlepaneel komt, kijk dan of er een optie is om een favicon toe te wijzen. Controleer ook de webhosting documentatie op extra informatie. Als er geen opties zijn om favicons te uploaden, dan kan je de contact opnemen met de webhost voor hulp. Tot slot herlaad je de website in een browser om de geïnstalleerde favicon te bekijken.
