Terug naar beginpagina Homepage-Maken.nl
YourHosting Webhosting   

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:

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?

Hits: | Aantal Stemmen: | Gemiddelde:
 

Homepage-Maken Tip

Heb je genoeg van je hostingprovider?
Neem dan een host die wel de kwaliteit kan bieden die je zoekt. Breng je site bijvoorbeeld onder bij Argeweb. Deze host heeft een goede reputatie en de reacties van klanten zijn over het algemeen heel positief. Verder bieden ze een 'niet goed geld terug'-garantie van 30 dagen.

Argeweb Hosting biedt uitgebreide support door middel van uitgebreide FAQ's en documentatie, een online helpdesk en is ook telefonisch bereikbaar voor vragen.

Het Standaard hostingpakket is voor veel mensen het meest geschikte pakket. Je krijgt het volgende:

Al met al is dit een prima pakket voor nog geen €8 per maand. Er zijn natuurlijk ook nog andere pakketten beschikbaar, mocht je een uitgebreider hostingpakket zoeken.

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2017 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]