Designtips voor favicons

Stukje geschiedenis

De favicon zag het levenslicht in 1999, toen Microsoft een nieuwe tabblad voor favorieten introduceerde voor Internet Explorer 5. In 2000 nam het World Wide Web Consortium (W3C, een organisatie die webstandaarden ontwerpt) het favicon voor HTML 4.0 over. Een jaar later begonnen webbrowsers een favicon naast de URL te gebruiken, en vervolgens migreerden ze naar de nu bekende browsertabbladen. Na de lancering van de eerste iPhone nam de favicon nog een grote wending nadat Apple de "apple-touch-icon.png" introduceerde. Een versie met een hogere resolutie die werd gebruikt om op het iOS-dock te pinnen. Dit creëerde het precedent voor meerdere faviconformaten en hielp PNG te versterken als voorkeursformaat. Tegenwoordig hebben we aangepaste favicons voor alles.

Herkenbaarheid in 16 x 16 pixels

Back in the days was 'als het maar op een pen past' één van onze tests bij het ontwerpen van een logo. Want als het zelfs op zo'n piepklein oppervlak overeind blijft, is het een goed ontwerp. We kunnen wel zeggen dat de favicon inmiddels zo'n beetje de plek van de pen heeft ingenomen. Het enige verschil is dat er bij een favicon vaak sprake is van een afgeleide van het logo in plaats van een 1-op-1 verkleining. Want met maar 16 x 16 pixels voor de classic variant moet je simplificeren. Herkenbaarheid is hierbij het allerbelangrijkst. Van de eerste letter van je merknaam tot een opvallend symbool of vormelement uit je logo of huisstijl.

5 designprincipes

Er zijn tal van favicongenerators waar je snel een hele bups favicons kunt genereren. Maar deze oefening vraagt juist om oog voor design. Want krachtig communiceren op een superklein oppervlak is best een uitdaging. Onze designtips voor favicons in het kort:

• Gebruik je ruimte optimaal: breng het woordmerk bijvoorbeeld terug tot één herkenbare letter of ga voor een beeldmerk of vormelement.
• Hou het simpel: details vallen weg of ogen rommelig op klein formaat, dus ga voor eenvoud en simplificeer waar mogelijk.
• Zorg voor herkenbaarheid: verplaats je in de klant en kies de kleur en het element dat zij het meest met je merk associeren.
• Voldoende contrast: een monochroom ontwerp werkt vaak goed. Wil je toch meerdere kleuren gebruiken? Zorg dan voor voldoende contrast, dat verbetert de 'leesbaarheid' van je favicon.
• Multitoepasbaar: hou er bij het ontwerpen rekening mee dat je geen invloed hebt op de context. Browsertabbladen zijn er in wit, grijs en zwart, en met customizable themes is al helemaal alles mogelijk. De favicon moet dus in verschillende omgevingen goed functioneren. Maak voor de zekerheid een versie op een doorzichtige achtergrond, en een op een achtergrond met kleurvlak.