Hoe plaats ik op mijn site een pictogram in de adresbalk?

Trefwoorden: favicon, head, link, image/x-icon, browser, webdesign, HTML

1. Inleiding


En van de dingen die de bezoekers van je website het snelst toelaten je website te identificeren, is een icoontje (favicon genoemd) in de adresbalk. Indien je als webmaster een eigen favicon ontwerpt, kan dit je website vlug een eigen identiteit geven; bovendien verschijnt de favicon tevens op andere plaatsen zoals bijvoorbeeld in de lijst met favorieten (bookmarks).

2. De foute aanpak


Veel mensen ontwikkelen een favicon door een bitmap de extensie ico te geven. Hoewel dit in sommige situaties de perfect oplossing lijkt te zijn, is dit echter geen juiste werkwijze. Sommige apparaten zullen de favicon namelijk slecht of zelfs helemaal niet weergeven.

3. De correcte aanpak


3.1. Een favicon ontwikkelen

Ga er van uit dat je icoon het beste 16 pixels meet in zowel de hoogte als de breedte. Wanneer je dit in je achterhoofd houdt, zal je eindresultaat het beste ogen. Een snel rekensommetje leert ons dat je maximaal 256 kleuren zal kunnen weergeven (16*16). In theorie betekent dit dat elke pixel op dat moment een andere kleur zou moeten krijgen, iets wat in de praktijk zelden of nooit zal voorvallen. De afbeelding zelf kan je eenvoudig en snel aanmaken met gespecialiseerde software als bijvoorbeeld GoldIcon, Genfavicon (webbased) of Microangelo.

3.2. De favicon toevoegen aan je pagina

Er zijn meerdere manieren om een favicon te weergeven. Indien je het icoon de naam favicon.ico geeft en je dit in de root van je website plaatst, is de kans groot dat de meest gebruikte browsers automatisch je favicon oppikken en tonen. Indien je de favicon niet op die manier wil benoemen of je wil meer zekerheid, pas je best de head-sectie van je document aan. Het toevoegen van 1 link-tag, met de correcte attributen, is reeds voldoende:

CODE
  1. <link rel="shortcut icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />


De tag werkt grotendeels hetzelfde als bijvoorbeeld een img-tag of een a-tag; het attribuut href laat je toe om een locatie op te geven. Deze locatie kan zowel een relatief als een absoluut pad zijn.

3.3. Het werkt niet...

Indien je alle bovenstaande stappen hebt uitgevoerd, maar je favicon nog steeds niet wordt weergeven in Internet Explorer, probeer je best eens of je de favicon in een andere browser (zoals Mozilla Firefox of Opera) wel te zien krijgt. Internet Explorer bevat namelijk een vervelende bug die er voor zorgt dat de favicon niet in elke situatie onmiddellijk zichtbaar is. Als je ook in andere browsers de favicon niet te zien krijgt, start je best een nieuw onderwerp in onze forums ;).Dit artikel werd geschreven door Martijn op vrijdag 10 oktober 2003 om 20:28 en werd sindsdien 19120 keer gelezen.

  • Pagina
  • 1 van 1

Bericht geplaatst door een gast op donderdag 10 februari 2005 om 21:14:23.
:)
Ga maar eens kijken bij www.favicon.com
daar wordt je misschien wijzer van.
Ze hebben of hadden daar een gratis tooltje.

Suc6
:D
Bericht geplaatst door Slytherat op zaterdag 25 november 2006 om 21:32:49.
Slytherat's avatar
Multiviteit: 300
Rat-chan
Mostly harmless...
Mss een handige site voor diegene die geen speciaal programma willen downloaden om hun favicon te creren. Dit online programma zet gif, jpg, png, and bmp. om naar een favicon die je dan kan downloaden.
Nice and easy ^_^

http://tools.dynamicdrive.com/favicon/

-Rat-

I'm not a bitch, I just have a low bullshit tolerance.
  • Pagina
  • 1 van 1