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: 
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:
- Inspire Yourself: 50 Remarkable Favicons
- Inspire Yourself: More Creative Favicons
- Creative Favicons: When Small Is Beautiful
- Creative Favicons: Tiny Artwork
- Favicons Episode 5: The Delicate Beauties
Tips bij het maken
- 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.
- 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.
- 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:
Ik heb ook nog een favicon editor, die ik eens gebruikt hebt. Deze werkt ook met transparante achtergrond: http://www.rw-designer.com/online_icon_maker.php
Mischien een goeie tip voor de ‘luie’ webmaster:
http://www.faviconsr.us/
Liever een favicon die goed de inhoud van een site weergeeft, maar die je niet zelf gemaakt hebt. Als helemaal geen favicon!
Mijn binnen 1 minuut creatie:
http://www.degraeve.com/favicon/favicon.ico?3689.85501424508
@slimbiny, ik kan echt niet lezen wat er staat