Favicon-maten en ICO-bestanden: wat past in een favicon.ico

Het meeste favicon advies is een lijst van een tiental PNG maten gekopieerd van een generator die in 2014 is geschreven De meeste van die maten doen niets meer Wat een site vandaag nodig heeft is kort: een favicon.ico voor de browsers en tools die er nog naar zoeken, één schaalbaar of hoog-resolutie icoon voor alles wat modern is, en één touch icoon voor telefoons Het deel dat mensen naar boven laat struikelen is de .ico zelf, omdat het geen afbeelding is met een vreemde extensie Het is een kleine container met meerdere afbeeldingen.

Deze handleiding behandelt hoe een ICO-bestand is gebouwd, welke formaten thuishoren in een favicon.ico en waarom, welke andere pictogrambestanden een site daarnaast nodig heeft, en de fouten die ervoor zorgen dat een pictogram er zacht of onleesbaar uitziet op een browsertabblad. Het zit onder de hub voor beeldhulpmiddelen, en elke grootte die voor de Toolz-converter wordt opgegeven, komt van de broncode.

tl;dr: Een ICO-bestand is een container: een korte map gevolgd door meerdere vierkante afbeeldingen, één per grootte, waaruit de browser of het besturingssysteem de dichtstbijzijnde match kiest Voor een favicon.ico, neem 16, 32 en 48 px op, en voeg 256 px toe als hetzelfde bestand ook dienst doet als Windows-pictogram Elke invoer kan maximaal 256 x 256 pixels bevatten Daarnaast declareer je een SVG of groot PNG-pictogram en een 180 x 180 apple-touch-icon. de PNG naar ICO converter schrijft 16, 32, 48 en 256 px-vermeldingen als PNG met transparantie, clientzijde, niets geüpload, gratis, geen aanmelding.

Wat is een ICO-bestand?

Een ICO-bestand is het Windows-pictogramformaat: een header, een directory met elke afbeelding erin, en de afbeeldingsgegevens voor elke invoer Microsoft documenteerde de lay-out in zijn Pictogrammen technisch artikel, en het is het formaat voor Windows programma, snelkoppeling en map pictogrammen sinds de eerste versies van Windows Browsers adopteerde het voor favicons in de late jaren 1990, dat is de reden waarom het bestand op de meeste websites nog steeds wordt genoemd favicon.ico.

De directory is wat het anders maakt dan een PNG of JPG Software die een pictogram op 16 pixels nodig heeft, leest de directory, vindt de ingang het dichtst bij 16 en tekent die. Een tabblad, een bladwijzerkaart, een taakbalkknop en een desktopsnelkoppeling kunnen elk een andere afbeelding uit hetzelfde bestand maken. Hierdoor kan een ontwerper een vereenvoudigd merkteken voor de kleine formaten en een gedetailleerd merkteken voor de grote formaten opgeven, in plaats van dat een enkele afbeelding overal kan worden geschaald.

Het formaat gaat door twee mediatypen. IANA-lijsten image/vnd.microsoft.icon, terwijl de meeste servers en browsers de oudere gebruiken image/x-icon. Beide werken voor een favicon.

Hoe is een ICO-bestand opgebouwd?

Een ICO-bestand begint met een header van 6 bytes, gevolgd door één directory-invoer van 16 bytes per afbeelding, gevolgd door de afbeeldingsgegevens. Alle nummers zijn little-endian.

ICONDIR (6 bytes)
  reserved      2 bytes   always 0
  type          2 bytes   1 = icon (2 = cursor)
  count         2 bytes   number of images

ICONDIRENTRY (16 bytes, repeated count times)
  width         1 byte    pixels; 0 means 256
  height        1 byte    pixels; 0 means 256
  colorCount    1 byte    palette size; 0 when there is no palette
  reserved      1 byte    0
  planes        2 bytes   1
  bitCount      2 bytes   bits per pixel, e.g. 32
  bytesInRes    4 bytes   size of this image's data
  imageOffset   4 bytes   where this image's data starts in the file

Image data (one block per entry)
  either a BMP-style DIB (without the file header)
  or a complete PNG file

Twee details in die lay-out verklaren de meeste verwarrende dingen over pictogrammen.

Het plafond van 256 pixels komt uit één byte. Breedte en hoogte worden elk opgeslagen in één byte, die 0 tot 255 kan bevatten. Het formaat hergebruikt 0 in de betekenis van 256, en er is geen manier om iets groters uit te drukken. Een invoer van 512 x 512 kan niet bestaan in een geldige ICO, wat een generator ook beweert.

