Maak je eigen favicon.ico

19-02-2011 | Marcel van Langen | HTML, XHTML en CSS | favicon, icoon, custom, design, browser

Nogal wat websites hebben tegenwoordig een eigen icoontje, de zogenaamd favicon.ico. Dit zie je terug in onder andere de adresbalk van de browser, maar ook wanneer je de website aan je favorieten toevoegt. Een handige manier dus om je website net even iets meer te laten opvallen. Maar hoe krijg je dit nu zelf voor elkaar? We leggen het hier uit!

Om te beginnen zul je eerst moeten kiezen wat voor icoon je wilt. Bedenk daarbij dat een icoon voor je website een zeer kleine afbeelding is van 16 bij 16 pixels. Erg klein dus. Zeker als je geen ervaring hebt met grafische pakketten kan het dan ook zeer lastig zijn om een zelfgemaakt favicon.ico bestand te maken. In dat geval is het wellicht verstandig om via Google of een andere zoekmachine op zoek te gaan naar een bestaand icoon die bij je website past. Zoek maar eens op "icon 16x16"!

Heb je al een logo en is deze relatief eenvoudig, dan kun je direct proberen om je logo te verkleinen naar het 16 x 16 pixels formaat. Dit is uitstekend te doen in een pakket als Adobe Photoshop, maar er zijn ook gratis online tools. Daar bied je je logo aan, en de tool geeft je een afbeelding van 16 x 16 pixels terug. Een voorbeeld is Dynamic Drive, maar er bestaan meerdere.

In de meeste gevallen zal dit niet zo'n mooi resultaat geven. Een logo is al gauw te complex om goed terug te kunnen schalen naar 16 x 16 pixels. Het wordt dan tijd om de essentie van je logo terug te brengen in een nieuw te maken afbeelding. Zo heb ik voor het logo van Morloff alleen de kenmerkende R met het plusje erin gebruikt. Probeer daarbij de afbeelding zoveel mogelijk vierkant te houden, dat ziet er straks natuurlijk beter uit als icoon.

Ben je klaar met het icoon en heb je een van de online tools een icoon laten maken, zorg er dan voor dat het bestand favicon.ico heet. Dit is belangrijk, omdat in dat geval geen extra code nodig is om browsers het icoon te laten herkennen. Nu rest er nog één stap: upload het icoon naar je website, en zorg er daarbij voor dat je het bestand in de root zet. Dit is erg belangrijk. De verleiding is wellicht groot om het icoon een eigen directory te geven of in de afbeeldingen directory te plaatsen. Het bestand moet echter in de root van de website staan om automatisch gevonden te worden. Dit is meestal ook de plaats waar je index.htm of index.html te vinden is.

Nu natuurlijk nog even controleren of het goed is gegaan. En dat is soms nog even lastig, omdat niet alle browsers het icoon direct laten zien. Vaak ligt de oorzaak bij caching door de browser. De oplossing: vraag de pagina opnieuw op of gooi de browser cache leeg. Je kunt ook een ? achter de URL zetten. Dan denkt de browser dat je een nieuwe pagina opvraagt, en haalt hij deze opnieuw op. En wil je het zekere voor het onzekere nemen, dan kun je in het HEAD gedeelte van je website ook nog de volgende code opnemen:

<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" type="image/ico" href="favicon.ico" />

Over Morloff

Morloff ontwerpt en realiseert succesvolle webtoepassingen op het gebied van procesoptimalisatie, eCommerce en rapportage door de inzet van moderne webtechnieken, sociale media en zoekmachine optimalisatie.

over ons | diensten | portfolio | contact | route

naar website IJsmonster.nl naar website ICT intermediairs naar website marcelvanlangen.com

Twitter

Morloff

Cuneraweg 169a
3911 RH Rhenen

M +31 (0)6 - 515 96 189
W www.morloff.nl
E contactformulier

Morloff op Twitter Morloff op Facebook Morloff op LinkedIn Morloff via RSS