{"id":19353,"date":"2026-05-01T18:37:01","date_gmt":"2026-05-01T16:37:01","guid":{"rendered":"https:\/\/www.hostnet.nl\/academy\/?p=19353"},"modified":"2026-05-01T18:37:03","modified_gmt":"2026-05-01T16:37:03","slug":"favicon-maken","status":"publish","type":"post","link":"https:\/\/www.hostnet.nl\/academy\/favicon-maken","title":{"rendered":"Favicon maken: in 4 stappen een eigen icoontje voor je website"},"content":{"rendered":"\n<p>Als je een eigen website hebt, kom je vroeg of laat het woord favicon tegen. Dat is het kleine icoontje dat naast de paginatitel in je browsertabblad verschijnt. Klein, maar belangrijker dan veel mensen denken. In dit artikel leg ik uit wat een favicon precies is, waarom je er eentje wilt en hoe je in een paar stappen een favicon maakt voor je site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"wat-is-een-favicon\">Wat is een favicon?<\/h2>\n\n\n\n<p>Een favicon is een klein icoontje dat je website vertegenwoordigt in de browser. De naam is een samentrekking van &#8220;favorite icon&#8221;. Je ziet hem op verschillende plekken terug:<\/p>\n\n\n\n<p>in het browsertabblad bovenaan; <\/p>\n\n\n\n<p>in de bladwijzerbalk; <\/p>\n\n\n\n<p>in je browsergeschiedenis; <\/p>\n\n\n\n<p>in de zoekresultaten van Google op mobiel.<\/p>\n\n\n\n<p>De eerste favicon werd in 1999 ge\u00efntroduceerd door Microsoft, in Internet Explorer 5. Sindsdien is hij uitgegroeid tot een vaste webstandaard. Alle moderne browsers ondersteunen favicons.<\/p>\n\n\n\n<div class=\"product-card-multiple grid-row equalheight gutter-margin-top no-margin-bottom\">\n            <div class=\"col col-tab-l-6\">\n            <a class=\"product-card col-box-basic bg-white block-shadow-elevation-hover\" href=\"https:\/\/www.hostnet.nl\/website-maken#product-table-website-builder\" aria-label=\"Meer informatie\">\n                <div class=\"box box-small\">\n                    <img decoding=\"async\" src=\"\/\/atlas.hostnet.nl\/images\/boxes\/WEBSITE_BUILDER-package-small.svg\" alt=\"\">\n                <\/div>\n                <div class=\"box-content list-style-check text-small\">\n                    <h3 class=\"title h-size-18 text-blue\" class=\"title h-size-18 text-blue\" id=\"website-builder\">Website Builder<\/h3>\n                    <p>Je eigen website in slechts 3 stappen. Vandaag nog online.<\/p>\n                    <ul>\n                        <li>Gebruiksvriendelijke drag-and-drop-sitebuilder<\/li>\n                             <li>Ruime keuze uit kant-en-klare-templates<\/li>\n                             <li>Coderen is niet nodig<\/li>                    <\/ul>\n                <\/div>\n                <div class=\"box-footer\">\n                    <div class=\"button button-icon icon-right button-ellipsis\">\n                        <i class=\"svg-icon\" aria-hidden=\"true\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                        <\/i>\n                        <span class=\"btn-text\">Meer informatie<\/span>                    <\/div>\n                <\/div>\n            <\/a>\n        <\/div>\n            <div class=\"col col-tab-l-6\">\n            <a class=\"product-card col-box-basic bg-white block-shadow-elevation-hover\" href=\"https:\/\/www.hostnet.nl\/wordpress-website-maken#product-table-wordpress-website-maken\" aria-label=\"Meer informatie\">\n                <div class=\"box box-small\">\n                    <img decoding=\"async\" src=\"\/\/atlas.hostnet.nl\/images\/boxes\/WHWP-package-small.svg\" alt=\"\">\n                <\/div>\n                <div class=\"box-content list-style-check text-small\">\n                    <h3 class=\"title h-size-18 text-blue\" class=\"title h-size-18 text-blue\" id=\"wordpress-website-maken\">WordPress-website maken<\/h3>\n                    <p>Start eenvoudig een blog of website met \u2018s werelds favoriete cms.<\/p>\n                    <ul>\n                        <li>Ruime keuze uit thema&#8217;s en plugins<\/li>\n                             <li>Automatisch ge\u00efnstalleerd<\/li>\n                             <li>Zakelijke e-mail<\/li>                    <\/ul>\n                <\/div>\n                <div class=\"box-footer\">\n                    <div class=\"button button-icon icon-right button-ellipsis\">\n                        <i class=\"svg-icon\" aria-hidden=\"true\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                        <\/i>\n                        <span class=\"btn-text\">Meer informatie<\/span>                    <\/div>\n                <\/div>\n            <\/a>\n        <\/div>\n    <\/div>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"waarom-een-favicon\">Waarom een favicon?<\/h2>\n\n\n\n<p>Een favicon lijkt een detail. Maar hij doet meer werk dan je verwacht.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hij maakt je website herkenbaar tussen openstaande tabbladen. Heb jij weleens 15 tabs openstaan? Ik wel. Dan is een favicon goud waard om je site terug te vinden.<\/li>\n\n\n\n<li>Hij geeft je site een afgewerkte uitstraling. Een browser die het standaardicoontje toont (bijvoorbeeld van WordPress), geeft een rommelig signaal af. Een eigen favicon laat zien dat je hebt nagedacht over de details.<\/li>\n\n\n\n<li>Hij versterkt je merk. Je favicon staat naast je domeinnaam in zoekresultaten en bladwijzers. Elke keer dat iemand je site terugvindt, ziet hij ook jouw beeldmerk. Gratis exposure, week in week uit.<\/li>\n\n\n\n<li>Wat doet een favicon met je SEO? Direct invloed op je positie in Google heeft hij niet. Indirect kan een herkenbare favicon je doorklikratio (CTR) wel helpen, simpelweg omdat een resultaat met een sterk icoon meer aandacht trekt dan eentje zonder. Google adviseert in zijn <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/favicon-in-search\" target=\"_blank\" rel=\"noreferrer noopener\">offici\u00eble richtlijnen voor Google Search<\/a> dat je favicon visueel representatief moet zijn voor je merk.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"een-favicon-maken-in-4-stappen\">Een favicon maken in 4 stappen<\/h2>\n\n\n\n<p>Goed, naar de praktijk. Je hoeft geen designer te zijn om een goede favicon te maken. Met deze 4 stappen kom je een heel eind.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"stap-1-vertrek-van-je-logo-of-beeldmerk\">Stap 1. Vertrek van je logo of beeldmerk<\/h3>\n\n\n\n<p>De meeste favicons zijn een vereenvoudigde versie van een logo. Vaak werkt alleen het beeldmerk (zonder de tekst), of een initiaal in je merkkleur. Een logo met een complete bedrijfsnaam erin is op 16 bij 16 pixels niet leesbaar. Stel je een visitekaartje voor dat je vanaf 5 meter afstand nog moet kunnen herkennen. Wat blijft er over? Dat is je favicon.<\/p>\n\n\n\n<p>Heb je nog geen logo? Dan is dit het moment om er een te (laten) maken. Een herkenbare visuele identiteit is sowieso de basis als je een website maakt voor je bedrijf.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"stap-2-kies-de-juiste-afmetingen\">Stap 2. Kies de juiste afmetingen<\/h3>\n\n\n\n<p><strong>Een favicon is altijd vierkant. <\/strong>De klassieke maat is 16 bij 16 pixels. In de praktijk werk je beter met een groter bronbestand, zodat je favicon ook scherp blijft op moderne schermen en mobiele apparaten.<\/p>\n\n\n\n<p>Google adviseert een veelvoud van 48 pixels. Denk aan:<\/p>\n\n\n\n<p>48 bij 48 pixels; <\/p>\n\n\n\n<p>96 bij 96 pixels; <\/p>\n\n\n\n<p>144 bij 144 pixels; <\/p>\n\n\n\n<p>180 bij 180 pixels (voor iPhones en iPads, dit heet de Apple Touch Icon).<\/p>\n\n\n\n<section class=\"block-featured gutter-margin-bottom gutter-margin-top gutter-small-padding no-margin-left no-margin-right bg-gray-body\">\n    <div class=\"header center-content-vertically\"><h3 class=\"title\" class=\"title\" id=\"mijn-tip\">Mijn tip:<\/h3><\/div>    <div class=\"description\">\n\n<p>Maak je favicon \u00e9\u00e9n keer in een groot formaat (bijvoorbeeld 512 bij 512 pixels) en exporteer hem daarna naar de kleinere maten die je nodig hebt.<\/p>\n\n<\/div>\n<\/section>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"stap-3-kies-een-bestandsformaat\">Stap 3. Kies een bestandsformaat<\/h3>\n\n\n\n<p>Vroeger was ICO de enige optie. Tegenwoordig heb je meer keus:<\/p>\n\n\n\n<p>PNG. Het meest gebruikte formaat. Levert scherpe icoontjes op, met optionele transparante achtergrond.<\/p>\n\n\n\n<p>SVG. Schaalbaar en blijft op elk scherm haarscherp. De ondersteuning is inmiddels breed.<\/p>\n\n\n\n<p>ICO. Werkt nog steeds en is handig als fallback voor oudere browsers. E\u00e9n bestand kan meerdere maten bevatten.<\/p>\n\n\n\n<p>Veel ondernemers houden het simpel: een PNG voor de browser, eventueel aangevuld met een ICO als fallback.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"stap-4-sla-op-en-plaats-hem-op-je-site\">Stap 4. Sla op en plaats hem op je site<\/h3>\n\n\n\n<p>Hoe je je favicon plaatst, hangt af van hoe je website is gebouwd. Daar kom ik zo op.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"tools-om-zelf-een-favicon-te-ontwerpen\">Tools om zelf een favicon te ontwerpen<\/h2>\n\n\n\n<p>Niet handig met designsoftware? Geen probleem. Er zijn meerdere gratis tools waarmee je een favicon maakt zonder Photoshop of Illustrator te openen.<\/p>\n\n\n\n<p>RealFaviconGenerator. Genereert in 1 keer alle benodigde formaten en codefragmenten voor je. Je uploadt een afbeelding en krijgt een zip-bestand terug met PNG, ICO, Apple Touch Icon en de bijbehorende HTML-snippet.<\/p>\n\n\n\n<p>Favicon.io. Werkt op een vergelijkbare manier. Heeft daarnaast een tool waarmee je een favicon bouwt op basis van een tekst (bijvoorbeeld je initialen) en een achtergrondkleur.<\/p>\n\n\n\n<p>Wil je liever zelf in een ontwerpprogramma werken? Probeer dan eens Canva, GIMP of Figma. Het belangrijkste is dat je eindigt met een vierkant bestand in de juiste afmetingen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"5-ontwerptips-voor-een-favicon-die-werkt\">5 ontwerptips voor een favicon die werkt<\/h2>\n\n\n\n<p>Een favicon ontwerpen is lastiger dan het lijkt. Op postzegelformaat moet alles kloppen.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Hou het simpel. Een favicon van 16 bij 16 pixels heeft geen ruimte voor fijne lijnen of textuur. Werk met 1 duidelijk symbool, 1 lettervorm of een basale vorm.<\/li>\n\n\n\n<li>Vermijd tekst, of beperk je tot 1 of 2 letters. Een complete bedrijfsnaam is niet leesbaar. De initialen van je merk in een sterke kleur werken vaak beter dan een gekrompen logo.<\/li>\n\n\n\n<li>Zet contrast in. Je favicon verschijnt op witte tabbladen, donkere bookmark-balken en grijze geschiedenisschermen. Zorg dat hij overal opvalt.<\/li>\n\n\n\n<li>Blijf trouw aan je huisstijl. Je favicon, je logo en je website moeten bij elkaar passen. Dezelfde kleur, dezelfde toon, dezelfde sfeer.<\/li>\n\n\n\n<li>Test op meerdere plekken. Bekijk je favicon in een licht \u00e9n donker browsertabblad, in mobiele zoekresultaten van Google en op een snelkoppeling op je telefoon. Pas dan zie je of hij overal overeind blijft.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"een-favicon-plaatsen-in-wordpress\">Een favicon plaatsen in WordPress<\/h2>\n\n\n\n<p>Werk je met WordPress? Dan is je favicon in een paar klikken geregeld. Vanaf WordPress versie 4.3 heet de favicon het &#8220;site-icoon&#8221;.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Log in op je WordPress-dashboard.<\/li>\n\n\n\n<li>Ga in het menu naar &#8220;Weergave&#8221; en kies &#8220;Customizer&#8221;.<\/li>\n\n\n\n<li>Open &#8220;Site-identiteit&#8221;.<\/li>\n\n\n\n<li>Upload je afbeelding bij &#8220;Site-icoon&#8221; en sla de wijzigingen op.<\/li>\n<\/ol>\n\n\n\n<p>WordPress regelt vervolgens zelf dat het juiste icoon op de juiste plek wordt getoond, in alle benodigde formaten. Werk je nog niet met WordPress en denk je erover na? Dan kun je beginnen met <a href=\"https:\/\/www.hostnet.nl\/wordpress-hosting\">WordPress hosting<\/a> bij Hostnet. Wij installeren WordPress voor je en je krijgt meteen een https-verbinding en zakelijke e-mail erbij.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"een-favicon-toevoegen-in-website-builder\">Een favicon toevoegen in Website Builder<\/h2>\n\n\n\n<p>Gebruik je onze Website Builder? Dan gaat het nog iets sneller.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Log in op de Website Builder-editor.<\/li>\n\n\n\n<li>Klik via het menu rechtsboven op &#8220;Instellingen&#8221; in het linkermenu.<\/li>\n\n\n\n<li>Klik bij &#8220;Favicon&#8221; op &#8220;Afbeelding toevoegen&#8221;.<\/li>\n\n\n\n<li>Kies een afbeelding uit je webruimte of upload een nieuw bestand.<\/li>\n\n\n\n<li>Klik op &#8220;Voeg toe aan pagina&#8221;, sla op en publiceer.<\/li>\n<\/ol>\n\n\n\n<p>Je favicon is nu zichtbaar voor je bezoekers. Kom je er niet uit, lees dan dit <a href=\"https:\/\/helpdesk.hostnet.nl\/hc\/nl-nl\/articles\/4410745071889-Favicon-toevoegen-aan-Website-Builder\">helpdeskartikel<\/a>.<\/p>\n\n\n\n<section class=\"block-featured gutter-margin-bottom gutter-margin-top gutter-small-padding no-margin-left no-margin-right bg-gray-body\">\n    <div class=\"header center-content-vertically\"><i class=\"svg-icon icon-small icon-right-margin\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M19.9,8.6 C19.9,11.1592801 18.6026492,13.5380886 16.5527427,14.9956715 L15.5654263,16.7010363 C15.2887116,17.178998 14.6769255,17.342141 14.1989637,17.0654263 C13.721002,16.7887116 13.557859,16.1769255 13.8345737,15.6989637 L14.9345737,13.7989637 C15.0114009,13.6662622 15.117716,13.5530056 15.2452998,13.4679497 C16.8661977,12.3873511 17.9,10.5547015 17.9,8.6 C17.9,5.41533103 15.3110865,2.8 12.1,2.8 C8.85228475,2.8 6.3,5.35228475 6.3,8.6 C6.3,10.5861438 7.26281652,12.3102572 8.96468392,13.4746927 C9.08787677,13.5589826 9.19063707,13.6697824 9.26542629,13.7989637 L10.3654263,15.6989637 C10.642141,16.1769255 10.478998,16.7887116 10.0010363,17.0654263 C9.52307453,17.342141 8.91128841,17.178998 8.63457371,16.7010363 L7.64474819,14.9913376 C5.52872065,13.4630759 4.3,11.1882704 4.3,8.6 C4.3,4.24771525 7.74771525,0.8 12.1,0.8 C16.4202267,0.8 19.9,4.31528122 19.9,8.6 Z M10.5,23 C9.94771525,23 9.5,22.5522847 9.5,22 C9.5,21.4477153 9.94771525,21 10.5,21 L13.6,21 C14.1522847,21 14.6,21.4477153 14.6,22 C14.6,22.5522847 14.1522847,23 13.6,23 L10.5,23 Z M8.9,20.2 C8.34771525,20.2 7.9,19.7522847 7.9,19.2 C7.9,18.6477153 8.34771525,18.2 8.9,18.2 L15.2,18.2 C15.7522847,18.2 16.2,18.6477153 16.2,19.2 C16.2,19.7522847 15.7522847,20.2 15.2,20.2 L8.9,20.2 Z\"\/><\/svg><\/i><h3 class=\"title\" class=\"title\" id=\"mijn-tip\">Mijn tip<\/h3><\/div>    <div class=\"description\">\n\n<p>Kies een vierkante afbeelding van minimaal 32 bij 32 pixels. Het liefst je beeldmerk of een opvallende initiaal.<\/p>\n\n<\/div>\n<\/section>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"een-favicon-toevoegen-via-html-of-ftp\">Een favicon toevoegen via HTML of FTP<\/h2>\n\n\n\n<p>Heb je je website laten bouwen door een ontwikkelaar? Of werk je zelf in de code? Dan voeg je je favicon zelf toe in de HTML. In de &lt;head> van je homepage plaats je een regel als deze:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon.png\"><\/code><\/pre>\n\n\n\n<p>Voor een SVG-versie of een ICO-fallback voeg je een extra regel toe. Het bestand zelf upload je naar de root van je webhosting. Dat is dezelfde map waar ook je index.html of WordPress-installatie staat. Dat doe je via een FTP-client zoals FileZilla, of via de File Manager bij je <a href=\"https:\/\/www.hostnet.nl\/webhosting\">hostingpakket<\/a>. Host je je website bij Hostnet? Dan vind je in Mijn Hostnet de juiste tools om je bestanden te beheren.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"mijn-favicon-werkt-niet-wat-nu\">Mijn favicon werkt niet: wat nu?<\/h2>\n\n\n\n<p>Je hebt alles ingesteld, maar in je browser of in Google verschijnt nog steeds het oude icoon. Of een leeg veldje. Frustrerend. En meestal goed op te lossen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"je-browser-laat-een-oude-versie-zien\">Je browser laat een oude versie zien<\/h3>\n\n\n\n<p>Browsers slaan favicons op in hun cache. Open je website in een incognitovenster of leeg de cache van je browser. Vaak zie je dan meteen je nieuwe icoon.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"google-heeft-het-nog-niet-opgepakt\">Google heeft het nog niet opgepakt<\/h3>\n\n\n\n<p>Voor zoekresultaten kan het meerdere dagen tot enkele weken duren voordat Google je nieuwe favicon indexeert. Een herindexeringsverzoek via Google Search Console kan helpen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"het-bestand-staat-niet-in-de-juiste-map\">Het bestand staat niet in de juiste map<\/h3>\n\n\n\n<p>Je favicon hoort in de hoofdmap (de root) van je domein te staan. Staat hij in een submap? Dan vindt Google hem mogelijk niet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"het-formaat-klopt-niet\">Het formaat klopt niet<\/h3>\n\n\n\n<p>Een niet-vierkante afbeelding of een te klein bestand wordt door Google overgeslagen. Vierkant en minimaal 8 bij 8 pixels, met een voorkeur voor formaten van 48 pixels en hoger.<\/p>\n\n\n\n<div class=\"product-card-multiple grid-row equalheight gutter-margin-top no-margin-bottom\">\n            <div class=\"col col-tab-l-6\">\n            <a class=\"product-card col-box-basic bg-white block-shadow-elevation-hover\" href=\"https:\/\/www.hostnet.nl\/website-maken#product-table-website-builder\" aria-label=\"Meer informatie\">\n                <div class=\"box box-small\">\n                    <img decoding=\"async\" src=\"\/\/atlas.hostnet.nl\/images\/boxes\/WEBSITE_BUILDER-package-small.svg\" alt=\"\">\n                <\/div>\n                <div class=\"box-content list-style-check text-small\">\n                    <h3 class=\"title h-size-18 text-blue\" class=\"title h-size-18 text-blue\" id=\"website-builder\">Website Builder<\/h3>\n                    <p>Je eigen website in slechts 3 stappen. Vandaag nog online.<\/p>\n                    <ul>\n                        <li>Gebruiksvriendelijke drag-and-drop-sitebuilder<\/li>\n                             <li>Ruime keuze uit kant-en-klare-templates<\/li>\n                             <li>Coderen is niet nodig<\/li>                    <\/ul>\n                <\/div>\n                <div class=\"box-footer\">\n                    <div class=\"button button-icon icon-right button-ellipsis\">\n                        <i class=\"svg-icon\" aria-hidden=\"true\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                        <\/i>\n                        <span class=\"btn-text\">Meer informatie<\/span>                    <\/div>\n                <\/div>\n            <\/a>\n        <\/div>\n            <div class=\"col col-tab-l-6\">\n            <a class=\"product-card col-box-basic bg-white block-shadow-elevation-hover\" href=\"https:\/\/www.hostnet.nl\/wordpress-website-maken#product-table-wordpress-website-maken\" aria-label=\"Meer informatie\">\n                <div class=\"box box-small\">\n                    <img decoding=\"async\" src=\"\/\/atlas.hostnet.nl\/images\/boxes\/WHWP-package-small.svg\" alt=\"\">\n                <\/div>\n                <div class=\"box-content list-style-check text-small\">\n                    <h3 class=\"title h-size-18 text-blue\" class=\"title h-size-18 text-blue\" id=\"wordpress-website-maken\">WordPress-website maken<\/h3>\n                    <p>Start eenvoudig een blog of website met \u2018s werelds favoriete cms.<\/p>\n                    <ul>\n                        <li>Ruime keuze uit thema&#8217;s en plugins<\/li>\n                             <li>Automatisch ge\u00efnstalleerd<\/li>\n                             <li>Zakelijke e-mail<\/li>                    <\/ul>\n                <\/div>\n                <div class=\"box-footer\">\n                    <div class=\"button button-icon icon-right button-ellipsis\">\n                        <i class=\"svg-icon\" aria-hidden=\"true\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                        <\/i>\n                        <span class=\"btn-text\">Meer informatie<\/span>                    <\/div>\n                <\/div>\n            <\/a>\n        <\/div>\n    <\/div>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"klein-detail-blijvende-indruk\">Klein detail, blijvende indruk<\/h2>\n\n\n\n<p>Een favicon is geen prijswinnend designproject. Maar hij hoort wel bij de basis van een afgewerkte website, net zoals een <a href=\"https:\/\/www.hostnet.nl\/domeinnaam-registreren\">eigen domeinnaam<\/a> en een <a href=\"https:\/\/www.hostnet.nl\/academy\/zakelijke-email-aanmaken\">zakelijk e-mailadres<\/a>. Het zijn juist die kleine onderdelen die samen bepalen hoe professioneel jouw site overkomt op een bezoeker.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"twintig-minuten-werk-een-blijvende-indruk\">Twintig minuten werk, een blijvende indruk.<\/h2>\n\n\n\n<p>Heb jij nog tips om een goede favicon te maken? Of liep je tegen iets aan toen je er eentje plaatste op je site? Laat het hieronder weten in een reactie!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Als je een eigen website hebt, kom je vroeg of laat het woord favicon tegen. Dat is het kleine icoontje&hellip; <a class=\"more-link\" href=\"https:\/\/www.hostnet.nl\/academy\/favicon-maken\">Lees verder <span class=\"screen-reader-text\">Favicon maken: in 4 stappen een eigen icoontje voor je website<\/span><\/a><\/p>\n","protected":false},"author":85,"featured_media":19356,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[34],"class_list":["post-19353","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website","tag-design","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Favicon maken: in 4 stappen een eigen icoontje voor je website | Hostnet<\/title>\n<meta name=\"description\" content=\"Een favicon maken is in een paar stappen geregeld. Ontdek welke afmetingen en tools je nodig hebt en hoe je &#039;m op je website plaatst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostnet.nl\/academy\/favicon-maken\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Favicon maken: in 4 stappen een eigen icoontje voor je website | Hostnet\" \/>\n<meta property=\"og:description\" content=\"Een favicon maken is in een paar stappen geregeld. Ontdek welke afmetingen en tools je nodig hebt en hoe je &#039;m op je website plaatst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnet.nl\/academy\/favicon-maken\" \/>\n<meta property=\"og:site_name\" content=\"Hostnet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Hostnetbv\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-01T16:37:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-01T16:37:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2026\/05\/favicon-maken.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joris van de Wolfshaar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hostnet\" \/>\n<meta name=\"twitter:site\" content=\"@hostnet\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joris van de Wolfshaar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuten\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Favicon maken: in 4 stappen een eigen icoontje voor je website | Hostnet","description":"Een favicon maken is in een paar stappen geregeld. Ontdek welke afmetingen en tools je nodig hebt en hoe je 'm op je website plaatst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostnet.nl\/academy\/favicon-maken","og_locale":"nl_NL","og_type":"article","og_title":"Favicon maken: in 4 stappen een eigen icoontje voor je website | Hostnet","og_description":"Een favicon maken is in een paar stappen geregeld. Ontdek welke afmetingen en tools je nodig hebt en hoe je 'm op je website plaatst.","og_url":"https:\/\/www.hostnet.nl\/academy\/favicon-maken","og_site_name":"Hostnet","article_publisher":"https:\/\/www.facebook.com\/Hostnetbv\/","article_published_time":"2026-05-01T16:37:01+00:00","article_modified_time":"2026-05-01T16:37:03+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2026\/05\/favicon-maken.jpg","type":"image\/jpeg"}],"author":"Joris van de Wolfshaar","twitter_card":"summary_large_image","twitter_creator":"@hostnet","twitter_site":"@hostnet","twitter_misc":{"Geschreven door":"Joris van de Wolfshaar","Geschatte leestijd":"8 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnet.nl\/academy\/favicon-maken#article","isPartOf":{"@id":"https:\/\/www.hostnet.nl\/academy\/favicon-maken"},"author":{"name":"Joris van de Wolfshaar","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/person\/9ef1683032d6fef2e52a1ef64ea4c4f8"},"headline":"Favicon maken: in 4 stappen een eigen icoontje voor je website","datePublished":"2026-05-01T16:37:01+00:00","dateModified":"2026-05-01T16:37:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnet.nl\/academy\/favicon-maken"},"wordCount":1460,"commentCount":0,"publisher":{"@id":"https:\/\/www.hostnet.nl\/academy\/#organization"},"image":{"@id":"https:\/\/www.hostnet.nl\/academy\/favicon-maken#primaryimage"},"thumbnailUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2026\/05\/favicon-maken.jpg","keywords":["Design"],"articleSection":["Website"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnet.nl\/academy\/favicon-maken#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnet.nl\/academy\/favicon-maken","url":"https:\/\/www.hostnet.nl\/academy\/favicon-maken","name":"Favicon maken: in 4 stappen een eigen icoontje voor je website | Hostnet","isPartOf":{"@id":"https:\/\/www.hostnet.nl\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnet.nl\/academy\/favicon-maken#primaryimage"},"image":{"@id":"https:\/\/www.hostnet.nl\/academy\/favicon-maken#primaryimage"},"thumbnailUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2026\/05\/favicon-maken.jpg","datePublished":"2026-05-01T16:37:01+00:00","dateModified":"2026-05-01T16:37:03+00:00","description":"Een favicon maken is in een paar stappen geregeld. Ontdek welke afmetingen en tools je nodig hebt en hoe je 'm op je website plaatst.","breadcrumb":{"@id":"https:\/\/www.hostnet.nl\/academy\/favicon-maken#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnet.nl\/academy\/favicon-maken"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.hostnet.nl\/academy\/favicon-maken#primaryimage","url":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2026\/05\/favicon-maken.jpg","contentUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2026\/05\/favicon-maken.jpg","width":1920,"height":1280,"caption":"Favicon maken"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnet.nl\/academy\/favicon-maken#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnet.nl\/academy\/"},{"@type":"ListItem","position":2,"name":"Favicon maken: in 4 stappen een eigen icoontje voor je website"}]},{"@type":"WebSite","@id":"https:\/\/www.hostnet.nl\/academy\/#website","url":"https:\/\/www.hostnet.nl\/academy\/","name":"Hostnet","description":"Haal meer uit je online succes met handige tips en tricks","publisher":{"@id":"https:\/\/www.hostnet.nl\/academy\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostnet.nl\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/www.hostnet.nl\/academy\/#organization","name":"Hostnet","url":"https:\/\/www.hostnet.nl\/academy\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2021\/11\/Hostnet-logo2021-RGB-Leftcloud.png","contentUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2021\/11\/Hostnet-logo2021-RGB-Leftcloud.png","width":581,"height":99,"caption":"Hostnet"},"image":{"@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Hostnetbv\/","https:\/\/x.com\/hostnet","https:\/\/www.instagram.com\/hostnetbv\/","https:\/\/nl.linkedin.com\/company\/hostnet-bv","https:\/\/nl.pinterest.com\/hostnet\/","https:\/\/www.youtube.com\/channel\/UCiMHZBSkh8FKopNquGmzgyQ"]},{"@type":"Person","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/person\/9ef1683032d6fef2e52a1ef64ea4c4f8","name":"Joris van de Wolfshaar","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf5ed46ae7072d6c8329c16056bef329d0e8c30c32d7efdcd2edbf0beb5cb823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf5ed46ae7072d6c8329c16056bef329d0e8c30c32d7efdcd2edbf0beb5cb823?s=96&d=mm&r=g","caption":"Joris van de Wolfshaar"},"description":"Joris van de Wolfshaar is Marketing Lead bij Hostnet. Hij houdt zich voornamelijk bezig met de website, online campagnes en vindbaarheid. Voor hem vormen deze werkzaamheden een mooie combinatie van zijn interesses in design, marketing en techniek.","sameAs":["https:\/\/www.linkedin.com\/in\/joris-van-de-wolfshaar-33b1243a\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts\/19353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/comments?post=19353"}],"version-history":[{"count":9,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts\/19353\/revisions"}],"predecessor-version":[{"id":19372,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts\/19353\/revisions\/19372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/media\/19356"}],"wp:attachment":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/media?parent=19353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/categories?post=19353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/tags?post=19353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}