Favicon-formaten en HTML-code (2026): de korte lijst | We.Inc
De favicon-bestanden die een site in 2026 echt nodig heeft: favicon.ico, een SVG, een Apple touch-icoon van 180px en manifesticonen van 192 en 512, met kopieerbare head-tags en een manifestbouwer.
Vijf bestanden dekken bijna elke browser en elk apparaat: een favicon.ico van 32 bij 32, een SVG-icoon voor moderne browsers, een PNG apple-touch-icon van 180 bij 180 voor iPhone-beginschermen, en PNG's van 192 bij 192 plus 512 bij 512 in een web-app-manifest. Google Search wil een vierkant icoon, bij voorkeur groter dan 48 pixels.
De favicon-set die het meeleveren waard is
Bestand
Formaat
Gebruikt door
Elk (vector)
Tabbladen in moderne browsers, scherp op elk formaat
Beginscherm van iPhone en iPad
Web-app-manifest, Android-beginscherm
Web-app-manifest, installatie- en opstartschermen
Oudere favicon-gidsen noemen twintig of meer formaten voor apparaten die niemand meer gebruikt. Tegenwoordig schaalt de browser vanuit een paar goede bronbestanden, dus de taak is de juiste vijf kiezen, de head-tags correct schrijven en zorgen dat Google ze kan crawlen. Gebruik de bouwer hieronder om de tags en het manifest voor uw eigen site te genereren.
Ontwerp één vierkant origineel van 512 bij 512 met het beeldmerk gecentreerd en wat witruimte eromheen.
Exporteer de vijf bestanden uit de tabel, of maak ze met onze favicon-generator.
Vul in de bouwer de naam en kleur van uw site in en kopieer daarna de head-tags en het manifest.
Upload de bestanden naar de rootmap van uw site, plak de tags in de head van elke pagina en doe een harde refresh om te controleren.
Test de versie van 16 pixels apart; fijne tekst en dunne lijnen verdwijnen op tabbladformaat, dus vereenvoudig het beeldmerk.
Geef de SVG een media query voor de donkere modus, zodat een donker logo zichtbaar blijft op donkere browsertabbladen.
Houd het belangrijke deel van een maskable icoon binnen de middelste cirkel, met een straal van 40% van de breedte, want Android kan de rest wegsnijden.
Blokkeer de icoonbestanden of uw homepage niet in robots.txt; Google moet beide kunnen crawlen om uw favicon in de resultaten te tonen.
Browsers cachen favicons hardnekkig, dus geef het bestand een nieuwe naam of voeg een versie-query toe als u het vervangt.
Veelgestelde vragen
Wat is het beste formaat voor een favicon?
Er is niet één beste formaat. Lever een ICO van 32 bij 32 voor compatibiliteit en een SVG voor scherpe moderne tabbladen, en voeg dan het Apple-icoon van 180 pixels en de manifesticonen van 192 en 512 toe voor beginschermen. Google Search vraagt om een vierkante afbeelding van minstens 8 pixels en bij voorkeur groter dan 48 bij 48.
Hoe voeg ik een favicon toe aan een website?
Zet de bestanden in de rootmap van uw site en voeg link-tags toe in de head van elke pagina: rel icon voor de ICO en SVG, rel apple-touch-icon voor de PNG van 180 pixels, en rel manifest die naar een JSON-bestand wijst met de iconen van 192 en 512. De bouwer op deze pagina schrijft die regels voor u.
Waarom verschijnt mijn favicon niet in Google?
Google moet zowel uw homepage als het icoonbestand kunnen crawlen, het icoon moet vierkant zijn en de link moet in de head van de homepage staan. Het kan even duren voordat wijzigingen verschijnen, want Google crawlt favicons opnieuw volgens een eigen schema.
Heb ik nog steeds favicon.ico nodig?
Het is de moeite waard om het te houden. Sommige tools, feedlezers en oudere browsers vragen direct om /favicon.ico zonder uw HTML te lezen, en een kleine ICO in de root beantwoordt die vraag.
Wat is een maskable icoon?
Een manifesticoon met de purpose maskable, getekend met extra witruimte zodat Android het kan bijsnijden tot een cirkel, squircle of andere vorm. Houd het logo binnen de centrale veilige zone en vul de achtergrond tot aan de randen.
Waarom de lijst korter is geworden
Browsers kiezen nu het dichtstbijzijnde icoon en schalen het, en dankzij het SVG-formaat kan één bestand elk tabbladformaat bedienen. De vele oude Windows-tegel- en Apple-formaten waren bedoeld voor platforms die inmiddels verder zijn gegaan.
De Safari-documentatie van Apple beschrijft nog steeds touch-iconen per apparaat, maar iOS valt terug op een groter icoon als er geen exacte match is, dus één PNG van 180 pixels dekt huidige iPhones en iPads prima.
De manifesticonen
Volgens web.dev hebben Chromium-browsers minstens een icoon van 192 pixels en een van 512 pixels in het manifest nodig voordat een site geïnstalleerd kan worden. Met die twee schaalt Chrome automatisch voor andere pixeldichtheden.
Elk manifesticoon kan als purpose any, maskable of monochrome hebben. Gebruik een apart bestand voor maskable, want witruimte die past bij een bijgesneden vorm, ziet er te klein uit als het icoon vierkant wordt getoond.
De favicon in de zoekresultaten krijgen
Google Search toont een favicon naast resultaten als het er een op uw homepage kan vinden. De ondersteunde rel-waarden zijn icon, shortcut icon, apple-touch-icon en apple-touch-icon-precomposed.
Google accepteert ook verschillende formaten, waaronder ICO, PNG, GIF en JPEG. Het icoonbestand mag zelfs op een ander domein staan, zolang Googlebot het mag ophalen.