Een favoriet pictogram (favicon), wat is dat? Zie je dat pictogram daarboven wanneer je een webpagina of website bezoekt. Dat kleine pictogram? Ja, dat is een favicon daar. Je zult ze vinden weergegeven op het "tabblad" bovenaan een webbrowser (bijv. Google Chrome, Apple Safari), typisch 16x16 pixels groot, wat een website/webpagina vertegenwoordigt. Je zult favicons ook vinden op mobiele startschermen, een browser's bladwijzerbalk en zoekresultaten.
Hoewel het "mini" van formaat is, draagt het veel op zijn schouders: Het kan je merk direct herkenbaar maken, de gebruikerservaring verbeteren en merkidentiteit versterken.
Dus, het speelt een belangrijke rol in branding (consistentie, herkenning en herinnering). In het volgende zullen we het proces delen van het maken van een favoriet pictogram vanuit je logo. Klinkt technisch? We zullen je bewijzen dat het dat niet is.
We zullen je zelfs leren hoe je het snel kunt doen - zelfs zonder ontwerpervaring - en manieren om het te optimaliseren en te integreren in je website. Laten we beginnen.
Begrip van Favicons
Zoals eerder vermeld, is het een klein afbeelding die direct je website vertegenwoordigt (je thuis op het WWW). Als een visuele snelkoppeling of teken, stelt het gebruikers in staat om het snel te identificeren, zelfs als ze minstens zeven browsers tegelijk open hebben.
Standaardformaten
- .png: Gebruiksvriendelijk. Het maken ervan vereist geen speciale grafische ontwerptools.
- .ico: Microsoft heeft de ICO ontwikkeld, het originele favicon-bestandsformaat. Dit formaat maakt meerdere kleine afbeeldingen binnen hetzelfde bestand mogelijk en wordt ondersteund door alle soorten browsers. (Meest breed ondersteund door browsers)
- .svg: Lichtgewicht en zeer schaalbaar, maar heeft momenteel geen uitstekende browserondersteuning. Het offert echter geen laadtijden op. (Alleen Opera, Firefox en Chrome ondersteunen het)
Dit zijn de meest voorkomende, hoewel er aanvullende formaten beschikbaar kunnen zijn voor specifieke apparaten of browsers.
Aanbevolen formaten (in pixels)
PNG (*Browsers accepteren elke vierkante afbeelding)
16x16
32x32
ICO
16x16
32x32
48x48
Merk echter op. Sommige websites kunnen hogere resoluties vereisen (bijv. 64x64, 128x128 of 512x512 voor mobiele apparaten en retina-displays).
Hoe je je logo voorbereidt op een favicon
Eerst en vooral: Niet alle logo's kunnen favicons zijn. Sommige zijn er niet geschikt voor. Daarom is het belangrijk hoe je ze ontwerpt.
Heb je een logo met ingewikkelde tekst of details? We raden aan om een onderscheidend element te gebruiken, zoals een monogram of symbool uit je branding, in plaats daarvan.
Bevat je logo kleine tekst of details? Dit kan onleesbaar zijn wanneer het verkleind wordt. We raden sterk aan om elementen met een hoog contrast of zelfs vetgedrukte elementen te gebruiken voor maximale zichtbaarheid.
Het is ook verstandig om een transparante achtergrond te gebruiken omdat dit zorgt voor naadloze integratie van je favicon met verschillende browserthema's, maar een effen, eenvoudig gekleurde achtergrond is een goed idee als het de duidelijkheid van het pictogram verbetert.
Wil je dat je favicon er gepolijst en gemakkelijk herkenbaar uitziet? Gebruik scherpe randen in een gebalanceerd ontwerp.
Hoe je een favicon maakt vanuit een logo
Als je al een logo hebt gemaakt met logogenie.com, is het tijd om een favicon te maken. Hier zijn populaire manieren om dit te doen.
Online Favicon Generatoren
Gebruik een online tool/generator zoals Favicon.cc, Favicon.io of RealFaviconGenerator om het proces handig en snel te maken - zonder het handmatig verkleinen en converteren van je logo naar bestandsformaten. [We hebben ook een gids voor de juiste logoformaten voor je voorbereid.]
Upload je merklogo en converteer het naar verschillende favicon-formaten (en genereer zelfs één of meer resoluties zoals je nodig acht om de compatibiliteit van je favoriete pictogram over apparaten, browsers en besturingssystemen te waarborgen).
- Upload je logo-afbeelding.
- Pas de instellingen van de online favicon-generator aan.
- Download je favicon!
(Sommige tools bieden ook een pakket aan met de verschillende favicon-versies voor een consistente uitstraling en tijdbesparende manier van verkleinen en converteren aan jouw kant.)
Grafische Ontwerp Tools/Software
Wil je een aangepaste favicon? We raden aan om Illustrator, Adobe Photoshop, Canva of GIMP te gebruiken. Voordat je begint, stel de grootte van het canvas in (afmetingen: 128x128 px of 64x64px) voor de beste resultaten.
Je moet mogelijk je bedrijfslogo verkleinen en aanpassen (of eerst een bedrijfslogo maken) om zichtbaarheid en duidelijkheid te garanderen, zelfs op kleinere formaten. We raden aan om een scherp en schoon ontwerp te maken voor betere schaalbaarheid.
Vergeet niet om het op te slaan in PNG-formaat voordat je het converteert naar een favicon-formaat zoals ICO voor compatibiliteit. [Als je ontwerpt in Photoshop, kies dan "Opslaan voor Web" om de bestandskwaliteit en -grootte passend te optimaliseren.]
Het omzetten van de afbeelding naar Favicon-formaat
Het ontwerpproces eindigt niet met het hebben van je kant-en-klare JPG/PNG-bestand omdat je het moet converteren naar het ICO-formaat om de browsercompatibiliteit te garanderen. Gebruik conversietools zoals ICOConvert, ConvertICO en Favicon.io hiervoor.
Hoewel je een standaardformaat verkiest (16x16, enz.), raden we aan om meerdere formaten te genereren om ervoor te zorgen dat de juiste grootte direct beschikbaar is voor verschillende apparaten. WordPress en andere platforms staan directe upload van een PNG-bestand toe, echter.
Toch kan een ICO-versie maximale compatibiliteit over meerdere platforms garanderen.
Hoe je een favicon toevoegt aan je website
En nu, naar de volgende stap. Met je favicon klaar, laten we doorgaan naar de volgende essentiële stap: het uploaden ervan naar je website.
Ga naar de hoofdmap en upload het daar. Als alternatief kun je het favicon-bestand direct plaatsen op /favicon.ico om ervoor te zorgen dat het automatisch wordt gedetecteerd door de meeste browsers.
Gebruik je een no-code websitebouwer zoals Dorik, Wix, Shopify of WordPress? Ga dan naar de thema-instellingen en upload het favicon daar. Als je niet kunt vinden waar je het moet uploaden in de instellingen, ga dan naar de speciale favicon-uploadsectie.
Ondertussen, als je een op maat gemaakte website hebt die handmatige integratie vereist, moet je ervoor zorgen dat het op een toegankelijke locatie is opgeslagen.
Om de HTML-code bij te werken
sectie van de HTML-code:
- Voeg de link-tag toe aan de
- Is het favicon opgeslagen in een submap? Vervang de favicon.png door het daadwerkelijke bestandspad van je favicon. Verbeter de compatibiliteit met een extra tag omdat sommige webbrowsers een ICO-bestand vereisen.
Met aanvullende metatags kun je pictogrammen identificeren of specificeren voor Android-apparaten, Apple-apparaten of Windows, waardoor een soepele gebruikerservaring met meerdere favicon-versies wordt gegarandeerd.
Om de CMS of WordPress Favicon bij te werken
WordPress
Ga naar Weergave > Aanpassen > Site-identiteit.
Upload het favicon.
Shopify
Navigeer naar Instellingen > Bestanden of binnen je thema-editor.
*Andere websitebouwers, zoals Squarespace of Wix, hebben mogelijk hun eigen uploadopties, die je kunt vinden in Instellingen. TIP: Controleer je favicon op verschillende browsers en apparaten en zie of ze correct worden weergegeven
Testen en Problemen Oplossen
"Mijn favicon verschijnt niet. Wat moet ik doen?" Wis je browsercache en vernieuw de pagina. Onthoud dat sommige browsers tijd nodig kunnen hebben om je nieuwe favicon-upload te herkennen.
Bovendien, controleer of het favicon is geïmplementeerd met tools zoals een checker van een online favicon-generator.
Maar als je nog steeds het nieuw geüploade favoriete pictogram niet kunt zien, controleer dan het bestandspad opnieuw. Zorg ervoor dat het correct is gekoppeld in je HTML-code. Zorg er tot slot voor dat het consistent wordt weergegeven op meerdere browsers zoals Edge, Firefox, Chrome en Safari.
Beste Praktijken voor Favicon Ontwerp
Gebruik je logo of merksymbool om gebruikers te helpen je website te herkennen bij het browsen door startschermen en bladwijzerlijsten.
Als je geen logomerk hebt dat past in het vierkante canvas, onthoud dan om het meest herkenbare deel ervan te gebruiken.
Een transparante achtergrond kan een betere keuze zijn dan een met achtergrondkleuren. Sommige gebruikers vinden de laatste te overweldigend, vaak gedateerd. Bovendien kan een transparante versie overal worden gedeeld of geüpload omdat het niet in strijd is met welke achtergrondkleuren dan ook die een apparaat, een browser of een website heeft.
Eenvoud is de sleutel tot een effectieve favicon!
Gebruik geen ingewikkelde lijnen of complexe tekst, vooral als je de kleinste grootte gebruikt. Het moet herkenbaar zijn, zelfs van een afstand, dus we raden aan om de vereenvoudigde en gecondenseerde versie van je logo te gebruiken als je aanvankelijk de kleurrijke en complexe versie hebt gebruikt.
Denk aan branding
Hoe zal het worden bekeken of waargenomen door mensen die je website voor de eerste keer bezoeken? Je moet het afstemmen op de huidige richtlijnen voor merkstijl om consistentie te waarborgen! Onthoud, het maakt deel uit van een grotere identiteit, dus zorg ervoor dat het eruitziet alsof het deel uitmaakt van je merk.
Gebruik de hele ruimte
PRO-tip: Om de ruimte te maximaliseren, vul je de achtergrond van je favicon in met kleur voordat je je logo/icoon in het midden toevoegt.
Je hebt echter geen effen achtergrond nodig om de hele ruimte te benutten omdat transparante achtergronden perfect werken. Over het algemeen, wat je ook in de ruimte plaatst, zorg ervoor dat het dichter bij de grenzen van je favicon-ontwerp kan reiken om de duidelijkheid te verbeteren.
Gebruik een SVG-bestand voor moderne browsers omdat het uitstekende schaalbaarheid biedt.
Omdat het vectorgebaseerd is, kan het scherpte behouden ongeacht de grootte, waardoor het ideaal is voor het toekomstbestendig maken van je websitedesign en voor gebruik op hoge-resolutieschermen. Het is ook lichtgewicht, waardoor de algehele prestaties van de site verbeteren en laadtijden verminderen.
Laatste Gedachten
Gebruik een gemakkelijk te herkennen, eenvoudig, vet en eenvoudig favicon zonder overmatige details - dat kan het minder zichtbaar maken in kleine formaten. Houd het in lijn met je merk om professionaliteit te verbeteren en je identiteit te versterken. Zorg voor duidelijkheid en compatibiliteit op alle platforms.
De stappen die we hierboven hebben beschreven, zouden je moeten helpen bij het maken van een professioneel ogende favicon voor je webpagina of website met je logo. Dus, ga ervoor, maak een favicon en implementeer het om je website er gepolijst en herkenbaar te laten uitzien voor je publiek, waar ze het ook vinden.