Inzendingen kunnen PNG zijn. Vroege pictogrammen sloegen elke afbeelding op als een ongecomprimeerde bitmap met een afzonderlijk 1-bits transparantiemasker. Sinds Windows Vista kan een item in plaats daarvan een compleet PNG-bestand bevatten, dat bij grote afmetingen veel kleiner is en een goed alfakanaal draagt. Een pictogram van 256 x 256 opgeslagen als een ongecomprimeerde 32-bits bitmap is ongeveer 256 KB; hetzelfde beeld als PNG is daar meestal een fractie van.

De Toolz converter schrijft de moderne variant Zijn ICO builder stelt type 1 in, één directory entry per grootte met vlakken 1 en 32 bits per pixel, schrijft 256 als 0, en slaat elke entry op als een PNG met zijn alfakanaal, Het vragen om een grootte buiten 1 tot 256 wordt geweigerd voordat er iets geschreven wordt, omdat de directory geen manier heeft om het op te nemen.

Welke maat moet een favicon zijn?

Een favicon.ico moet 16 x 16, 32 x 32 en 48 x 48 afbeeldingen bevatten, en een 256 x 256 afbeelding als je ook wilt dat het bestand als Windows-pictogram werkt. Naast de .ico geven moderne browsers de voorkeur aan een SVG of een grote PNG die is gedeclareerd met een linktag, en telefoons gebruiken een apart aanraakpictogram.

Deze tabel brengt elke grootte in kaart aan waar het wordt gebruikt Exact gedrag varieert met browser, besturingssysteem en display schaling, dus behandel het als het gebruikelijke geval:

Maat	Waar het opduikt	Nodig in favicon.ico?
16 x 16	Browsertabbladen, adresbalk, bladwijzers op standaarddisplays	ja
32 x 32	Tabbladen op beeldschermen met hoge dichtheid, Windows-taakbalk en snelkoppelingen	ja
48 x 48	Sneltoetsen voor Windows-desktop, middelgrote pictogramweergaven; Google Search raadt aan om groter te worden dan dit	ja
256 x 256	Ramen grote en extra grote pictogramweergaven	Alleen als het wordt gebruikt als Windows-pictogram
180 x 180	Startscherm iPhone en iPad (apple-touch-icon)	Nee, aparte PNG
192 x 192	Android startscherm, web app manifest	Nee, aparte PNG
512 x 512	Web app manifesteren, installeren en splash schermen	Nee, past niet in ICO
Elke (SVG)	Moderne browsers die SVG-pictogrammen ondersteunen, inclusief varianten in de donkere modus	Nee, aparte SVG

Op zoekresultaten, Google's favicon-richtlijnen vraag om een vierkant pictogram en raad een groter dan 48 x 48 pixels, en Google haalt het van het pictogram dat op uw startpagina wordt gedeclareerd Een .ico die een top van 16 pixels heeft, is een veel voorkomende reden waarom een site' s pictogram ziet er wazig uit naast het zoekresultaat.

Welke favicon bestanden heeft een site nodig?

Een site heeft drie pictogrambestanden en één manifestinvoer nodig om elke reguliere browser en apparaat te dekken. Meer dan dat zijn bijna altijd restjes.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

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

Elke lijn heeft een taak:

• favicon.ico is de terugval. De WHATWG HTML-standaard laat browsers verzoeken /favicon.ico vanaf de site root wanneer een pagina helemaal geen pictogram verklaart, en RSS lezers, crawlers en oudere tools nog steeds doen Houd het bestand bij de root, zelfs als u andere pictogrammen declareren.
• icon.svg is het scherpe pictogram voor browsers die SVG-favicons ondersteunen Het schaalt naar elke dichtheid en kan een prefers-color-scheme mediaquery zodat het pictogram zich aanpast aan donkere tabbladen Niet elke browser eert het, daarom blijft de .ico.
• apple-touch-icon.png bij 180 x 180 is wat iOS gebruikt wanneer iemand je site toevoegt aan het startscherm Geef het een ondoorzichtige achtergrond, aangezien iOS geen transparantie behoudt op pictogrammen op het startscherm.
• De manifestpictogrammen op 192 en 512 zijn wat Android- en Chromium-gebaseerde browsers gebruiken wanneer een site als app wordt geïnstalleerd, zoals beschreven in de W3C Web Application Manifest.

de sizes attribuut op de .ico link is op één manier van belang Wanneer een browser een SVG en een sized .ico ziet, kan het de SVG de schaalbare keuze vertellen Sommige setups gebruiken sizes="any" op de .ico in plaats daarvan, en sommige Chrome-versies reageerden door de .ico boven de SVG te kiezen. Een specifieke maat vermijdt dat.

Waarom ziet mijn favicon er wazig of verkeerd uit?

