Hoe maak je een favicon van een logo (alle maten uitgelegd)

Om een favicon van een logo te maken, begin je met een vierkant logo (SVG, of een PNG van 512x512 of groter). Exporteer een favicon.ico, bij voorkeur met 16, 32 en 48px versies erin, voeg vervolgens een 180x180 Apple-pictogram en 192/512 PNG’s toe voor het manifest, en koppel ze in je HTML. Dat zijn vijf bestanden (ICO, SVG, Apple-pictogram en twee manifest-PNG’s), geen dozijn. Hier is hoe je elk maakt en waar het hoort.

Het korte antwoord: de favicon-bestanden die je nodig hebt

De moderne minimale set bestaat uit één ICO, één SVG, één Apple-touch-icon en twee manifest-PNG’s. Aparte 16/32/48 PNG-bestanden en Microsoft-tegelafbeeldingen zijn onnodig wanneer je een multi-size ICO hebt.

Veel generators geven je een ZIP met een dozijn bestanden, waarvan de meeste browsers niet opvragen. Een 512x512-master is meer dan genoeg, dus je hoeft nooit groter te gaan.

Faviconmaten uitgelegd: waar elk voor dient

favicon.ico (16, 32, 48)

ICO is een container die meerdere bitmaps in één bestand bevat. De gebruikelijke kwaliteitsbundel is 16, 32 en 48px; voeg 256 alleen toe als je om grote Windows-pictogrammen geeft.

Het is nog steeds de moeite waard om te hebben. Crawlers, feedlezers en link-preview-bots halen standaard /favicon.ico op van de site-root. Chromium gedraagt zich anders: in een gepubliceerde verzoektest haalde het /favicon.ico alleen op wanneer de pagina geen pictogram declareerde. Met een gedeclareerde SVG vroeg het alleen de SVG op, en gaf het de voorkeur aan de ICO boven standalone PNG-links.

Sla de standalone 32x32 PNG over. Sommige handleidingen noemen deze, maar die test liet zien dat deze ongebruikt bleef wanneer een ICO aanwezig is. De test dekte alleen Chromium, dus het gedrag van Firefox en Safari is niet getest.

favicon.svg

SVG-favicons werken in Chrome 80+, Firefox 41+ en Edge. Safari-ondersteuning is recent en onregelmatig, en SVG-favicons werken niet in Safari op iOS. Behandel SVG als aanvulling, nooit als vervanging voor de ICO.

apple-touch-icon (180x180)

180x180 is de Retina-iPhone-grootte (60pt bij 3x). Eén 180px-bestand is genoeg: iOS schaalt dit voor andere apparaten, inclusief iPad.

Manifestpictogrammen (192 en 512)

Android Chrome en geïnstalleerde webapps lezen pictogrammen uit het webapp-manifest. Het 192px-bestand is het launcherpictogram en het 512px-bestand is het installatie-/splashpictogram.

Wat Google Zoeken nodig heeft

Google leest het pictogram van je startpagina. Elk geldig favicon-formaat werkt, waaronder ICO, PNG en SVG. Het moet vierkant zijn en minimaal 8x8px. Google adviseert groter dan 48x48, in veelvouden van 48, en je krijgt één pictogram per hostnaam. Als het pictogram niet geschikt is, vervangt Google het door een generiek wereldbolletje.

Bereid je logo voor voordat je exporteert

Vierkant, groot en transparant

De beste bron is een SVG. Gebruik anders een vierkant PNG van 512x512 of groter. Schaal alleen omlaag: van 1024px naar 16px behoudt randdetails, van 32px naar 16px niet, en omhoog schalen levert alleen maar onscherpte op.

Is je logo niet vierkant, snij het dan eerst bij of vul het aan met de bijsnijd- en resizetools van Tool Cloud.

Houd de PNG transparant en in sRGB. Plak hem niet samen of voeg geen achtergrond toe "voor het geval".

Kan een favicon een JPG zijn? Ja, maar PNG of SVG is schoner. JPG heeft geen transparantie, dus een JPG-naar-ICO-conversie geeft je een gevuld vierkant, en compressie-artefacten vallen op bij kleine maten.

Vereenvoudig voor 16 pixels

Een volledig logo met een tagline wordt slappe pap in een browsertab. Wat wel werkt:

• Eén vet symbool met sterk contrast
• Twee of drie vlakke kleuren
• Maximaal één of twee dikke tekens, geen woordmerk

Test op ware grootte. Als je het niet binnen een halve seconde herkent, vereenvoudig dan verder.

Tip: gebruik twee afbeeldingen voor de beste ICO

Voor maximale kwaliteit gebruik je een vereenvoudigd ontwerp voor de maten 16 en 32 en een gedetailleerder ontwerp voor 48 en 256. Bouw twee ICO’s en gebruik de vereenvoudigde als favicon.ico en de gedetailleerde voor Windows-snelkoppelingen. Dit is optioneel, en een enkel goed vereenvoudigd logo is prima voor de meeste sites.

Converteer je logo naar ICO en de rest van de pack

Optie 1: genereer een favicon-pack

Open Tool Cloud's Favicon Generator, upload je vierkant logo en download de ZIP met standaard faviconmaten. Gebruik de bestanden die overeenkomen met de tabel hierboven, en maak eventuele ontbrekende bestanden (zoals de SVG of de 192/512 PNG’s) apart. Negeer alle bestanden waarnaar je HTML niet verwijst.

Optie 2: converteer een logo naar een enkele ICO

Wil je alleen favicon.ico, gebruik dan de Image to ICO converter. Upload je logo en converteer, hernoem het resultaat vervolgens naar favicon.ico. Controleer welke maten de ICO bevat; mist hij een 16 of 32px-versie, gebruik dan de generator hierboven.

