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.
Deze icoontjes zijn eigenlijk gewoon kleine plaatjes. Oorspronkelijk bedoeld voor in je favorietenlijst, vandaar dat we ze ook wel favicons noemen. Op de 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 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’.
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.
11 reacties
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!
Handig voor websites met een klein budget. Vind dat jullie leuk werk verrichten hier op yourhosting.nl.
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!
Goede tip. Vooral voor beginnende ondernemers.
En hoe gaat dat met jullie pakket MijnWebsite.
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
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!
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!
Dag,
Ik heb het geprobeerd, maar zonder succes. Ik beheer de HTML-website zenboogschieten.nl, maar ben nog een beginner op het gebied van HTML-code: de website is gemaakt door iemand die daar meer verstand van heeft, maar momenteel slecht bereikbaar is.
Ik heb daar een favicon in de 'head'-tag van het index.html-bestand gezet (er zit geen 'public.html' bestand bij de html-bestanden voor deze site), maar de favicon bij de website blijft een soort draadfiguur-wereldbolletje, dat ook bij sommige andere websites wordt weergegeven. Enig idee hoe ik dat oplos?
Hoi Peter,
als ik je bron bekijk heb je 'http://zenboogschieten.nl/Tiger%20Favicon.png' als icoon ingesteld. Opzich is dat goed, maar als ik daar naartoe ga in mijn browser krijg ik een 404 melding.
Kun je kijken of je het bestandje in de juist map hebt gezet?
De melding die de 404 pagina geeft is: The requested URL /zb.boosza.com//Tiger Favicon.png was not found on this server.
Misshien kun je proberen om het favicon bestandje in die map 'zb.boosza.com' te zetten?
Groeten Jeroen
Erg jammer , heb favicon.ico gekopieerd naar html map van website ,zag niets
Daarna nog htmlcode in de Head tag gezet en geüpload zie nog niets
zie bij laden van site wel dat hij iets wil laden maar blijft het bij.
Zou fijn zijn als je me kunt helpen.
bij voorbaat dank
Ad Merks