Pagina menu

Favicon

In deze pagina leest u hoe u een ikoon (ook wel favicon genoemd) kunt maken voor uw 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 u 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 favorie 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 u voorbeelden wilt zien van favicons op een site, dan kunt u 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.

Het formaat

Het ikoon dat u gaat maken moet een formaat hebben van 16x16 pixels of 32x32 pixels. Verder moet het ikoonbestand één van deze drie soorten bestanden zijn:

Ik ga er vanuit dat u gebruik maakt van de .ico extensie en het ikoon de standaardnaam favicon.ico geeft. Dit heeft als voordeel dat het ikoon automatisch herkend zal worden door alle grote browsers, zonder dat het toevoegen van HTML code verder nodig is.

Waarmee maakt u ze?

De ikonen kunt u maken met een icon editor of met een online generator. Op de website Dynamic Drive kunt u FavIcon Generator vinden. Hiermee kunt u met een druk op de knop een plaatje omtoveren tot een favicon. Een andere online dienst is te vinden op Favicon.co.uk.

Als u zelf een favicon wilt ontwerpen dan kunt u een editor gebruiken. Er zijn verschillende editors te koop, zoals Microangelo. Ook zijn er vaak wel evaluatie­versies gratis te downloaden. Deze programma's mag u 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:

Als u een grafisch programma op uw computer hebt staan, dan kunt u 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 u klaar bent met het maken van het ikoon dan slaat u hem op als favicon.ico .

Voorbeelden van favicons

 

 

 

 

 

Naast het laten genereren of zelf maken van een favicon kunt u tenslotte ook nog een ikoon downloaden van een site en die gebruiken. Er zijn een paar sites die gratis ikonen aanbieden, bijvoorbeeld Gort's Icons.

Gort's Icons heeft verschillende sets ikonen, waarbij iedere set bestaat uit zo'n twintig mooie ikonen. Als u een van deze ikonen gebruikt moet u het favicon-bestand ook even opslaan als favicon.ico.

Ikoon uploaden

Nu moet u het bestand favicon.ico nog uploaden naar uw webserver. Zet het in de rootdirectory (de hoofddirectory van uw site).

Tenslotte moet u nog naar het ikoon verwijzen in de head sectie van alle pagina's op uw site. Dat verwijzen doet u 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> <link rel="shortcut icon" type="image/­x-icon" href="favicon.ico"/­> </head>

Achter href komt de locatie te staan waar u de favicon.ico op uw server hebt geplaatst.

Code voor andere bestandsformaten

Als u in plaats van het .ico bestand gekozen hebt voor een ikoon in het formaat .gif of .png dan wordt de code die u in het head gedeelte van de pagina plakt, als volgt:

Code voor .gif favicon:

<head> <link rel="shortcut icon" type="image/­x-icon" href="favicon.ico"/­> </head>

Code voor .png favicon:

<head> <title>De titel van de pagina.</title> <link rel="icon" type="image/­png" href="http://­www.jedomein­naam.nl/­favicon.png" /> </head>

let opLet er goed op dat u verwijst naar de juiste locatie van het ikoon op de webserver. Als uw ikoon niet verschijnt na het gebruik van één van de codes op deze pagina, dan ligt dit waarschijnlijk aan een onjuiste verwijzing naar het favicon bestand. Ook het gebruik van een sterk verouderde browser kan problemen opleveren bij het tonen van favicons.

Ondersteuning Iphone

Apple heeft voor iphone’s (en ipod touch), een eigen standaard ontwikkeld voor favicons. Voor een iphone plaatst u een afbeelding genaamd apple-touch-icon.png op uw server.

Net zoals bij een gewone favicon kunt u hier een link naar toe plaatsen in de HEAD van uw webpagina:

Code:

<head>
< link rel="apple-touch-icon" href="/customIcon.png"/>
< /head >

Als u een bestand genaamd apple-touch-icon.png in uw root zet, vindt een Iphone die automatisch en is een link niet nodig. Een favicon voor de Iphone moet 57 bij 57 pixels groot zijn.