Een ikoon maken voor je site
In dit artikel lees je hoe je een ikoon (ook wel favicon genoemd) kunt maken voor je site. Ikonen worden ondersteund door de bekende browsers Internet Explorer 5+, Mozilla Firefox, Safari, Google Chrome en Opera 7.0+. De grote, populaire browsers ondersteunen dus allemaal favicons.
In moderne browsers worden favicons getoond in de adresbalk en tabbladen na het laden van de pagina. Ook staan ze in de lijst met favorieten van je browser wanneer je een website bookmarkt. Door favicons te gebruiken kunnen bezoekers in één oogopslag zien welke website bezocht wordt.
In oude versies van Internet Explorer werd het ikoon pas zichtbaar in de adresbalk en in het lijstje met favorieten als de bezoeker de pagina aan zijn favorieten had toegevoegd. Vanaf IE 7 is dat niet meer het geval en wordt het ikoon direct getoond na het laden van de pagina.
Als je trouwens voorbeelden wilt zien van favicons op een site, dan kun je even naar een grote site gaan, bijvoorbeeld de zoekmachine Google. Het ikoon van de site is na het laden van de pagina te zien in de adresbalk van de browser en in de tab van de browser.
Goed, nu gaan we over tot het maken van een ikoon voor je eigen site.
Het formaat
Het ikoon dat je gaat maken moet een formaat hebben van 16x16 pixels of 32x32 pixels. Verder moet het ikoonbestand één van deze drie soorten bestanden zijn:
- .ico
- .gif
- .png
In de uitleg op deze pagina gaan we er vanuit dat je gebruik maakt van de .ico extensie en je het ikoon de standaardnaam favicon.ico geeft. Dit heeft namelijk als voordeel dat het ikoon automatisch herkend zal worden door alle grote browsers, zonder dat het toevoegen van HTML code verder nodig is.
Waarmee?
De ikonen kun je maken met een icon editor of met een online generator. Op Dynamic Drive kun je een hele mooie FavIcon Generator vinden. Hiermee kun je met een druk op de knop een plaatje omtoveren tot een favicon. Een andere online dienst is te vinden op Favicon.co.uk.
Als je zelf een favicon wilt ontwerpen dan kun je een editor gebruiken. Er zijn verschillende editors te koop, zoals Microangelo. Ook zijn er vaak wel evaluatieversies gratis te downloaden. Deze programma's mag je voor een bepaalde tijd gratis gebruiken. Dit zijn een paar bekende programma's met evaluatieversies:
Ook zijn er een paar gratis programma's te krijgen. Deze heb ik kunnen vinden:
Als je al een grafisch programma op je computer hebt staan dan kun je het ikoon misschien ook daarmee maken. Het programma moet dan wel het .ico bestandsformaat ondersteunen, want de favicon moet opgeslagen worden als .ico bestand, wil het herkend worden als ikoon in de meeste browsers.
Als je klaar bent met het maken van je ikoon dan sla je hem op als favicon.ico .
Naast het laten genereren of zelf maken van een favicon kun je tenslotte ook nog een ikoon downloaden van een site en deze te gebruiken. Er zijn een paar sites die gratis ikonen aanbieden. De mooiste favicons die ik heb kunnen vinden zijn van de site Gort's Icons.
Gort's Icons heeft verschillende sets ikonen, waarbij iedere set bestaat uit zo'n twintig prachtige ikonen. Als je een van deze ikonen gebruikt moet je het favicon-bestand ook even opslaan als favicon.ico.
Ikoon uploaden
Nu moet je het bestand favicon.ico nog uploaden naar je webserver. Plaats het gewoon in de rootdirectory (de hoofddirectory van je site).
Tenslotte moet je nog naar het ikoon verwijzen in de head sectie van alle pagina's op je site. Dat verwijzen doe je met behulp van de link-tag. Normaal gesproken zou het favicon.ico bestand overigens automatisch opgepikt moeten worden door de browsers, maar het is een goed gebruik om toch naar het ikoon te verwijzen met het rel attribuut.
Voorbeeld:
<head>
<title>De titel van de pagina.</title>
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.jedomeinnaam.nl/favicon.ico" />
</head>
In het verleden werd voor het rel attribuut "shortcut icon" gebruikt en "image/x-icon" voor het type attribuut. Nu is dat niet meer correct, omdat het .ico bestandsformaat in 2003 door Microsoft is geregistreerd bij de Internet Assigned Numbers Authority (IANA). Vanaf dat moment is de bovenstaande code de juiste voor het .ico MIME type.
Code voor andere bestandsformaten
Als je in plaats van het .ico bestand gekozen hebt voor een ikoon in het formaat .gif of .png dan wordt de code die je in het head gedeelte van de pagina plakt als volgt:
Code voor .gif favicon:
<head>
<title>De titel van de pagina.</title>
<link rel="icon" type="image/gif" href="http://www.jedomeinnaam.nl/favicon.gif" />
</head>
Code voor .png favicon:
<head>
<title>De titel van de pagina.</title>
<link rel="icon" type="image/png" href="http://www.jedomeinnaam.nl/favicon.png" />
</head>
Tot slot
Let er goed op dat je verwijst naar de juiste locatie van het ikoon op de webserver! Als je ikoon niet verschijnt na het gebruik van één van de codes op deze pagina dan ligt dit waarschijnlijk aan een foute verwijzing naar het favicon bestand. Ook het gebruik van een sterk verouderde browser kan problemen opleveren bij het tonen van favicons.
Lees ook:
Wat vond je van dit artikel?
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
