Je eigen website-icoontje in een handomdraai
Je ziet ze wel eens voorbij komen als je surft op het web; vrolijke icoontjes in de adresbalk of tabbladen. Website herken je direct aan dit icoontje, ook wel favicon genoemd. Veel websites hebben ze: Google, Nu.nl, Startpagina en natuurlijk ook Yourhosting! Denk je nu, dat wil ik ook?! Lees dan gauw verder.
Wat is een favicon en waarom zou je het toevoegen?
Een favicon is een klein pictogram dat je ziet in de browser-tabbladen en bladwijzers van een website. Het is een visueel logo dat herkenbaar is voor je website en kan helpen om je merk te versterken. Favicon-afbeeldingen zijn meestal erg klein en moeten worden opgeslagen in het .ico-formaat. Ze kunnen bestaan uit een afbeelding, zoals een bedrijfslogo of een vereenvoudigde versie van het logo. Zo gebruiken wij bij Yourhosting een herkenbaar logo in onze huisstijl met de eerste letter van onze naam.
Het toevoegen van een favicon heeft verschillende voordelen. Ten eerste zorgt het voor een professionele uitstraling van je website. Het geeft je website meer herkenbaarheid en onderscheidt jouw website van andere tabs in de browser.
Daarnaast vergroot het de gebruiksvriendelijkheid voor de gebruikers, omdat ze snel kunnen zien welke tab bij welke website hoort. Bovendien kan een favicon ook dienen als een visuele herkenning voor je merk. Het toevoegen van een favicon is een kleine maar waardevolle toevoeging aan je website.
Maak je eigen favicon met online tool
Deze icoontjes zijn eigenlijk gewoon kleine plaatjes. Oorspronkelijk bedoeld voor in je favorietenlijst, vandaar dat we ze ook wel favicons noemen. Op deze website maak je zelf vrij eenvoudig je eigen icoontje. Je kunt deze tekenen of je uploadt een foto. Klik daarvoor op de knop ‘Import Image’.
Voor de website van Yourhosting hebben wij onze icon met de Y gebruikt. Na het uploaden zie je direct een nieuwe pagina met een voorbeeld van de favicon. Scroll je naar beneden, dan wordt een voorbeeld getoond van hoe het icoontje eruit komt te zien, erg handig!
Werk eventueel het icoontje bij (tip: de optie ’transparant’) en sla deze op met de knop ‘Download Favicon’.
Favicon maken met Photoshop
Het maken van een favicon in Photoshop is een eenvoudig proces. Allereerst open je een nieuw document in Photoshop met de afmetingen van 16×16 pixels. Vervolgens kun je het ontwerp van je favicon maken, gebruikmakend van verschillende gereedschappen en effecten van Photoshop.
Het is belangrijk om te onthouden dat een favicon klein is, dus het is aan te raden om te werken met eenvoudige vormen en duidelijke lijnen. Zodra je tevreden bent met het ontwerp, sla je het bestand op als een .ico-bestand. Tenslotte upload je het .ico-bestand naar je website en voeg je de code toe aan de header van je website om de favicon te tonen.
Heb jezelf geen Photoshop? Dan is het ook mogelijk om een favicon te maken in Canva of Figma. Lees meer over De 3 beste alternatieven voor Photoshop.
Zet je favicon online
In de meeste gevallen is het voldoende om dit bestandje (favicon.ico) te uploaden via FTP (of via onze ‘Bestandsbeheer en editor’ in de Hostingmanager) naar de public_html-map van je domeinnaam. Bezoek je website om te zien of het icoontje wordt geladen.
Zie je het icoontje nog niet? Zet dan de volgende code in de HTML van jouw website, doe dat in de <head>-tag.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Heb je een pakket zoals WordPress of Joomla! en kom je er niet helemaal uit? Dan helpt onze webmaster team je hier graag mee.
Favicon toevoegen aan je WordPress website (template of plugin)
Er zijn voor WordPress verschillende opties om een favicon toe te voegen aan je website, mocht je het via de WordPress backend willen doen. We leggen je stap voor stap uit hoe je een favicon kunt integreren in je website, of je nu gebruik maakt van een bestaand template of een handige plugin.
Favicon toevoegen vanuit een template (WordPress)
Het toevoegen van een favicon aan een WordPress-website is een vrij eenvoudig proces. Hier is hoe je een favicon aan je WordPress-website kunt toevoegen met behulp van een template:
1.Bereid je favicon voor:
Zorg ervoor dat je een afbeelding hebt die je als favicon wilt gebruiken. Favicon-afbeeldingen zijn meestal 16×16 pixels of 32×32 pixels groot en moeten worden opgeslagen in een ondersteund bestandsformaat, zoals .ico, .png, of .jpg.
2. Log in op je WordPress-dashboard:
Ga naar de adminpagina van je WordPress-website door /wp-admin aan de URL van je website toe te voegen. Log in met je beheerdersaccount.
3. Ga naar het Customizer-menu:
In het WordPress-dashboard ga je naar “Weergave” en klik je op “Customizer”.
4. Vind het Favicon-instellingenmenu:
Afhankelijk van je template, kan het Favicon-instellingenmenu zich op verschillende plaatsen bevinden. Meestal is het te vinden onder de sectie “Site-identiteit” of “Algemeen”.
5. Upload je favicon:
In het Favicon-instellingenmenu zou je een optie moeten vinden om je favicon afbeelding te uploaden. Klik op deze optie en upload de voorbereide favicon-afbeelding vanaf je computer.
6. Pas de wijzigingen toe:
Nadat je de favicon hebt geüpload, klik je meestal op een knop met “Wijzigingen opslaan” of een vergelijkbare tekst om je wijzigingen toe te passen.
7. Controleer je website:
Open je website in een browser en kijk naar het tabblad. Je zou nu het nieuwe favicon moeten zien. Houd er rekening mee dat het even kan duren voordat de wijzigingen op alle apparaten en browsers worden weergegeven vanwege browsercaching.
Het exacte proces kan variëren afhankelijk van het WordPress-template dat je gebruikt, maar over het algemeen zijn de stappen hetzelfde. Raadpleeg ook de documentatie van het specifieke template voor gedetailleerde instructies als je problemen ondervindt.
Favicon toevoegen met een plugin
Het toevoegen van een favicon aan je WordPress-website met behulp van een plugin is ook een handige optie. Hier is een beknopte uitleg van hoe je dit kunt doen met de “All in One Favicon” plugin als voorbeeld:
1.Plugin installeren:
Ga naar het WordPress-dashboard en navigeer naar “Plugins” > “Nieuwe plugin”. Zoek naar “All in One Favicon” en klik op “Nu installeren”. Activeer de plugin na de installatie.
2. Ga naar de plugin-instellingen:
Nadat je de plugin hebt geactiveerd, zou je een nieuw menu-item genaamd “Favicon” in het WordPress-dashboard moeten zien. Klik hierop om naar de plugin-instellingen te gaan.
3.Upload je favicon:
In de “All in One Favicon” instellingen, zou je een optie moeten vinden om je favicon-afbeelding te uploaden. Upload de afbeelding die je wilt gebruiken als favicon. Deze afbeelding kan in verschillende formaten zijn, zoals .ico, .png, of .jpg.
4.Pas instellingen aan (optioneel):
De plugin biedt meestal enkele aanvullende instellingen, zoals de mogelijkheid om de grootte van de favicon aan te passen. Je kunt deze instellingen naar wens configureren.
5. Sla wijzigingen op:
Nadat je je instellingen hebt geconfigureerd, vergeet niet om je wijzigingen op te slaan.
6. Controleer je website:
Open je website in een browser en kijk naar het tabblad. Je zou nu het nieuwe favicon moeten zien. Vergeet niet dat het even kan duren voordat de wijzigingen overal worden weergegeven vanwege browsercaching.
Houd er rekening mee dat er verschillende favicon-plugins beschikbaar kunnen zijn, en de exacte stappen kunnen variëren afhankelijk van de gekozen plugin. Raadpleeg de documentatie van de specifieke plugin die je hebt gekozen voor gedetailleerde instructies en opties.