Sinds vandaag heeft dit weblog een favicon! “Nou en? Wat maakt dat uit?” zal misschien een commentaar zijn. Het heeft zo zijn voordelen. Een favicon levert je meer aandacht op in bookmarks en maakt je pagina herkenbaar.
Allereerst: wat is een favicon eigenlijk? Een favicon is als een “merk” van een website. Wikipedia geeft de omschrijving: “Een favicon, of paginaicoon, is een icoon dat geassocieerd is met een website.” Heel simpel gesteld: in je adresbalk staat een browser icoontje van bijvoorbeeld Internet Explorer of Firefox. Dat icoontje kan je als site-eigenaar aanpassen. Hierdoor krijgt je website buiten de bestaande grenzen nog een extra beeldmerk. Dit beeldmerk kan er voor zorgen dat jouw site eenvoudig te herkennen is voor je bezoeker.
DE VOORDELEN Herkenbaarheid in de adresbalk Zoals gezegd wordt een favicon in een adresbalk geplaatst. Een voordeel hiervan is simpelweg de branding van je website. Doordat de favicon in de adresbalk staat ziet de bezoeker keer op keer jouw watermerk, wat zorgt voor herkenning, ook als dat watermerk ergens anders weer terug komt.
Favorieten
Veel internetters maken gebruik van de favorieten-mogelijkheid in hun browser. Sommigen (zoals ik) hebben er zeel veel. Dat kan een enorme brij aan links worden. Kijkend naar zo’n rij aan links moet je er eentje uitkiezen. Dan is het best handig als die goed herkenbaar is. Een favicon kan hiervoor zorgen. Door een favicon springt in het oog, waardoor je sneller voor een site zal kiezen in je favorieten. 
Browsers met tabs
Firefox en Opera zijn browsers die het al langer deden, maar nu doet ook de nieuwste Internet Explorer er aan: tabs. Door gebruik te maken van tabs kunnen er binnen een browserscherm meerdere pagina’s geopend worden. Dit heeft als voordeel dat er niet heel veel schermen open staan. Het kan daardoor wel gebeuren dat je veel tabs open hebt staan, wat er voor zorgt dat de diverse geopende sites naast elkaar worden getoond: 
Het is dan slim als jouw website voor de internetter snel te vinden is in het rijtje.
De onzin-factor
Tja is het nou echt alleen maar handig? Het lijkt er wel op. Er is maar één echte maar: als iedereen er een heeft val je in dat rijtje niet zo meer op… Dan komt het neer op de originaliteit van je favicon. Dat kan via een opvallend plaatje of een “animated” favicon. Eentje die beweegt bijvoorbeeld. Maar dat laatste is alleen aan te raden op sites die ook ‘speels’ zijn. Een zakelijke site met een bewegende favicon kan niet erg professioneel overkomen.
Hoe kom ik aan een favicon?
Een favicon in je website hangen is relatief eenvoudig. Allereerst moet je zorgen dat je weet welk plaatje je als favicon wil gebruiken. Deze moet je vervolgens omzetten naar een .ico bestand en hernoemen naar favicon.ico. Voor het omzetten kan je gebruik maken van gratis tools zoals op de website http://www.htmlkit.com/go/favicon/. Vervolgens plaats je de favicon in je webdirectory. In je de html-template of de pagina van je website moet je vervolgens een zin code (voorbeeldcode link rel="shortcut icon" href="favicon.ico" mce_href="favicon.ico" ) plaatsen en klaar is kees! Te ingewikkeld? Gewoon even je webbouwer vragen. Het gebruik van een favicon is om bovenstaande redenen zeer aan te raden. Het maakt je website completer.
Not Dutch? check out 
leuk…goede actie!
Zeker een goede om eens aan te stippen! Ik haal vaak de tekstuele labels van de bookmarks in m’n horizontale bookmarks-toolbar weg, waardoor er slechts nog een rijtje icoontjes overblijft. Voor veel en steeds meer sites werkt dit prima…
groeten
Victor
Even over de animated icons: dat is, wat mij betreft, dan weer een horribele verschijningsvorm van een in elk ander opzicht grappig idee. Bewegende rommel leidt me alleen maar af en irriteert me wanneer ik rustig door mijn bookmarks koekeloer. Geanimeerde favicon krengen gaan dan ook onmiddellijk op de AdBlock lijst en ik zou ze zelfs ook niet voor ’speelse’ sites aanraden..
Ben het op zich wel met je eens Tabun, de animated favicons kunnen vreselijk irritante dingen zijn.
Als ik het heb over ’speelse’ sites heb ik het ook niet over sites die denk ik voor onze doelgroep bedoelt zijn, maar meer voor het “MSN-publiek”, als je ziet met wat voor smileys en weet ik niet wat nog meer gewerkt wordt kan ik me voorstellen dat die doelgroep het wel weer interessant vindt.
Overigens kreeg ik via e-kudos de opmerking dat een favicon niet altijd direct getoond wordt in de IE7-adresbalk (wel in de tabs). Dat is soms te voorkomen door de favicon in de root te zetten. Bij deze dus als aanvulling op bovenstaand artikel.
Techniek blijft weerbarstig…
Favicon van onze site is wel via Firefox te zien maar niet met IE 7. Wat is ‘in de root zetten’?
Hallo Hans,
dat is dus inderdaad een van de ‘problemen’ die IE7 momenteel met zich meegeeft.
In de ‘root’ zetten betekent dat je het .ico bestandje direct in de ‘bovenste map’ van je site plaatst. In mijn geval dus http://www.basvandenbeld.nl/favicon.ico en dat je die exacte link ook gebruikt in je code die je in de html van de site zet:
… href=”http://www.basvandenbeld.nl/favicon.ico” …
Is dat helder?
Hoi Bas,
Gedaan. Favicon verschijnt wel in de tabs maar niet in de adresbalk. Ga het later nog wel ff weer proberen bij slechter weer ;)
Bedankt iig!
Leuk, ga ik ook maar eens proberen :-)
P.s. tot 11 mei.
Mm, begrijp even niet hoe je die linkcode maakt Bas…
Zo? : link rel=”shortcut icon” href=”favicon.ico” mce_href=”favicon.ico”
Ha die Evert Jan, de code moet zijn:
let op, in IE7 gaat het dus niet altijd goed (zie eerdere comments)
gr!
Bas
Eh, Bas… de code moet zijn:
(vergeten te pasten denk ik)
Het werkt. :-)
Hoi Evert Jan,
blijkt dat het systeem geen ‘code’ accepteert, dus niet vergeten te pasten, maar geblocked :).
Blij dat het gelukt is!
Bas
Hoi,
ff zitten spelen met het geheel van favicons.
het is nl een beetje veranderd.
Vroeger klopte het dat je alleen
in de head hoefde te zetten.
Nu moet je al
plaatsen.
Anders pakt ie 7 hem niet.
Met de laatste link pakken alle browsers die ik heb geprobeert hem correct.
greets
Marco
Hoi Marco, de code wordt door het content management systeem achter dit weblog geweigerd, als je hem iets ‘verdraait’, dus tussen “” en/of met spaties wordt ie mogelijk wel zichtbaar.
waarom gebruik je hem zelf niet?
Hoi Patrick, ik heb m zelf wel geimplementeerd. Ik vermoed dat je IE7 gebruikt? Dan is er namelijk sprake van bovenstaand probleem vermoed ik.
Ik kan jouw icon prima zien hoor, met IE 7.
Dit is wel de tweede keer dat ik op je site ben, vaak is de urlicon de eerste keer niet zichtbaar met IE7.
leuk favicon maar in mijn internet explorer zie ik het niet staan, ik zie er bv. wel van goudengids e.d. maar de jouwe niet, hoe zou dit komen ?
Hallo Patrick,
dat kan met veel dingen te maken hebben. Welke versie gebruikte je?
Je kan bijvoorbeeld eens proberen een paar keer te slepen met je muis over het internet explorer-icoontje in je adresbalk, dan wil ie ook nog wel eens verschijnen.
Als je vervolgens je cache weggooit ben je hem ook weer kwijt overigens…
Hallo Bas,
ik zie op jou site netjes het favicon staan, zowel in de adres balk van ie7 als in de tabladen.
ik heb het volgende in me index pagina gezet tussen :
maar zie het icoon niet in IE 7 staan, of heb ik toch iets fout gedaan?
Hallo Johan,
dat is zo moeilijk te beoordelen, kan met vele zaken te maken hebben (zie bovenstaande replies). Wat is de url van je site? Dan kan ik eens kijken wat ik zie.
Hey Bas, Buiten het feit dat een favicon natuurlijk heel gaaf is vertelde Nate Koechley tijdens Kings of Code dat het NIET hebben van een favicon ten koste gaat van de snelheid waarop je pagina wordt ingeladen. Browsers zijn op zoek naar je favicon, als daar niks staat zoeken ze iets langer door, waardoor andere processen moeten wachten.
Ander puntje, Je favicon wordt pas aan het einde ingeladen zie ik nu en omdat je Flickr photos laat zien (en ik hier een niet al te snelle verbinding heb) blijft de pagina die flickr animatie inladen en niet je favicon…
Hij is nu gecashed dus, dat probleem komt maar 1 keer voor :)
He Patrick, thanks, ik zal er eens naar kijken.
Toch jammer dat ik Kings of Code moest missen heb duidelijk goede tips gemist!
Hoi Bas, ik heb op allerlei manieren bovenstaande handelingen en html codes ingevoerd, maar op de een of andere wijze krijg ik geen favicon in de internetadres balk. Ik heb het gemaakte favicon gekopieerd naar de webspace waar de site ook staat. Het favicon heb ik gemaakt via bovenstaande omvormer. Echter heeft deze geen .ico extensie, is dat erg? Ik kan wel het favicon gebruiken binnen mijn pc als ik bv een snelkoppeling maak op het bureaublad.
Zoals je ziet maak ik gebruik van een gratis webspace via athome. Wat doe ik niet goed? Groet Pieter
Hoi Pieter, ik zie deze icon staan bij jouw site: http://members.home.nl/favicon.ico.
Het zou kunnen zijn dat je geen rechten hebt op je root van je site aangezien het een gratis dienst is van @home… Misschien moet je dat even controleren bij @home
Hallo,
Nou heb ik een flavicon geplaatst, je ziet hem dus alleen als je hem in je favoriet zet. En nu gebruik ik win vista, en daar zie je hem helemaal niet.
Gaaf he?
Even nog een belangrijke opmerking om conform de HTML 4.0 definitie een favorieten icon te plaatsen.
1) het formaat MOET 16 bij 16 pixels zijn
2) het moet een .ico bestand zijn
3) in de definitie (head-sectie van je html-bestand) dient voor de herkenbaarheid van bestandstype een typedefinitie zijn opgenomen.
Hiermee wordt de code dus:
path is de relatieve verwijzing naar de plaats waar het bestand staat. Zoals al gezegt is het raadzaam deze in de root (hoofdmap) van je website te plaatsen.
Afhankelijk van de map (directori-niveau) van de pagina waaraan je het favicon wilt koppelen kan path dus verschillende waarden hebben voor de verschillende pagina’s van je website.
Voorbeeld (er vanuitgaande dat het bestandje in je root staat)
index.html => path = /favicon.ico
fotoboeken/feestje.html => path = ../ favicon.ico
nieuws/januari/nieuwjaar.html => path = ../../favicon.ico
Bij mij viel de code dus ook weg door het manage-systeem. Hier de code (alles achterelkaar op 1 regel zetten)
“”
de ” (aan begin en eind) moet je natuurlijk weglaten ;-)
En nu maar hopen dat de code wel geplaatst wordt..
Niet dus…
Dan maar anders.
Begin met “”
Zo, die is streng… ;-)
[link rel='shortcut icon' href='/path/favicon.ico' type='image/x-icon' /]
(vervang [ en ] door het kleiner- en groterdan teken..)
hallo,
Nou ik heb alles doorgelezen en nu snap ik het helemaal niet meer :(
code 1 moet in de head. en wat met de laatste code.
Ik heb mijn ico op de root gezet. en gebruik dus code 1
MBrides mooie en betaalbare bruidsmode.
Maar het werkt niet,waar ga ik de fout in?
Nu zie ik dat je de code niet kunt zien die had opgegeven.
Help aub.
Hallo Miranda,
als ik naar je site ga zie ik de favicon staan, ik denk dus dat het gelukt is!?
ik heb zojuist een favicon geplaats en het doet het allemaal naar behoren, maar vanaf mijn startpagina open ik verschillende framesets met eigen inhoud. Nu lijkt het mij logisch als je de link bekijkt dat je naar verschillende favicons kan verwijzen, maar waarom werkt het alleen bij de favicon in de root directory?
Gave uitleg. Moest het weer op een andere site maken. Dankzij jouw uitleg een fluitje van een cent! Thnks.