Let u wel eens op die kleine pictogrammen boven aan browsertabbladen? En wanneer u een snelkoppeling naar een website of pagina online opslaat? Deze kleine afbeeldingen, of favicons, zijn speciaal voor dat doel ontworpen.

Er is een duidelijk verschil tussen een goed en een slecht pictogram. Het is je vergeven als je denkt dat ontwerpbeslissingen op de kleine schaal er minder toe doen. Maar een slecht ontworpen favicon kan slecht overkomen op uw merk.

Vandaag kijken we naar wat deze pictogrammen zijn, basis ontwerptechnieken voor hen, en de specificaties die u moet volgen.

Wat is een favicon?

Een favicon is een klein, transparant pictogram dat wordt gebruikt om een website, merk of bedrijf te vertegenwoordigen. Favicons helpen de gebruikerservaring te verbeteren door een consistente markering te bieden die websitebezoekers vertelt dat ze op dezelfde site zijn terwijl ze navigeren dankzij een consistent visueel.

De term favicon komt van “favoriet pictogram”. Deze terminologie dateert uit Internet Explorer dagen toen bladwijzers pagina’s werden genoemd “Favorieten.” Het favicon werd voor het eerst goedgekeurd door het World Wide Web Consortium (W3C) voor HTML 4.0, rond 2000, en het begon consistenter te verschijnen in browservensters het jaar daarop.

Gebruik favicons om snel tussen browsertabbladen te bladeren, een bladwijzer te identificeren, of een opgeslagen app of snelkoppeling op uw telefoon te vinden. De visuele identificatie is wat de meeste mensen gebruiken om deze links en pagina’s te associëren met de juiste knop om ze te openen.

Traditioneel, favicons gebruikten een .ico-bestandsindeling, maar dat is nu minder een probleem. Elk transparant bestandstype zal in de meeste gevallen werken; .png is vaak het formaat van keuze.

Technische overwegingen

Ooit waren alle favicons super kleine 16-pixel vierkantjes. Dat is niet meer het geval met meer high-definition retina-schermen en snelkoppelingspictogrammen om rekening mee te houden.

HTML 5 bevat standaarden voor favicons met meerdere maten voor allerlei soorten gebruik, van kleine browserpictogrammen tot computer docking station-pictogrammen tot home-schermpictogrammen. Je hebt zelfs dat vierkantje van 16 pixels niet meer nodig.

Moderne favicon-afmetingen en gebruik:

• 32×32: Standaard voor de meeste desktopbrowsers (vervangt 16×16)
• 128×128: Chrome-winkel en klein Windows 8-sterrenschermpictogram
• 152×152: iPad touch icoon
• 167×167: iPad Retina touch icoon
• 180×180: iPhone Retina icoon
• 192×192: Google Developer web app aanbeveling
• 196×196: Android homescreenpictogram

Best Practices

Hoewel het lijkt alsof een pictogram dat zo is misschien onbelangrijk is in termen van het algehele ontwerp, is dat verre van waar.

Een favicon zegt veel over uw merk en website. Gebruikers zijn ze gaan verwachten als ze ze niet bij naam kunnen identificeren. Deze kleine elementen dragen bij aan de algehele gebruikerservaring en het merk.

Dus hoe kunt u het meeste uit een favicon halen?

Houd deze best practices in gedachten:

• Een favicon moet aansluiten op uw merkidentiteit, maar is vaak te klein om een volledig logo te bevatten. Gebruik een herkenbaar element zoals de eerste letter van uw merknaam of een klein merkteken dat u in combinatie met het merk gebruikt.
• Denk aan de vorm. De ruimte voor een favicon is standaard vierkant. Als u iets anders wilt, is een transparante achtergrond noodzakelijk. Sommige systemen kunnen ook de randen afronden, waardoor dat een andere overweging is om in gedachten te houden.
• Zorg ervoor dat het bestand klein is, maar niet te klein. Upload een favicon formaat dat goed zal renderen op de meeste apparaten, maar zal niet verzwaren de totale website.
• Vermijd woorden of complexe elementen in de favicon design.
• Blijf bij een eenvoudige gestroomlijnde kleurenpalet voor de favicon. Het is te klein om gek te doen met kleur. Daarom gebruiken de meeste van deze kleine pictogrammen niet veel meer dan een achtergrond- en voorgrondkleur met veel contrast tussen de twee.

Ontwerptechnieken

Omdat een favicon klein is, zou je geneigd kunnen zijn om het in een opwelling in Photoshop te ontwerpen. Dat is niet de beste manier om een lang leven beschoren te zijn.

Bouw uw favicon in een vectortool zoals Illustrator of Sketch, exporteer vervolgens het ontwerp naar de benodigde formaten. Dit zal ervoor zorgen dat als schermresoluties veranderen, je een favicon hebt die de tand des tijds doorstaat. (Het enige wat u hoeft te doen is opnieuw exporteren op een nieuwe grootte.)

De belangrijkste regel voor visueel ontwerp van favicons is om het ontwerp eenvoudig te houden. Ga niet te ver met kleur of tekst of merkelementen. Als je naar de voorbeelden in deze post kijkt, zie je dat bijna al deze kleine elementen leesbaar zijn op 16 bij 16 pixels.

Mijd trucs zoals animatie; ze zitten hier alleen maar in de weg.

Beschouw het als een ontwerpuitdaging. Het kan knap lastig zijn om iets te maken dat zo klein is dat het goed leesbaar is.

Bewaar het bestand als een transparante png. Het is een goede gewoonte die ervoor zorgt dat je niet eindigt met vreemde randen of randen op de favicon. (Niets ziet er erger uit dan een gekartelde witte rand rond het pictogram.)

Gebruik de principes van goed ontwerp. Je weet nooit wanneer de favicon kan worden gebruikt voor iets op een grotere, meer zichtbare grootte. Het opslaan van een websitebladwijzer, bijvoorbeeld, kan een grote versie van een favicon gebruiken. Hetzelfde geldt voor docking en zelfs in zoekmachine resultaten previews.

Zelfs al is het klein, dit pictogram vertegenwoordigt uw merk. Ontwerp het goed.

Als u het bestand eenmaal klaar hebt, kunt u het met slechts een paar regels code aan uw website toevoegen. (Veel WordPress-thema’s en websitebouwers hebben al een favicon-element opgenomen, zodat u niet eens hoeft na te denken over deze stap.)

Na het uploaden van het afbeeldingsbestand, voegt u de volgende code in de header van uw website in, waarbij u opmerkt dat “iconpath” en “iconname” verwijzen naar uw specifieke bestandselement:

Voorbeelden

De onderstaande voorbeelden bevatten enkele merkelementen met bijbehorende favicons. (Klik door en laat de ontwerpers wat liefde zien op hun Dribbble-pagina’s.)

Prodigi.team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

Favicon sjabloon

TEC Logo Optie 2

Conclusie

Wat favicons missen in grootte, maken ze goed in gebruikerservaring. Deze pictogrammen dienen als navigatiehulpmiddelen voor bezoekers op uw site en voor degenen die de neiging hebben te veel browsertabbladen open te laten.

In het algemeen is een favicon een snel visueel herkenningsteken dat de gebruiker aan uw digitale aanwezigheid koppelt. Wees er voorzichtig mee om ervoor te zorgen dat het de beste, meer accurate weergave van uw merk is.