De meeste favicon problemen komen van de bronafbeelding, niet het formaat De ICO slaat op elke grootte wat het gegeven is op, en schalen kan maar goed in één richting gaan.

Symptoom	Oorzaak	Fix
Zachte, vlekkerige 256 px-invoer	Bron kleiner dan 256 px, dus opgerekt	Begin vanaf een export van 512 x 512 of groter
Logo platgedrukt of uitgerekt	Niet-vierkante bron uitgerekt tot vierkant	Snijd of pad naar vierkant voordat u het converteert
Woordmerk onleesbaar in het tabblad	Tekst getekend op 16 px is twee pixels hoog	Gebruik het symbool alleen voor 16 en 32 px
Dunne omtrek verdwijnt	Beroertes onder 1 px bij kleine maten	Dikkere slagen in een kleine variant
Witte doos rond het pictogram	JPG bron heeft geen transparantie	Gebruik een PNG met een alfakanaal
Oud icoontje blijft maar tonen	Browsers cachen favicons agressief	Hernoem het bestand of voeg een queryreeks toe en ververs vervolgens hard
Geen pictogram in Google-resultaten	Pictogram onder 48 px, geblokkeerd door robots.txt, of niet op de startpagina	Serveer een groter pictogram vanaf de startpagina en laat crawlen toe

De eerste rij is het waard om te worden gespeld, omdat het ook ervaren ontwerpers betrapt Een bron van 64 px die is geconverteerd met 256 getikt, levert een invoer van 256 px op, dat is de afbeelding van 64 px die vier keer is vergroot. Het is precies de Windows-weergaven met hoge dichtheid en grote snelkoppelingen. Het terugschalen van een grote bron is de richting die er goed uitziet.

De derde rij is een kwestie van rekenen Een icoon van 16 x 16 heeft in totaal 256 pixels Een woordmerk van vijf letters dat in die breedte wordt geperst krijgt ongeveer drie pixels per letter, en anti-aliasing verandert die in grijze vlekken Bijna elke bekende site gebruikt om die reden een enkele letter of symbool voor zijn favicon.

Hoe maak ik een favicon.ico van een PNG?

Exporteer een vierkante PNG van minimaal 512 x 512 pixels met een transparante achtergrond, converteer deze naar ICO met de formaten die u nodig heeft en controleer de invoer van 16 px op echte grootte voordat u deze publiceert.

Gebruik maken van de PNG naar ICO converter op Toolz:

1. Laat de PNG vallen Verschillende kunnen tegelijk naar binnen; elk wordt zijn eigen .ico.
2. Kies de pictogramgroottes Alle vier de vakken, 16, 32, 48 en 256 px, zijn aangevinkt om te starten Voor een pure favicon, onttik 256 om het bestand veel lichter te maken, aangezien de 256-invoer het grootste deel van zijn gewicht is Als je ze alle vier loslaat, valt de converter terug naar het schrijven van alle vier in plaats van het produceren van een leeg pictogram.
3. Druk op Converteren naar ICO. Een vierkant 512 x 512 logo.png komt terug als logo.ico met de opmerking " Bevat 16, 32, 48, 256 px pictogrammen."
4. Download het bestand, of neem een batch als converted-ico.zip.

De converter tekent je afbeelding op een canvas bij elke grootte, codeert elk vierkant als PNG, en verpakt ze het kleinst eerst in één .ico, allemaal client-kant, zodat het kunstwerk nooit het apparaat verlaat Transparantie wordt op elke grootte bewaard Een niet-vierkante bron wordt uitgerekt om elk vierkant te vullen in plaats van bijgesneden, en de notitie zegt het volgende: laat een woordmerk van 1024 x 256 vallen en het meldt dat de afbeelding 1024x256 was en werd uitgerekt tot vierkanten van de maten die u hebt gekozen Die noot is uw keu om eerst bij te snijden of te kussentjes.

Voor het beste resultaat bij kleine formaten, maak twee PNG's: een gedetailleerde voor 48 en 256 px en een vereenvoudigd symbool voor 16 en 32 px Converteer elk met alleen de grootte aangevinkt De converter schrijft één bron per bestand, dus de twee-afbeeldingsbenadering geeft je twee .ico-bestanden; gebruik de vereenvoudigde als favicon.ico, aangezien browsers meestal de kleine vermeldingen kiezen, en de gedetailleerde voor Windows-applicatie- of snelkoppelingspictogrammen.

Kan ik een ICO maken van een JPG of een SVG?

Ja tegen beide, met voor elk een voorbehoud.

