Je kent ze vast wel de bekende iconen in de adresbalk en tabbladen, ze zorgen niet enkel voor een mooi compleet beeld van je website, het zorgt ook voor herkenning in je tabbladenbalk en bladwijzerlijst. We pakken bijvoorbeeld: en je ziet direct dat het van Google afkomstig is, is Microsoft en jawel… Geenstijl. Kortom een fav(orite)-icoon staat niet alleen leuk, het bouwt ook herkenbaarheid op.

Een favicon voor je website is geen noodzaak, maar het helpt je bezoekers wel jouw website eruit te plukken, in bijvoorbeeld de bladwijzerlijst. Laten we dus uiteenzetten hoe we het favicon plaatsen op je website.

Formaat:
Het favicon bevat altijd de afmeting 16 breed en 16 hoog, dit is het universele formaat waarin je icoon zeker goed wordt weergegeven.

De afbeelding moet worden opgeslagen worden in het ico-formaat hier zijn verschillende programma’s voor:

Plaatsen:
Je favicon plaats je in de root van je website, dus op de plek waar in 9 van de 10 gevallen zich ook het index.html bestand bevind. Zodra je hem hebt geüpload naar de root, zouden browsers hem automatisch moeten herkennen en weergeven.

Gebeurd dit niet of wil je de favicon in een andere directory stallen dan kun je door middel van de link tag hem in je website zetten:

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

<html>
<head>
<title>Mijndomein.nl</title>
<link href="./stylesheet.css" rel="stylesheet" type="text/css" media="all" />
<link href="./favicon.ico" link rel="shortcut icon" type="image/x-icon" />
</head>
<body>

    Opmerking:
    Mocht je het opslaan als ico-formaat lastig vinden, dan wijk je hier vanaf en maak je een gif-afbeelding en vul je in het href-attribuut gewoon: “favicon.gif” in.
    <link href="./favicon.gif" link rel="shortcut icon" type="image/x-icon" />
    Let op: Dan wordt hij niet automatisch door browsers herkent en zul je op iedere pagina deze regel moeten plaatsen.

Inspiratie:
Op het prachtige inspiratieblog Smashing Magazine vind je 5 blogposts om inspiraties op te doen voor jouw eigen unieke favicon:

Tips bij het maken

  1. Trek een gelijkenis met je website; Zorg dat je icoon overeenkomt met je website, is je website simpel en strak? Zorg voor een simpel en strak icoontje. Verwerk de kleuren van je site in het icoon. Of pak de eerste letter van je logo.
  2. Houd het simpel; Je hebt maar 16×16 als grootte, dat is klein en ga dus geen ingewikkelde afbeeldingen er in verwerken die worden meestal niet herkend.
  3. Transparante icoontjes; Onthoud dat met een achtergrondkleur je favicon een blok wordt en dus niet samengaat met je adresbalk. Als voorbeeld het oude favicon van webmasterplein: WMP Favicon oud
Stem of voeg toe aanUitleg over het gebruik van deze icons :  Plaatsen/stemmen op NUjij Plaatsen/stemmen op eKudos Plaatsen/stemmen op Bligg.be Plaatsen/stemmen op Netjes.be Plaatsen/stemmen op Digg Voeg dit artikel toe aan Del.icio.us Voeg toe aan je favorieten op Technorati Abonneer je op de RSS-feed van deze site Verstuur deze pagina per e-mail via Feedburner Plaats dit bericht op Twitter

Gerelateerde berichten