Hoe maak ik een favicon-pakket van een PNG zonder me aan te melden?

De zeven bestanden die onze icon generator schrijft vanuit één PNG, wat elk bestand leest, waar ze op je server moeten staan en waarom transparante delen solide worden.

August 9, 2026

Een favicon is geen bestand. Het is een set daarvan, omdat een browsertabblad, een iOS-startscherm en een Android-installatieprompt elk om een andere afbeelding op een andere grootte vragen. Plaats één PNG in onze icon generator en zeven bestanden komen er aan de andere kant uit. Hier is wat elk bestand doet, waar het op je server moet staan en welke je kunt overslaan.

Het geheel draait binnen de pagina. Er is geen API-route en geen serveractie ergens in deze app, dus je logo wordt gelezen met createImageBitmap, geschilderd in een OffscreenCanvas en gecodeerd naar PNG door je eigen browser. Geen account en geen belofte om je kunstwerk binnen een uur te verwijderen.

Wat zijn de zeven bestanden en wat doet elk bestand?

Zeven bestanden, één bronafbeelding. De onderstaande afmetingen komen van een echte run met alpha.png, een 900 bij 606 transparante PNG van 942,4 KB. Je byte-aantallen zullen verschillen omdat ze afhankelijk zijn van hoeveel detail overleeft op elke grootte, maar de bestandsnamen en de pixelafmetingen zijn vastgelegd door de tool.

Je hebt niet alle zeven nodig. Als desktop tabs alles is waar je om geeft, doet favicon.ico alleen het werk. Het Apple-bestand begint belangrijk te worden zodra iemand je site aan het startscherm toevoegt, en de twee Android PNG's verdienen alleen hun plaats als je daadwerkelijk het manifest verzendt.

Waar gaan de bestanden heen en wat gaat er in de head?

Alle zeven horen op de webroot, zodat ze worden opgelost als /favicon.ico, /apple-touch-icon.png, enzovoort. Op Next.js is dat de public map. Dan gaan er vier tags in je head: één apple-touch-icon link op 180x180, twee rel=icon links voor de 32 en de 16, en één link naar het manifest. De tool print dat fragment naast de resultaten met een kopieerknop.

site.webmanifest is 371 bytes JSON met name, short_name, de twee Android-iconen, theme_color, background_color en display ingesteld op standalone. De iconpaden binnenin zijn absoluut geschreven, als /android-chrome-192x192.png, dus het parkeren van het pakket in /assets/icons/ breekt ze stilletjes en je moet beide src-waarden bewerken. Nog een valstrik: laat beide naamvelden leeg in het paneel en het manifest wordt verzonden met de letterlijke naam "My App", wat is wat een telefoon onder je pictogram zal afdrukken.

Waarom staat favicon.ico niet in dat fragment?

Omdat browsers erom vragen zonder dat het wordt verteld. Geen tag nodig. De rel=icon sectie van de HTML-specificatie beschrijft de /favicon.ico conventie: wanneer een document geen iconlink verklaart, probeert de browser dat rootpad zelf. Daarom werkt de .ico zonder enige markup, en daarom moet het bestand op de root staan. Een kopie die in /images/ staat, wordt nooit opgevraagd. Als je het echt ergens anders nodig hebt, voeg dan een expliciete iconlink toe die naar je pad wijst en het gokken stopt.

Wat zit er eigenlijk in favicon.ico?

Een .ico is een container. De onze bevat drie PNG's, gerenderd op 16, 32 en 48 pixels, achter een 6-byte header plus één 16-byte directory-entry per afbeelding, wat 54 bytes structuur is gewikkeld rond de afbeeldingsgegevens. Zo dekt één enkel 4,6 KB bestand drie formaten: de browser leest de directory en haalt vervolgens de entry op die overeenkomt met wat hij aan het tekenen is. De byte-indeling van die directory, en waarom niets groter dan 256 erin past, is een stuk voor zichzelf. Windows heeft PNG-payloads binnen .ico sinds Vista begrepen en huidige browsers verwerken ze zonder klachten.