De 180, 192 en 512 PNG’s maken

Resizer je vierkante master naar 180x180, 192x192 en 512x512 en noem ze apple-touch-icon.png, icon-192.png en icon-512.png.

Gebruik voor het Apple-pictogram een ondoorzichtige achtergrond waarop het logo gecentreerd staat met wat ruimte eromheen. iOS respecteert geen transparantie en rondt de hoeken zelf af, dus rond de hoeken niet vooraf af. Lever altijd je eigen effen achtergrond aan in plaats van te vertrouwen op wat iOS invult.

Waar elk bestand in je HTML thuishoort

De HTML-snippet

Upload alle bestanden naar de root van je site, en voeg dit toe aan de <head>. De sizes attributen volgen een uitleg over hoe Chrome pictogrammen kiest:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">

Enkele opmerkingen:

• Gebruik rel="icon". rel="shortcut icon" is verouderd; "shortcut" heeft geen officiële betekenis en is overbodig.
• Browsers kiezen op basis van type, niet op positie, dus de volgorde is niet cruciaal. Het type="image/svg+xml"-attribuut zorgt ervoor dat browsers die SVG niet ondersteunen, het overslaan en de ICO gebruiken.
• Geef de ICO een concrete grootte en geef de SVG sizes="any". Door any op de ICO te zetten, kan Chrome deze boven de SVG verkiezen.

De web app manifest

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Chrome's installatiecriteria vereisen zowel de 192px- als de 512px-iconen. Vermijd "purpose": "any maskable" op één enkel bestand. Maak voor een maskable icoon een apart bestand met de afbeelding binnen de veilige zone in het midden (ongeveer 409x409 van het 512-pixel canvas).

Voeg een favicon toe in WordPress, Squarespace, Shopify en Wix

Platforms hernoemen menu's, dus controleer wat je dashboard aangeeft.

• WordPress: Weergave, Aanpassen, Site-identiteit, Pictogram site. Upload een 512x512 PNG.
• Squarespace: Ontwerp, Browserpictogram. Een vierkante PNG van 300x300 werkt (ICO wordt ook geaccepteerd).
• Shopify: Thema-instellingen, Favicon. Upload een vierkant PNG-bestand van 512x512.
• Wix: Instellingen, Website-instellingen, Favicon (dit kan een premium-abonnement vereisen).

Waarom je favicon wazig lijkt of niet bijwerkt

Wazige pictogrammen of pictogrammen die als effen vierkant verschijnen

Waas ontstaat meestal door het opschalen van een kleine rasterafbeelding of door een te gedetailleerd logo op 16px. Los dit op met een SVG plus 32px of groter in de ICO, en schaal een 16x16 nooit op. Een effen vierkant achter je logo betekent dat de bron geen transparantie had, vaak een JPG.

Oud pictogram wordt nog steeds weergegeven

Browsers cachen favicons dagen of weken lang. Probeer deze stappen in deze volgorde:

1. Doe een harde refresh van de pagina.
2. Open /favicon.ico direct en vernieuw daar.
3. Voeg een querystring toe, zoals /favicon.ico?v=2.
4. Controleer in een incognitovenster.
5. Verifieer dat het bestand HTTP 200 retourneert en wis je CDN-cache.

iOS-home-screen-iconen worden per snelkoppeling gecached, dus bestaande snelkoppelingen wijzigen niet en gebruikers moeten de site opnieuw toevoegen. Gebruik voor een rebranding een nieuwe bestandsnaam.

Google Search toont hem niet

Updates kunnen dagen tot weken duren, en het wijzigen van de URL van het pictogram kan ze vertragen. Zorg ervoor dat je homepage naar het pictogram verwijst met rel="icon" en dat het voldoet aan de hierboven genoemde regels voor afmetingen. Er is geen vastgestelde harde limiet in KB; Google's regels gaan over afmetingen.

In de praktijk

Begin met een vierkante master van 512px of meer en vereenvoudig deze voor de tabgrootte. Upload de bestanden, plak vervolgens de HTML-snippet en het manifest in je site, en controleer nogmaals of de manifest-link aanwezig is. Bekijk ten slotte het resultaat op 16px: als het logo niet duidelijk is, vereenvoudig het dan nogmaals.

Veelgestelde vragen

Heb ik in 2026 nog steeds een favicon.ico nodig?

Ja. Browsers, feedlezers en link-preview-bots vragen /favicon.ico op van de site-root, ongeacht je HTML-tags, dus het is goedkope verzekering. Bundel 16, 32 en 48px in één bestand.

Kan een favicon een JPG zijn?

Technisch gezien wel, maar PNG of SVG geeft een veel schoner resultaat. JPG heeft geen transparantie en compressie-artefacten, en foto’s bevatten te veel detail voor 16x16 pixels.

Welke maat moet een favicon hebben voor Google Zoeken?

Google vereist een vierkant beeld van minimaal 8x8px en adviseert groter dan 48x48px. SVG wordt daar niet ondersteund, dus houd een ICO of PNG aan die je declareert met rel=icon op je startpagina.

Moet ik aparte 16x16-, 32x32- en 48x48-PNG-bestanden gebruiken?

Over het algemeen nee. Een multi-size ICO dekt deze maten, en een Chromium-verzoektest toonde aan dat standalone PNG’s ongebruikt blijven wanneer een ICO aanwezig is. Firefox en Safari zijn niet getest.

Waarom wordt mijn nieuwe favicon niet weergegeven?

Browsers cachen favicons agressief voor dagen of weken. Probeer een harde verfrissing, open /favicon.ico direct, voeg een ?v=2 querystring toe, of controleer in een incognitovenster.