Een favicon is het kleine icoontje dat je website vertegenwoordigt op plekken als het browsertabblad, de favorietenbalk en de geschiedenis. Het is meestal een vereenvoudigde versie van je logo, verkleind tot een vierkantje van een handvol pixels breed. Hoe klein ook, het is een van de eerste merksignalen die een bezoeker ziet.
Zie het als het embleem op de motorkap van een auto. Vanaf de overkant kun je de modelnaam niet lezen, maar het logo herken je meteen. Een favicon doet hetzelfde tussen twintig open tabbladen: iemand vindt jouw website in één oogopslag, zonder elke titel te lezen. Het zit pal naast het pagina-adres in het browservenster, dus het staat in beeld zolang iemand op je site is.
Omdat het zo klein wordt weergegeven, is detail de vijand. Een schone vorm, één sterke kleur en goed contrast overleven het verkleinen, terwijl een vol logo met dunne lijntjes en tekst tot pap wordt. De klassieke fout is een breed liggend logo hergebruiken, dat op 16x16 tot een onleesbare vlek wordt geperst. Een vierkant logo, één letter of een uitgekleed symbool werkt bijna altijd beter.
Moderne sites leveren meerdere bestanden aan, niet één. Een kleine ICO of PNG voor het tabblad, een 180x180 apple-touch-icon voor het beginscherm van een iPhone, en een 512x512 voor Android en progressive web apps. De browser kiest per plek de juiste maat, zodat het icoontje scherp blijft op een Retina-laptop en een telefoon. Doe je dit fout, dan zien mensen een leeg vel bij een opgeslagen bladwijzer.
Bij TopDevs zetten we bij elke build de volledige set faviconformaten klaar, zodat het merk van een klant scherp en herkenbaar blijft, waar de browser het ook toont.