Waarom kwam mijn transparante PNG eruit met een solide achtergrond?

Omdat elke iconcanvas wordt gevuld voordat je logo erop landt. De achtergrondcontrole is een input type=color, die geen alpha-kanaal bevat, dus de vul is altijd ondoorzichtig en de standaard is #ffffff. Welke transparantie je bron ook had, wordt tegen die kleur afgevlakt. Er is hier geen transparante optie. Kies de kleur die overeenkomt met het oppervlak waar het teken op komt te zitten voordat je op genereren drukt.

Vorm is ook belangrijk. alpha.png is 900 bij 606 en iconen zijn vierkant, dus het kunstwerk wordt in het vierkant geplaatst met zijn lange as op volle breedte, en de achtergrondkleur vult de banden boven en onder. Als die banden je irriteren, vierkant de afbeelding dan eerst in de cropper, die één bestand tot 10 MB accepteert en een 1:1 preset biedt onder zijn acht beeldverhoudingen. De marge-slider in het iconpaneel loopt van 0 tot 30% en plaatst het kunstwerk gelijkmatig aan alle vier de zijden.

Is 196 KB te groot voor een iconbestand?

196 KB voor android-chrome-512x512.png lijkt alarmerend naast een 521-byte 16px bestand. Twee dingen verlichten de druk. Dat pictogram wordt niet opgehaald bij een gewone paginaweergave, aangezien de tab alleen ooit het kleine wil, en PNG direct uit een canvas-encoder is niet geoptimaliseerd: convertToBlob schrijft een geldig bestand zonder al het filter- en paletwerk dat een speciale optimizer doet. Het is dezelfde browserencoder die de bestandsgroottes in onze JPG naar PDF metingen vormt.

Je kunt het verkleinen door de PNG opnieuw door de compressor te laten lopen. Op diezelfde 942,4 KB alpha.png, landde de verliesloze modus (oxipng niveau 3) op 383,9 KB, een daling van 59% zonder dat er een pixel veranderde. De kleinere-bestandmodus (imagequant) bereikte 98,3 KB, een daling van 90%, door de afbeelding tot een palet te reduceren. Een vlak logo met een handvol kleuren is precies waar een palet je niets kost wat je kunt zien. Houd het verliesloos als je pictogram fotografisch is.

Moet ik me aanmelden en wordt mijn logo geüpload?

Geen aanmelding en niets om te uploaden. Er zijn geen API-routes en geen serveracties in deze codebase, en de enige verzoeken die de pagina doet, zijn same-origin fetches voor zijn eigen middelen. Open je netwerkpaneel terwijl je genereert en kijk hoe het stil blijft. Onze privacy pagina verwoordt het in minder woorden dan deze alinea doet.

De limieten zijn één bestand per keer en 10 MB, en de dropzone accepteert PNG, JPEG, WebP, AVIF, GIF en SVG. Een SVG wordt eerst gerasteriseerd op de grootste van zijn eigen afmetingen of 512 pixels, zodat zelfs een 64px bron nog steeds een schone 512 pictogram oplevert. Die render laadt het bestand in een <img> element, hetzelfde beperkte pad dat externe lettertypen en gelinkte bitmaps uit een SVG laat vallen. Alles komt naar beneden als één favicon-package.zip met alle zeven bestanden. Als je logo als een te grote export is aangekomen, verklein het dan eerst zodat je geen 20 megapixel banner in een 16 pixel vierkant voedt.

Doe dit vervolgens: open de icon generator, drop je logo, stel de achtergrondkleur in om overeen te komen met waar het pictogram zal zitten, genereer, unzip in je webroot, plak de vier tags in je head en voeg "start_url": "/" toe aan site.webmanifest. Laad de site vervolgens hard opnieuw en kijk naar het tabblad. Als de 16px versie eruitziet als een vlek, ga dan terug en vereenvoudig het teken voordat je iets anders verandert. Apple's Configuring Web Applications notities zijn het lezen waard als het iOS-startscherm je prioriteit is.