Jeroen - 18 april 2013

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.

Maak je eigen favicon

Deze icoontjes zijn eigenlijk gewoon kleine plaatjes. Oorspronkelijk bedoeld voor in je favorietenlijst, vandaar dat we ze ook wel favicons noemen. Op de website http://www.favicon.cc maak je zelf vrij eenvoudig je eigen icoontje. Je kunt deze tekenen of je uploadt een foto. Klik daarvoor op de knop ‘Import Image’.

Voorbeeld van het maken van een favicon op favicon.cc

Voor de website van mijn vriendin over grasparkieten heb ik een foto gebruikt van onze grasparkiet Navi. 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’.

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. Op ParkietenVilla zie je dan ook hoe grasparkietje Navi trots het icoontje is!

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 webdesignafdeling je hier graag mee.

Veel succes! Wil je het resultaat laten zien of heb je nog vragen? Laat dan hieronder een reactie achter.

Dit artikel delen op social media

8 reacties

AlleSpreekbeurten.nl on 29 augustus 2013

Bedankt voor dit bericht! Eigenlijk precies wat ik nodig had voor mijn spreekbeurten website welke ik bij jullie host! Ik ga er gelijk mee aan de slag. Handig ook dat jullie dit artikel zo compleet maken met de HTML code voor in de header. Eerlijk is eerlijk: er bestaan goedkopere hostingpartijen, maar ik raad bekenden toch aan om bij jullie hun websites te hosten omdat de service goed is en omdat er veel kennis wordt gedeeld. Dit is daar een goed voorbeeld van. Ga zo door!

Anna on 6 januari 2014

Handig voor websites met een klein budget. Vind dat jullie leuk werk verrichten hier op yourhosting.nl.

Marienelle on 17 maart 2014

Dit is zeer handig voor jullie klanten ja! Zelf kijk ik regelmatig ook op jullie website voor handige tips over design. Dankzij jullie heb ik zelf ook een design bureau ingehuurd om mijn website te ontwerpen en dit was een hele goede tip want het was goed bevallen! Soms is professionele hulp gewoon echt het beste!

Jaap on 19 juli 2014

Goede tip. Vooral voor beginnende ondernemers.

Jan van Schijndel on 5 mei 2016

En hoe gaat dat met jullie pakket MijnWebsite.

Jeroen Peters on 6 mei 2016

Hallo Jan (van Schijndel), eigenlijk heel eenvoudig. Download je favicon van favicon.cc en onthoud waar je hem hebt opgeslagen. Als je dan naar MijnWebsite gaat kun je aan de rechterkant klikken op Instellen. Je krijgt dan een popup met "Site instellingen". Hier staat ook Favicon, als je klikt op het kleine icoontje erachter kun je je favicon uploaden. Als je dan je site weer publiceert staat je favicon erbij. Zou je het me willen laten weten of het werkt?Goed weekend! Jeroen Peters

Red Melon on 11 augustus 2016

1 favicon gold in het pre-iPhone tijdperk. Nu moet je er eigenlijk meerdere hebben. Deze touch icons zijn de favicons van mobiele devices en tablets. Zoek er maar eens op!

Jeroen Peters on 11 augustus 2016

Hoi Red Melon, het is inderdaad waar dat je nu meerdere kunt/moet hebben om ook aparte icons voor je iDevices op te nemen. Dit artikel is bedoeld als basis voor beginnende website bouwers, maar in een vervolg kunnen we de Apple touch icons ook meenemen. Dankjewel voor het delen!

Reageer op deze post

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *