Heb ik nog steeds een favicon.ico nodig, of is PNG genoeg?
ICO is een directoryformaat dat 16, 32 en 48 in één bestand van 4,6 KB verpakt. Wat erin zit, waarom PNG het niet vervangt en de zeven bestanden die verzonden moeten worden.
Elke paar jaar verklaart iemand favicon.ico dood. Dan vraagt een feedreader of een oude Windows-snelkoppeling om /favicon.ico, krijgt een 404 en toont een lege pagina-glyph. Het verzenden van de ICO kost 4,6 KB. Dat is het hele argument, en het is waarom onze icon generator nog steeds er een schrijft.
Geef het alpha.png, een 900x606 afbeelding met transparantie, en zeven bestanden komen eruit: favicon.ico van 4,6 KB, favicon-16x16.png van 521 B, favicon-32x32.png van 1,4 KB, apple-touch-icon.png van 28,4 KB en twee android-chrome PNG's van 31,9 KB en 196 KB, plus een 371 B site.webmanifest. Je eigen browser schrijft alle zeven. We hebben het zo gebouwd omdat deze app helemaal geen API-routes heeft, wat de zin is die elke server-side favicon-site niet over zichzelf kan zeggen.
Wat zit er eigenlijk in een .ico-bestand?
ICO is een directoryformaat. Het bestand opent met zes bytes: een gereserveerd woord ingesteld op 0, een typewoord ingesteld op 1 voor iconen en een telling van hoeveel afbeeldingen volgen. Daarna komt er één 16-byte invoer per afbeelding, met breedte, hoogte, kleurentelling, een gereserveerde byte, kleurplannen, bits per pixel, de bytegrootte van de afbeeldingsgegevens en de offset vanaf het begin van het bestand. Dan de payloads, samengevoegd. Microsoft's gearchiveerde Icons-artikel uit 1995 documenteert die twee structuren als ICONDIR en ICONDIRENTRY, en ze zijn niet veranderd.
Breedte en hoogte krijgen elk één byte, wat de reden is waarom 256x256 als 0 moet worden opgeslagen en waarom niets groter dan 256 in de directory past. Onze encoder schrijft 1 kleurvlak en 32 bits per pixel voor elke invoer, en elke payload is een gewone PNG. De specificatie van 1995 beschrijft een DIB gevolgd door een 1-bit AND-masker voor transparantie, wat de reden is waarom oude iconen die harde, gekartelde randen hadden. Drie afbeeldingen betekenen 6 bytes header plus 48 bytes directory. Dat is 54 bytes boekhouding, en alles wat overblijft in de 4,6 KB zijn PNG-gegevens.
Waarom bevat één favicon.ico 16, 32 en 48?
Dat zijn de drie maten die wij verpakt hebben, en ze zijn niet willekeurig. Hetzelfde Microsoft-document vertelt ontwikkelaars om 16x16, 32x32 en 48x48 in elke iconenbron op te nemen, en legt vervolgens de selectie regel uit: de afbeelding die het dichtst in de buurt komt van de gevraagde grootte wint. De tabstrip vraagt om 16. Op een 2x-display wil dezelfde 16 CSS-pixelruimte 32 echte pixels, en een Windows-desktopsnelkoppeling vraagt om 48. Als je ICO alleen de 16 had, zou een snelkoppeling een 16 px afbeelding krijgen die naar 48 was uitgerekt, en het zou er precies zo uitzien.
Als browsers PNG lezen, waarom verzend je dan de ICO überhaupt?
Omdat de twee op verschillende manieren worden ontdekt. De vierregelige snippet die onze tool je geeft, noemt PNG-bestanden met expliciete type- en maat-hints, en elke client die `<head>` ontleedt, zal die aannemen. MDN's `<link>`-referentie toont dezelfde vorm, verschillende iconenlinks waarvan de attributen de browser laten kiezen. De HTML-standaard laat ook een gebruikersagent zoeken naar /favicon.ico via het pad wanneer er geen iconenlink is gedeclareerd, en veel dingen die je URL ophalen, lezen je markup nooit. SVG-favicons zijn hier verleidelijk, en caniuse geeft ze 90,49% wereldwijde ondersteuning, waarbij Safari ze alleen oppakt in versie 26.0. Dat laat een echte staart over.
Wat zijn de zeven bestanden en wat wegen ze?
| Bestand | Pixels | Grootte | Wat leest het |
|---|---|---|---|
| favicon.ico | 16, 32 en 48 verpakt | 4,6 KB | de /favicon.ico pad fallback, Windows-snelkoppelingen |
| favicon-16x16.png | 16x16 | 521 B | tabstrip bij 1x, via een linktag |
| favicon-32x32.png | 32x32 | 1,4 KB | tabstrip bij 2x, via een linktag |
| apple-touch-icon.png | 180x180 | 28,4 KB | iOS-startscherm, via een linktag |
| android-chrome-192x192.png | 192x192 | 31,9 KB | de manifest iconenarray |
| android-chrome-512x512.png | 512x512 | 196 KB | de manifest iconenarray |
| site.webmanifest | n.v.t. | 371 B | de installatieprompt |
De 512 domineert. Voeg de ICO, beide kleine PNG's, de apple-touch-icon en de 192 samen toe en je zit onder de 67 KB in totaal, tegen 196 KB voor dat ene bestand. Het is goed om te weten welke van die je iets kost bij een paginabezoek, omdat alleen de ICO en de twee kleine PNG's daar in het spel zijn.
Waarom zit mijn transparante logo op een witte vierkant?
Omdat de generator de canvas schildert voordat het je kunstwerk tekent, en de standaardvulling is #ffffff. Die controle is een kleurinvoer, dus er is altijd een kleur onder. Stel het in op je merkhex en de hele set past bij je site. alpha.png ging erin met een alpha-kanaal en elk van de zeven afbeeldingen kwam eruit als ondoorzichtig, wat mensen verrast die een transparante favicon verwachten.
De marge-slider loopt van 0 tot 30 procent en inset je kunstwerk met dat aandeel van elke rand van het icoon, dus bij 10 procent houdt een 32 px icoon een 3 px rand aan elke kant. Dat is een zichtbare hoeveelheid op die schaal. Niet-vierkante bronnen krijgen een letterbox: een 900x606 logo behoudt zijn beeldverhouding en pakt achtergrondbalken boven en onder op. Maak het eerst vierkant als dat je stoort. De cropper heeft een 1:1 preset, accepteert één bestand tegelijk tot 10 MB en hercodeert verliesgevende formaten met een hardcoded kwaliteit van 92. Als je liever wilt schalen dan bijsnijden, heeft de resizer percentage presets op 25, 50 en 75 met cover, contain en stretch fit-modus.
Hoe converteer ik een ICO terug naar een PNG?
Gebruik ICO naar PNG. Het ontleedt de container, doorloopt de directory-invoeren en houdt degene met de grootste breedte, en schrijft dat als een PNG. Richt het op het 4,6 KB bestand hierboven en je krijgt een 48x48 afbeelding, omdat 48 het grootste is dat erin verpakt is. Het kan geen detail herstellen dat nooit in het bestand zat. Als je iets groter nodig hebt, draait de upscaler Real-ESRGAN in je browser en geeft altijd PNG; onze small.png-test bij 400x269 kwam terug als 800x538 op de 2x-instelling. Of reconstructie of gewone interpolatie het juiste hulpmiddel is hangt af van waar het icoon voor is. Het is goed om te weten: het model produceert intern alleen 4x, dus 2x is een downscale die daarna wordt toegepast. Onze converter dekt 24 paren over 11 formaten en schrijft ICO voor geen van hen. Iconen komen van de icon generator.
Is een 196 KB icoon te groot?
Dat is android-chrome-512x512.png, en het is het zwaarste ding in de set met een afstand. Het wordt opgehaald wanneer iemand je site als een app installeert, wat is wat de W3C Web App Manifest specificatie regelt, dus het zit niet op het kritieke pad van een gewone paginalading. Je kunt het nog steeds verkleinen. Onze compressor biedt twee PNG-modi die totaal verschillend gedrag vertonen: "PNG zonder compressie" draait oxipng op niveau 3 en blijft verliesvrij, terwijl "PNG kleinere bestandsgrootte" kwantiseert naar een 256-kleurpalet met imagequant. Op alpha.png, 942,4 KB bij de bron, gaf de verliesvrije doorgang 383,9 KB en de paletdoorgang gaf 98,3 KB. Een vlak logo overleeft meestal 256 kleuren zonder dat iemand het opmerkt. Compressie verwijdert ook elk stukje metadata, EXIF en ICC inbegrepen, wat voor een icoon precies is wat je wilt.
Hier is de concrete volgende stap. Open de icon generator, drop het grootste vierkante bronbestand dat je hebt (het accepteert JPEG, PNG, WebP, AVIF, GIF en SVG tot 10 MB, één bestand), stel de achtergrondkleur in op je merkhex, laat de marge op 0 staan en genereer. Kopieer de vier linktags in `<head>`, upload favicon.ico naar je webroot en je bent klaar. Als je wilt bevestigen dat er niets van je machine is vertrokken, kijk dan naar het netwerktabblad terwijl het draait, of lees onze privacypagina. Waar elk van de zeven bestanden op je server thuishoort is apart volledig beschreven.