Favicon-voorbeelden, beste praktijken en technieken

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

Er is een duidelijk verschil tussen wat een goed en wat een slecht klein pictogram is. Het is je vergeven als je denkt dat ontwerpbeslissingen op kleine schaal er minder toe doen. Maar een slecht ontworpen favicon kan een slechte afspiegeling zijn van je merk.

Zie ook: 45+ Professionele Lightroom Voorinstellingen 2023

Vandaag bekijken we wat deze pictogrammen zijn, de basistechnieken om ze te ontwerpen en de specificaties die je moet volgen.

Meer zien

Wat is een Favicon?

Simpel gezegd is een favicon 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 op dezelfde site zijn terwijl ze navigeren dankzij een consistente visuele weergave.

De term favicon komt van "favoriet pictogram". Deze terminologie stamt uit de tijd van Internet Explorer, toen pagina's met bladwijzers "favorieten" werden genoemd. Het favicon werd voor het eerst goedgekeurd door het World Wide Web Consortium (W3C) voor HTML 4.0, rond 2000, en het begon het jaar daarop consequenter te verschijnen in browservensters.

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 juiste knop om ze te openen.

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

Technische overwegingen

Ooit waren alle favicons superkleine vierkantjes van 16 pixels. Dat is nu 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 formaten voor allerlei soorten gebruik, van kleine browserpictogrammen tot pictogrammen voor computer dockingstations tot pictogrammen voor het beginscherm. Je hebt dat vierkant van 16 pixels niet eens echt meer nodig.

Moderne favicon maten en gebruik:

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

Beste praktijken

Hoewel het lijkt alsof een pictogram 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 haal je het meeste uit een favicon?

Houd deze best practices in gedachten:

• Een favicon moet aansluiten bij je merkidentiteit, maar is vaak te klein om een heel logo te bevatten. Gebruik een herkenbaar element zoals de eerste letter van je merknaam of een klein merkteken dat je gebruikt in combinatie met het merk.
• Denk na over de vorm. De ruimte voor een favicon is standaard vierkant. Als je iets anders wilt, is een transparante achtergrond noodzakelijk. Sommige systemen kunnen de randen ook afronden, waardoor dat nog een overweging is om in gedachten te houden.
• Zorg ervoor dat het bestand klein is, maar niet te klein. Upload een favicon van een formaat dat goed wordt weergegeven op de meeste apparaten, maar dat de website niet vertraagt.
• Vermijd woorden of complexe elementen in het favicon ontwerp.
• Houd je aan een eenvoudig gestroomlijnd kleurenpalet voor het favicon. Het is te klein om gek te doen met kleuren. Daarom gebruiken de meeste van deze kleine pictogrammen weinig 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 lange levensduur.

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

Maak je favicon in een vectortool zoals Illustrator of Sketch en exporteer het ontwerp vervolgens naar de benodigde formaten. Dit zorgt ervoor dat als schermresoluties veranderen, je een favicon hebt die de tand des tijds kan doorstaan. (Het enige wat je hoeft te doen is opnieuw exporteren naar een nieuwe grootte).

De belangrijkste visuele ontwerpregel voor 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.

Vermijd trucjes zoals animatie; die staan hier alleen maar in de weg.

Beschouw het als een ontwerpuitdaging. Het kan behoorlijk lastig zijn om iets te maken dat zo klein is dat het gemakkelijk te lezen is.

Sla het bestand op als een transparante png. Dit is een goede gewoonte die ervoor zorgt dat je geen rare randen of randen krijgt op het 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 wordt gebruikt voor iets met een groter, beter zichtbaar formaat. Het opslaan van een websitebladwijzer kan bijvoorbeeld een grote versie van een favicon gebruiken. Hetzelfde geldt voor docking en zelfs in previews van zoekmachineresultaten.

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

Zie ook: 45+ Beste Adobe XD Website Sjablonen (Gratis & Pro)

Zodra je het bestand klaar hebt, kun je het met slechts een paar regels code aan je website toevoegen. (Veel WordPress-thema's en websitebouwers hebben al een favicon-element ingebouwd, dus je hoeft niet eens na te denken over deze stap).

Nadat je het afbeeldingsbestand hebt geüpload, voeg je de volgende code in de header van je website in, waarbij je moet opmerken dat "iconpath" en "iconname" verwijzen naar je specifieke bestandselement:

• HTML-indexbestand:
• WordPress:

Voorbeelden

De voorbeelden hieronder bevatten een aantal 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 voorgesteld logosysteem

Logo Favicon weergeven

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 je site en voor degenen die de neiging hebben om te veel browsertabbladen open te laten.

Als algemene regel geldt dat een favicon een snelle visuele identificatie is die de gebruiker linkt aan je digitale aanwezigheid. Wees er voorzichtig mee om ervoor te zorgen dat het de beste en meest accurate weergave van je merk is.