Favicon, pictogram voor je website

favicons De favicon bestaat al lang. Een favicon is een pagina-icoon. Een pictogram voor je website. Een webbrowser laat die zien in de adresbalk. Ook worden ze gebruikt in de lijst met bladwijzers of favorieten. Het is een heel klein plaatje, dat de aandacht trekt. Een logo van een organisatie is erg geschikt als favicon. De link van een organisatie is dan gemakkelijk te herkennen.

Een standaard favicon heeft de afmetingen 16×16 pixels. Tegenwoordig is een favicon niet meer in elke browser in de url balk (Firefox en Chrome) zichtbaar. In de tabbladenlijst en favorietenlijst blijft de favicon wel zichtbaar. (Reden : een hangslotje als favicon kan bezoekers laten denken dat een site een beveiligde verbinding heeft).

favicon

Er zijn ook flavicons van andere afmeting. Die zijn bedoeld voor mensen die een snelkoppeling naar je website op hun computer plaatsen, bijvoorbeeld op hun bureaublad. Een icon voor een computer is groter. Wanneer groot weergegeven 16×16 pixel plaatje hiervoor wordt gebruikt ziet dit er wat vager uit. Gezien het feit dat grotere plaatjes veel meer laadtijd kosten raad ik dit af. Meestal werken mensen vanuit de favorietenlijst.

Favicon animatie

Meestal is een favicon een plaatje. Maar het is mogelijk er een animatie van te maken. Sommigen vinden het mooi. En zijn er blij mee omdat het zo opvalt. Ik zie alleen maar nadelen:

  • Het bestand is eens stuk groter dan bij een afbeelding. Omdat een animatie altijd uit meerdere plaatjes bestaat. Grotere bestanden beïnvloeden de websiteperformance. Doordat ze het laden van een pagina in de browser vertragen. Vertragingen irriteert gebruikers. En is een SEO factor.
  • Op een zakelijke site kan bewegende favicon niet professioneel overkomen.
  • Mensen vinden bewegende favicons al snel irritant.

Wanneer je favicon plaatje erg klein is en niet groter dan 2kb, dan is de laadtijd in de browser verwaarloosbaar.

Favicon maken of genereren van afbeelding

Er zijn diverse websites waar je een eigen favicon kunt laten genereren van een bestaande foto of plaatje. Of waar je er zelf een kunt tekenen. Je kunt ook zelf in en tekenprogramma er een maken. De bestandsgrootte verschilt bij de verschillende generatoren. Sommige generatoren maken voor een 16×16 icon al een plaatje met van 8kb. Ik vind kleine bestanden belangrijk en geef daarom de voorkeur aan :
http://tools.dynamicdrive.com/favicon/
Wil je er zelf een ontwerpen dan kun je dat doen op:
http://www.favicon.cc/
De bestanden worden wel wat groter.

Favicon werkend maken

  • Upload de favicon in de root van je website. Dat is de hoofddirectory waar je index staat en website start.
  • Wijzig de code in de HTML van je website pagina´s. Hiervoor moet je een link-tag in tussen <head> en </head> plaatsen. Zie het voorbeeld hieronder. Op de plek mijnicon.ico moet de naam van je eigen favicon bestand staan.

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

Plaats reactie

Je kunt de volgende HTML tags gebruiken:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>