Een JPG werkt, maar elke pictograminvoer komt uit als een gevuld vierkant zonder transparantie, omdat JPEG geen alfakanaal heeft en geen enkele converter er een kan herstellen De JPG naar ICO converter bemonstert de foto in dezelfde 16, 32, 48 en 256 px vierkanten Foto's verliezen ook bijna alle details bij 16 px, dus snij strak rond een enkel onderwerp met hoog contrast en maak de crop vierkant voordat u converteert Een 4032 x 3024 telefoonfoto die is geconverteerd zoals hij is, wordt horizontaal geperst, en het briefje vertelt je dat.

Een SVG is de best mogelijke bron, aangezien deze geen vaste resolutie heeft en bij elke instapgrootte scherp wordt weergegeven De route is afhankelijk van hoeveel controle u wilt De SVG naar PNG converter geeft de SVG weer aan een PNG die u als eerste kunt inspecteren en bewerken; elke SVG waarvan de langste zijde minder dan 512 px is, wordt getekend op 512, dus een SVG met 24 x 24 pictogram geeft nog steeds een schone bron voor de invoer met 256. Of laat de SVG rechtstreeks in de algemene vallen Image Converter, die SVG, PNG, JPG en een tiental andere formaten accepteert, en ICO als doelwit kiest om het in één stap weer te geven en in te pakken.

Bron	Transparantie in de ICO	Scherpte bij 256 px	Beste gebruik
SVG	gevangen	Scherp, weergegeven uit vectoren	Logo's die je in vectorvorm hebt
PNG 512 px of groter	gevangen	Scherp	Meeste favicons
PNG onder 256 px	gevangen	Zacht op 256	Ontkoppel 256 of exporteer groter opnieuw
JPG	Geen, gevuld vierkant	Hangt af van de brongrootte	Alleen fotogebaseerde pictogrammen
Bestaande ICO	gevangen	Herbouwd vanaf de invoer decodeert de browser	Wijzigen welke maten een bestand draagt

Een bestaande .ico kan ook worden teruggekoppeld. De converter behandelt ICO naar ICO nooit als een hernoeming; het herbouwt het bestand altijd op de maten die u aanvinkt. Dat is een snelle manier om een opgeblazen favicon uit te sluiten tot 16, 32 en 48, hoewel het opnieuw wordt opgebouwd vanaf de ene invoer die de browser decodeert, dus begin bij het originele artwork als je het hebt. SVG versus PNG dekt waarom de vectormaster de moeite waard is om te behouden voor precies dit soort wederuitvoer.

Maakt favicon.ico anno 2026 nog steeds uit?

Ja, als fallback Huidige browsers gebruiken de SVG of PNG iconen die je declareert, maar de root /favicon.ico is nog steeds wat sommige browsers, feedlezers, bladwijzerhulpmiddelen en crawlers ophalen als ze geen declaratie vinden of het opgegeven type niet ondersteunen Een ontbrekende vult ook serverlogboeken met 404's, aangezien die verzoeken binnenkomen, ongeacht of het bestand bestaat of niet.

Wat er niet meer toe doet is de lange staart van legacy-formaten Afzonderlijke 57, 60, 72, 76, 114, 120, 144 en 152 pixel touch iconen dateren van oudere iOS-versies en worden gedekt door de enkele 180 px bestand Windows tegel afbeeldingen gedeclareerd door browserconfig.xml behoorde tot Windows 8 en 10 Start schermtegels Geen van beide is nodig voor een nieuwe site.

Hier is de praktische minimumset met bestandsgroottes om te verwachten

File	Pixelgrootte	Typisch gewicht	verplicht?
favicon.ico met 16, 32, 48	16, 32, 48	Een paar KB	Ja, als terugval
icon.svg	Schaalbaar	Onder de 2 KB voor een eenvoudig merkteken	aanbevolen
apple-touch-icon.png	180 x 180	5 tot 20 KB	Ja, voor iOS
icon-192.png, icon-512.png	192, 512	10 tot 60 KB	Als de site een manifest heeft

Is het converteren van pictogrammen in de browser privé?

Ja. op Toolz, decoderen, wijzigen van de grootte, PNG-codering en het inpakken van de .ico gebeuren allemaal client-side, binnen de browser tab, zodat geen afbeelding wordt geüpload, en de pagina blijft offline werken zodra geladen Metagegevens en kleurprofielen die aan de bron zijn gekoppeld, worden verwijderd door de canvas stap, die voor een pictogram onschadelijk is.

Afbeeldingen boven de 100 megapixels en lege bestanden worden geweigerd met een bericht, en SVG-bronnen boven de 50 MB worden geweigerd De tools zijn gratis, geen aanmelding, met een dagelijkse limiet op conversies.

Veelgestelde vragen