FavicongeneratorElk formaat, en het head-blok dat erbij hoort.
Sleep er een logo in en krijg een echte favicon.ico met meerdere resoluties, de PNG-formaten waar browsers om vragen, een apple touch icon, het maskable icon voor Android en een ingevulde site.webmanifest. Alles wordt in dit tabblad gemaakt, je afbeelding wordt nooit geüpload.
Sleep je logo hierheen
Of tik om een bestand te kiezen. Een vierkante afbeelding van 512 px of groter werkt het best.
PNG, JPG, WebP, SVG, ICO of GIF
Je afbeelding wordt in dit tabblad gelezen, geschaald en ingepakt. Ze wordt nooit geüpload, en er komt op geen enkel moment een server aan te pas.
Welke faviconformaten heb je in 2026 echt nodig?
Veel minder dan de pakketten van twintig bestanden die de meeste generatoren nog steeds uitdelen. Vijf plekken dekken elke browser en elk besturingssysteem dat ertoe doet, en alles daarna is gewicht in je <head> zonder winst.
favicon.ico, 16 en 32 en 48
Nog altijd het bestand dat een browser in de root van je domein zoekt voordat hij één regel HTML heeft gelezen. Eén container bevat alle drie de formaten, en daarom bouwt deze faviconconverter een echte .ico in plaats van een PNG te hernoemen. 16 px is de tab, 32 px is de retinatab en de bladwijzerbalk, 48 px zijn snelkoppelingen in Windows.
favicon.svg, als je een vector hebt
Een vectorfavicon is scherp op elk formaat en kan met een media query in het bestand zelfs reageren op de donkere modus van het systeem. Browsers die haar begrijpen, kiezen haar boven de .ico. Upload je hier een SVG, dan blijft die vector, ze wordt nooit gerasterd en als namaak teruggegeven.
apple-touch-icon.png, 180×180
Het icoon dat iOS gebruikt als iemand je site aan het beginscherm toevoegt. Eén bestand is genoeg: iOS schaalt sinds iOS 8 één icoon van 180 px zelf omlaag, dus de oude stapel van apple-touch-icon-57x57 tot 152x152 is ballast. Deze apple touch icon-generator schrijft er één, en maakt hem ondoorzichtig.
android-chrome 192 en 512, plus maskable
Worden aangeroepen vanuit site.webmanifest en niet vanuit een link-tag. 192 px is het beginscherm, 512 px is het splashscherm en de installatiemelding. De maskable variant is degene die Android bijsnijdt tot de vorm die de launcher gebruikt, dus dat beeldmerk heeft echte marge nodig.
mstile-150x150.png, goedkoop om te houden
Vastgemaakte sites in Windows lezen hem nog. Hij kost één kleine PNG en twee metatags, dus hij zit erbij, maar er breekt niets als je hem weggooit. Dat is het eerlijke antwoord, en daarom staat hij achteraan in plaats van dat hij als noodzaak wordt gepresenteerd.
Waarom zit er in één .ico-bestand meer dan één afbeelding?
Omdat .ico een containerformaat is en geen afbeeldingsformaat. Dat begrijpen is het verschil tussen een favicon die overal verschijnt en een die stilletjes faalt in Windows en in feedlezers.
Eerst een index, dan de afbeeldingen
Het bestand opent met een header van zes bytes die zegt hoeveel afbeeldingen volgen, daarna één item van zestien bytes per afbeelding met breedte, hoogte, lengte in bytes en positie in het bestand, en pas daarna de afbeeldingsdata. Alles is little-endian. Door die structuur is een PNG die je .ico noemt geen .ico.
Wie hem leest kiest het formaat
Een browser die een tab van 16 px tekent, leest de index, vindt het item van 16 px en decodeert alleen dat. Geef hem één afbeelding van 512 px en hij schaalt tijdens het tekenen omlaag, met goedkope sampling en een vaag resultaat. Geef hem een op maat gemaakte 16 px en hij gebruikt die.
De data mag PNG zijn
Het oorspronkelijke formaat bevatte BMP met omgekeerde pixelvolgorde en een apart transparantiemasker van één bit. Elke browser en elke Windows sinds Vista accepteert ook PNG in de container, en dat is wat deze ico-converter schrijft: kleinere bestanden, echte alpha, geen verouderde encoder.
Op 16 px zie je de kwaliteit
Een logo van 1024 px in één keer terugbrengen naar 16 px sampelt te weinig bronpixels en levert een grijze vlek op. Deze tool halveert de afbeelding op tussenliggende canvassen, 1024 naar 512 naar 256 enzovoort, zodat elke pixel meedoet. Het is de enige reden dat een kleine favicon leesbaar blijft.
Heb ik nog een apple-touch-icon nodig?
Ja, en het is het enige bestand met andere regels dan alle andere iconen in het pakket. Twee dingen om te weten, allebei hierboven al voor je geregeld.
iOS gooit je transparantie weg
Safari zet het beginschermicoon op zwart in plaats van op de achtergrond, dus een logo dat je zorgvuldig met transparante achtergrond hebt geëxporteerd, komt aan als een vorm die op een zwarte tegel zweeft. Daarom schrijft deze tool de apple-touch-icon altijd met een ondoorzichtige achtergrond, standaard wit, ook als je voor de rest transparant hebt gekozen. Sinds iOS 7 legt het systeem er ook geen eigen glans meer overheen, dus wat je aanlevert is wat mensen zien.
Android snijdt bij, het vult niet aan
Een Android-launcher neemt een maskable icoon en knipt het bij tot zijn eigen vorm, een cirkel, een squircle of een afgerond vierkant, afhankelijk van de telefoon. Alleen de middelste 80 % blijft gegarandeerd staan, dus een logo dat het vlak van rand tot rand vult, verliest zijn uiteinden. Het maskable bestand houdt hier 20 % marge aan, wat je de schuif ook geeft, en het ronde voorbeeld laat precies zien wat de launcher overhoudt.
Hoe voeg ik een favicon toe aan mijn site?
Twee stappen, en in de tweede gaat het meestal mis. Kopieer het blok dat de tool genereert in plaats van het uit je hoofd te typen.
Zet de bestanden in de root
Leg favicon.ico en de rest naast je index.html, zodat ze antwoorden op jouwsite.nl/favicon.ico. Browsers vragen dat exacte pad uit zichzelf op, zonder dat iemand het ze vertelt, en daarom telt de plek in de root zwaarder dan de link-tag.
Plak het head-blok op elke pagina
Niet alleen op de homepage. Wie op een diepe pagina binnenkomt en die bewaart, hoort het juiste icoon te krijgen. Werkt je site met een template of een framework, dan hoort het blok in de gedeelde layout.
Declareer de .ico zonder formaat
Gebruik rel="icon" href="/favicon.ico" sizes="any". De formaten zitten al in de container, en er eentje hardcoderen in de markup weerhoudt de browser ervan de andere te pakken. De SVG-regel staat vooraan zodat browsers die vector begrijpen die kiezen.
En daarna twee keer hard verversen
Favicons worden agressief en los van de pagina gecachet, dus je oude icoon kan een gewone verversing dagenlang overleven. Open het bestand rechtstreeks op jouwsite.nl/favicon.ico om te bevestigen dat de nieuwe echt wordt geserveerd voordat je concludeert dat er iets stuk is.
Wil je controleren waar een bestaande QR-code of korte link echt naartoe gaat? Ontcijfer hem met de QR-code-resolver
Heb je een korte link nodig bij de nieuwe site? Maak er een met de gratis linkverkorter
Het icoon is de kleine helft van een eerste indruk.
Een favicon zien mensen pas als ze al op je site zijn. Het zwaardere werk doet de link die ze daarheen bracht, en dat is meestal het deel dat niemand meet. Als dat je iets zegt: LinkScale is wat wij bouwen.
Zie waar het bezoek vandaan kwam
Klikken, landen, apparaten en wat er daarna gebeurde, voor elke link die je uitdeelt, in plaats van een getal in het dashboard van iemand anders.
Verander de bestemming later
Stuur een gedrukte of geposte link achteraf ergens anders heen, zonder iemand te vragen bij te werken wat hij heeft opgeslagen.
Eén pagina voor alles
Een link in bio-pagina met de shop, het boekingsformulier en de socials, zodat die ene link die je mag plaatsen verder reikt.
Vragen over de favicongenerator
Nog vragen?
OnlineEchte mensen, meestal binnen een paar minuten antwoord.
Hij is gratis, zonder account, zonder watermerk en zonder limiet op het aantal bestanden dat je maakt. Je afbeelding wordt nooit geüpload: ze wordt gelezen met de eigen FileReader van de browser, op een canvas getekend en in Blobs verpakt, allemaal binnen de pagina. Achter deze tool zit geen endpoint, dus er is niets om haar naartoe te sturen. Je kunt het zelf controleren door tijdens het gebruik het netwerktabblad van je browser te openen, of door de internetverbinding te verbreken zodra de pagina geladen is.
Ga verder met LinkScale
Favicon geregeld. De link die mensen binnenbrengt is de andere helft.
LinkScale is een platform voor linkbeheer voor wie wil weten wat er na de klik gebeurt, en de bestemming wil wijzigen zonder iets opnieuw te drukken.
Free 14-day trial on every plan