Favicon-voorbeelden, beste praktijken en technieken

Besteed je ooit aandacht aan die kleine pictogrammen bovenaan de browsertabbladen? Hoe zit het met het opslaan van een snelkoppeling naar een website of pagina online? Die kleine afbeeldingen of favicons zijn speciaal voor dat doel ontworpen.

Er is een behoorlijk duidelijk verschil tussen wat zorgt voor een goed of slecht klein pictogram. Het zou je vergeven zijn te denken dat ontwerpbeslissingen op kleine schaal er minder toe doen. Maar een slecht ontworpen favicon kan uw merk slecht beïnvloeden.

Vandaag bekijken we wat deze pictogrammen zijn, de basistechnieken voor het ontwerpen ervan en de specificaties die u moet volgen.

Verken Envato Elements

Wat is een favicon?

Een favicon is simpelweg een klein, transparant pictogram dat wordt gebruikt om een ​​website, merk of bedrijf weer te geven. Favicons helpen de gebruikerservaring te verbeteren door een consistente markering te bieden die websitebezoekers vertelt dat ze zich op dezelfde site bevinden als ze navigeren dankzij een consistente visual.

De term favicon komt van 'favoriete icoon'. Deze terminologie dateert uit de dagen van Internet Explorer toen pagina's met bladwijzers "Favorieten" werden genoemd. De favicon werd voor het eerst goedgekeurd door het World Wide Web Consortium (W3C) voor HTML 4.0, circa 2000, en het begon het volgende jaar consistenter in browservensters te verschijnen.

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

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

Technische overwegingen

Ooit waren alle favicons superkleine vierkanten van 16 pixels. Dat is niet meer het geval met meer high-definition retina-schermen en snelkoppelingspictogrammen om te overwegen.

HTML 5 bevat standaarden voor favicons met meerdere formaten voor allerlei toepassingen, van kleine browserpictogrammen tot pictogrammen van het dockingstation van de computer tot pictogrammen op het startscherm. Dat vierkant van 16 pixels heb je niet eens 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-sterpictogram
• 152 × 152: iPad touch-pictogram
• 167 × 167: iPad Retina-aanraakpictogram
• 180 × 180: iPhone Retina-pictogram
• 192 × 192: aanbeveling voor Google Developer-webapp
• 196 × 196: Android-startschermpictogram

Beste praktijken

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

Een favicon zegt veel over je 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 kun je het beste uit een favicon halen?

Houd deze praktische tips in gedachten:

• Een favicon moet aansluiten bij uw merkidentiteit, maar is vaak te klein om een ​​heel logo op te nemen. Gebruik een identificeerbaar element zoals de eerste letter van uw merknaam of een klein merkteken dat u in combinatie met het merk gebruikt.
• Denk na over vorm. De ruimte voor een favicon is standaard vierkant. Als je iets anders wilt, is een transparante achtergrond nodig. Sommige systemen kunnen ook de randen afronden, dus dat is een andere overweging om in gedachten te houden.
• Zorg ervoor dat het bestand klein is, maar niet te klein. Upload een favicon-grootte die op de meeste apparaten correct wordt weergegeven, maar die de algehele website niet zal belemmeren.
• Vermijd woorden of complexe elementen in het favicon-ontwerp.
• Blijf bij een eenvoudig gestroomlijnd kleurenpalet voor het favicon. Het is te klein om gek te worden van 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, ben je misschien geneigd om het in een opwelling in Photoshop te ontwerpen. Dat is niet de aanbevolen route voor een lang leven.

De belangrijkste visuele ontwerpregel voor favicons is om het ontwerp eenvoudig te houden. Ga niet overboord met kleur of tekst of merkelementen.

Bouw je favicon in een vectortool zoals Illustrator of Sketch en exporteer het ontwerp vervolgens naar de benodigde formaten. Dit zorgt ervoor dat naarmate de schermresoluties veranderen, je een favicon hebt die de tand des tijds doorstaat. (Het enige dat u hoeft te doen, is opnieuw exporteren naar een nieuw formaat.)

De belangrijkste visuele ontwerpregel voor favicons is om het ontwerp eenvoudig te houden. Ga niet overboord met kleur of tekst of merkelementen. Als je naar de voorbeelden in dit bericht kijkt, zul je zien dat bijna al deze kleine elementen leesbaar zijn met 16 bij 16 pixels.

Vermijd trucs zoals animatie; ze staan ​​hier alleen maar in de weg.

Beschouw het als een ontwerpuitdaging. Het kan best moeilijk zijn om zoiets kleins te maken dat het gemakkelijk te lezen is.

Sla het bestand op als een transparante png. Het is een goede gewoonte die ervoor zorgt dat je geen vreemde randen of randen op het favicon krijgt. (Niets lijkt erger 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 met een grotere, meer zichtbare grootte. Het opslaan van een bladwijzer voor een website kan bijvoorbeeld een grote versie van een favicon gebruiken. Hetzelfde geldt voor docking en zelfs voor previews van zoekresultaten.

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

Zodra u het bestand gereed heeft, kunt u het met een paar regels code aan uw website toevoegen. (Veel WordPress-thema's en website-bouwers bevatten al een favicon-element, dus u hoeft niet eens na te denken over deze stap.)

Na het uploaden van het afbeeldingsbestand, voegt u de volgende code in de koptekst van uw website in en merkt u op dat "iconpath" en "iconname" verwijzen naar uw specifieke bestandselement:

• HTML-indexbestand:
• WordPress:

Voorbeelden

De onderstaande voorbeelden bevatten enkele merkelementen met bijbehorende favicons. (Zorg ervoor dat je doorklikt en laat de ontwerpers wat liefde zien op hun Dribbble-pagina's.)

Prodigi.team responsief logo

Butterscotch Proposed Logo System

Logo Favicon-weergave

Favicon sjabloon

Optie TEC-logo 2

Gevolgtrekking

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

Over het algemeen is een favicon een snelle visuele identificatie die de gebruiker aan uw digitale aanwezigheid koppelt. Zorg ervoor dat dit de beste, nauwkeurigere weergave van uw merk is.