Het klassieke ICO bestand is 16×16 met 16 of 24-bit kleur en ondersteuning voor transparantie. Veel later kwam er een 32×32 afmeting, maar oudere browsers verkleinen deze nog naar 16×16.
Waarom heb je dit nu nodig? Tegenwoordig is het een belangrijk element van de interface van een website, die ook belangrijk is bij geavanceerde webapplicaties.
Favicon Checker Controleer of uw website favicon heeft en hoe het wordt weergegeven in verschillende browsers
Wat is het Doel?
Uiteraard is het veel makkelijker om te kijken naar de bookmark die je nodig hebt, aangezien het makkelijker is om te zoeken naar een bekend symbool in plaats van het lezen van alle namen van de websites. Het doel hiervan is dus het verbeteren van de gebruikservaring. Dat is de meest voorname reden om dit te gebruiken. Vandaag de dag kun je dit populaire element vinden op alle websites en in alle browsers in de tabbladen bovenin. Wereldwijde bedrijven hebben een herkenbaar en populair symbool waardoor zij op kunnen vallen op het internet (en hebben goede favicon voorbeelden om naar te kijken). Zonder enige twijfel is dit handig voor alle soorten websites. Het is gemaakt om een snel visueel hulpmiddel te zijn om de website te vinden die je zoekt tussen alle bookmarks op het internet, zodat jouw doelgroep jouw website sneller en makkelijker kan vinden.
Een website zonder een persoonlijk en te identificeren icoontje krijgt het generieke symbool van de browser zelf en daarom is het belangrijk dat je dit wel hebt wanneer je aan de branding wilt werken van jouw website.
Hoe Maak je een Website Favicon?
Je kunt het zelf doen of hulp gebruiken op het internet. Het is niet nodig om gebruik te maken van online generators, maar deze zijn wel handig en makkelijk te gebruiken. Hier zijn een aantal websites die kunnen helpen:
- Favicon Generator;
- Favicon Generator ORG;
- Dynamic Drive Favicon Tool;
- Favigen;
- Gen Favicon;
- Degraeve Favicon;
Zoals je kunt zien hoef je niet eens een grafisch ontwerper te zijn om dit te maken. Maar wil je een wereldwijde website lanceren met een branding over heel de wereld, dan doe je er verstandig aan om wel een professionele ontwerper in te schakelen om zo iets te laten maken dat past bij jouw merk. Ga je zelf aan de slag, dan heb je ongeveer 10 minuten nodig voor een simpel exemplaar – je hoeft het websitelogo alleen maar te uploaden naar de website die we hiervoor noemden en je kunt direct het bestand downloaden. Zo gemakkelijk is het!
Kijk eens op deze inspirerende websites om ideeën op te doen voor jouw eigen favicon:
Controleer de website op SEO-fouten Geen favicon tast de bruikbaarheid van de website aan, maar het missen van de titel- en beschrijvingstags kan leiden tot verkeersverlies.
Hoe Toevoegen aan de Website?
Heb je het bestand eenmaal klaar, dan is het niet moeilijk om dit op de server te plaatsen. Eerst moet je toegang krijgen van de teksteditor van de broncode van jouw website om hier de HTML-code aan te passen van de website. Hieronder vind je een snelle gids:
- Upload het bestand naar de server. Vul het browseradres in bij de FTP-server. Klik op Enter, log in en upload het bestand naar de broncode.
- Vervolgens verander je de HTML-pagina van de website. Zoek en download ‘header.php’ of ‘index.html’ vanaf de server. Is jouw website gemaakt in HTML, dan voer je de code in bij het head gedeelte van de index.html file:
<link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico"><link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">Een Icoon Maken in Photoshop
Photoshop is een geweldig programma om te werken met afbeeldingen. Het is een handig programma dat jou kan helpen in verschillende omstandigheden en waarmee je zelfs een website op maat kunt maken. Wanneer je een ontwerper bent, is Photoshop het beste programma om te gebruiken. Ben je geen ontwerper, dan raden we je aan om naar de websites te kijken die we eerder genoemd hebben om tijd te besparen. Het probleem is dat Photopshop geen ‘ico’ bestanden ondersteunt. Daarom moet je de plug-in installeren van Telegraphics.
In het selectie menu, folder FILE, moet je een nieuw bestand maken, met een canvas van 64×64 pixels (het is makkelijker om met meer grootte te werken), plak het logo in het document en doe alle aanpassingen die nodig zijn.
Na dit alles, selecteer je IMAGE folder, ga naar IMAGE SIZE en verander het naar 16×16 pixels en vergeet niet om op RESAMPLE IMAGE en BICUBIC SHARPER te klikken om ervoor te zorgen dat de afbeelding niet vervaagt. Ben je blij met de resultaten die je ziet, dan klik je op FILE folder en klik je op SAVE AS.
Conclusie
Dit element is een soort visitekaartje, en moet gemaakt worden in dezelfde stijl als de stijl van de website – hoe meer de website en het icoontje gemeen hebben, hoe beter. Het moet geassocieerd worden met de website – dat is de belangrijkste functie. Daarnaast moet de favicon relevant en duidelijk zijn; de gebruiker moet direct begrijpen wat het is en het moet makkelijk te onthouden zijn.
Een goed gemaakt icoon zorgt ervoor dat de website professioneler oogt. Wil je een sterk merk neerzetten en wil je serieus aan de slag, dan is het maken van een favicon een serieuze bezigheid.
