Deze pagina wordt in het Nederlands getoond, de taal waar je browser om vraagt.
De code van deze pagina is niet gestart.
Open je index.html rechtstreeks uit een map, dan worden JavaScript-modules geblokkeerd en gebeurt er niets zodra je een plaatje kiest. Serveer de map in plaats daarvan over http:
Gaat open zodra je hierboven een bestand kiest.klaar — verbreek de verbinding en dit blijft gewoon werken.niet beschikbaar in deze browser (al het andere werkt gewoon).heeft https:// of localhost nodig om offline te kunnen bewaren.bewaren lukt hier niet, maar er wordt hoe dan ook niets geüpload.Je bestanden zijn nergens heen gegaan. {total} bestanden geladen, allemaal van deze site zelf. {platform}Iets heeft {hosts} benaderd, en dat doet dit gereedschap nooit. Dat is het waard om na te kijken. {platform}De eigen scripts van de site voor advertenties, meting en de donatieknop kwamen van {hosts} host; geen daarvan heeft een bestand of een byte ervan gekregen.De eigen scripts van de site voor advertenties, meting en de donatieknop kwamen van {hosts} hosts; geen daarvan heeft een bestand of een byte ervan gekregen.Er ging iets mis: {detail}. Herlaad de pagina om opnieuw te beginnen.{count} bestand wordt gelezen…{count} bestanden worden gelezen…Een voorbeeld proberenVoorbeeld wordt gemaakt…Deze browser kon het voorbeeld niet maken. Kies in plaats daarvan een bestand.
Afbeelding naar ICO — favicon-, Windows- en macOS-icoonmaker
Eén plaatje erin. Elk formaat dat een browser, Windows of een Mac vraagt eruit.
● Je afbeeldingen worden nooit geüpload. Er is geen server.
Het schalen en de icoonbestanden zelf komen allebei in je eigen browser tot stand. Het plaatje wordt getekend door het canvas dat je browser toch al meelevert, en elke container, of dat nu de Windows-.ico is of de macOS-.icns, wordt uit die pixels opgebouwd door een paar honderd regels in src/ico.js en src/icns.js die je gewoon kunt lezen. Deze tool heeft geen enkele netwerkfunctie, dus er valt niets op te halen en niets te versturen. En al was die er wel, dan stond aan de andere kant van deze pagina nog steeds geen server om een logo naartoe te sturen.
✗ Geen upload
✗ Geen account
✗ Geen watermerk
✓ Werkt offline
✓ Open source
Live controle:bezig met controleren…
Offline:bezig met controleren…
Geloof ons vooral niet op ons woord. Open DevTools, hou het tabblad “Netwerk” in de gaten en maak een icoon. Geen enkel verzoek draagt een afbeelding, een miniatuur, een bestandsnaam of ook maar één byte van wat je koos. Of trek de stekker uit je internet en maak er alsnog een.
Hoe je de privacybelofte controleert
Je logo kan nergens heen. In de Content-Security-Policy staat elk adres dat deze pagina mag benaderen, en geen daarvan hoort bij deze site. Er is hier geen eindpunt waar je bestanden verzameld zouden kunnen worden, en in de code staat niets wat ze zou versturen als dat eindpunt er wel was.
Niets hier haalt iets op. In src/ staat nergens een fetch, een XMLHttpRequest of een sendBeacon. Het schalen is één drawImage op een canvas, en elk icoon is een kop die src/ico.js of src/icns.js vóór die pixels schrijft, hier in deze pagina.
Het bestand wordt beschreven vanuit zijn eigen bytes. De lijst formaten die naast een klaar icoon staat, is niet de lijst formaten waar je om vroeg. Die wordt teruggelezen uit het bestand dat zojuist geschreven is, door readIcoDirectory of readIcnsElements. Was een schrijver het ooit oneens met de instellingen, dan zou de pagina dat dus zeggen, in plaats van dat jij erachter kwam toen Windows niets tekende en macOS een leeg vel papier.
Wat Google laadt, en wat het niet te zien krijgt. De advertentie- en meetscripts komen van Google, de doneerknop van Buy Me a Coffee. Geen van alle krijgt iets over je plaatje mee. Elke regel die een bestand leest, schaalt of schrijft, wordt vanaf deze herkomst geserveerd en staat in de repository.
Het werkt offline. Verbreek de verbinding en de tool werkt onveranderd door, omdat er nooit een netwerkstap in zat. Eenvoudiger bewijs bestaat er niet.
Controleer het zelf. Je hoeft niets van het bovenstaande op ons woord aan te nemen. Een buildscript maakt deze pagina uit de sjablonen en de configuratie in de repository, en dat script kun je lezen en zelf draaien. Het resultaat staat vastgelegd op de branch dist, dus je kunt wat er geserveerd wordt vergelijken met wat een build van de bronnen oplevert:
De bestanden die je als eerste wilt lezen zijn config/site.toml voor de Content-Security-Policy, src/ico.js en src/icns.js voor de twee icoonformaten, waarbij het ene de directory, de items en het masker bevat en het andere de tien benoemde plekken van Apple, en src/sizes.js voor waar elk formaat op de pagina vandaan komt.
Als de beveiligingssoftware van je werkgever voor een upload waarschuwt. Die let op het moment dat er in een browser een bestand wordt gekozen, en kan niet weten of de pagina het wil versturen — dus waarschuwt hij bij het kiezen. Hier wordt niets verstuurd: open de ontwikkelaarstools, ga naar Netwerk en kies een bestand. Er is geen verzoek dat het meeneemt, en helemaal geen verzoek behalve de lokale voorbeeldweergave van de pagina. Diezelfde controle doet je IT-afdeling in een halve minuut.
1 Kies een plaatje
2 Zeg waar het icoon voor is
Een icoonbestand is niet één plaatje maar meerdere: hetzelfde logo, opnieuw getekend op elk formaat waar het ding dat het leest om vraagt. Welke formaten dat zijn is geen kwestie van smaak. Een browser wil er drie, een programma op een hi-dpi-laptop wil er tien, een Mac wil zijn eigen tien, en iets dat vóór Windows Vista geschreven is wil ze bovendien op een heel andere manier opgeslagen hebben.
Windows-icoon — .ico Wordt door elke browser als favicon gelezen, en door Windows voor een programma, een snelkoppeling en een map. De formaten kies je hieronder zelf.
macOS-icoon — .icns Wat een Mac-applicatiebundel meedraagt. Apple noemt precies tien plekken, van 16 pixels tot 1024, dus valt er niets te kiezen. Alle tien gaan erin, getekend uit zeven renders, omdat een Retina-plek en het formaat erboven hetzelfde plaatje zijn.
De rest van de icoonset van een website Een .ico dekt het browsertabblad en Windows, maar niet een iPhone-beginscherm, een Android-installatievraag of een tegel die aan het startmenu is vastgezet. Die lezen een PNG van 180 px, een webapp-manifest en een XML-bestand, en geen daarvan kijkt in een .ico. Vink dit aan, dan krijg je ze er allemaal bij, plus het manifest en het blok HTML om in je pagina te plakken.
3 Bekijk het op het formaat waarop het gezien wordt
Dit is het stuk dat het bekijken waard is voordat je iets downloadt. Een logo dat op 512 pixels perfect leest, is zestien pixels breed in een browsertabblad, en de dunne delen ervan — de lijnen in een woordmerk, een haarlijnrand, een verloop — overleven dat niet. Elk vierkantje hieronder wordt op zijn echte formaat uit het bestand dat je koos getekend.
Klaar
Plak dit in je <head>
{name}: geen afbeelding die dit gereedschap kan lezen.{name}: deze browser kon hem niet decoderen.deze browser kon het plaatje niet decoderen.deze browser wilde geen PNG schrijven.een icoon heeft minstens één afbeelding nodig.een icoonafbeelding kan niet nul pixels breed zijn.{size} past niet in een .ico: het formaat bewaart elke zijde in één byte, dus 256 is het grootste dat er is.de pixelbuffer komt niet overeen met het formaat dat hij zegt te hebben.geen .ico: te kort voor een header.geen .ico: het typeveld is geen 1.de directory loopt voorbij het einde van het bestand.een item wijst voorbij het einde van het bestand.een icoon heeft minstens één afbeelding nodig.“{type}” is geen icns-type van vier letters.geen .icns: te kort voor een header.geen .icns: de handtekening is niet “icns”.de header zegt {claimed} bytes en het bestand is {actual}.een element loopt voorbij het einde van het bestand.het element {type} noemt een lengte die het bestand niet kan bevatten.{n} bytes{n} KB{n} MB1 afbeelding{n} afbeeldingen1 formaat{n} formaten1 plek{n} plekken{a}, {b}{a} en {b}{a} en {b}{size} · {bytes} · vierkant{size} · {bytes} · niet vierkantDeze in het voorbeeld tonen{name} van de lijst halenhet browsertabblad, de adresbalk en het kleine icoon in Verkennerde lijstweergaven van Windows op 125%de taakbalk van Windows op 150%het bureaublad, de taakbalk en de favorietenbalk van de browserhet bureaublad op 125%de middelgrote iconen van Verkenner, en het formaat waarop Google een favicon leestVerkenner op 200%, en de Alt-Tab-wisselaarde grote iconen van Verkennerhet oude jumboformaat, dat installatieprogramma's nog lezende extra grote iconen van Verkenner en het startmenu; het grootste dat een .ico bevatFavicon van een websiteDe klassieke favicon.ico die in de hoofdmap van een site hoort. Drie formaten is de hele conventie: 16 voor het tabblad, 32 voor een favoriet en een Windows-snelkoppeling, 48 omdat Google het icoon van een site op dat formaat leest.Windows-programmaicoonWat een .exe of een snelkoppeling wil, en wat de eigen app.ico van Visual Studio bevat: de drie shellformaten plus de 256 waaruit het startmenu en de extra grote weergave van Verkenner putten.Windows-programma, elke schaalHetzelfde icoon met de tussenformaten die Windows vraagt bij 125%, 150% en 200% beeldschermschaling. Groter bestand, en de enige versie die op een hoge-dpi-laptop niet stilletjes herschaald wordt.Maximale compatibiliteitDrie formaten, elk opgeslagen op de manier van voor Vista, voor installatieprogramma's, ingebouwde apparaten en oud shellgereedschap dat een .ico zelf leest en niet weet wat een PNG daarin is.Zelf de formaten kiezenElk formaat dat dit bestandsformaat kan bevatten. Ze allemaal aanvinken is zelden het juiste antwoord: elk is een hele afbeelding, en niets leest een formaat waar niemand om gevraagd heeft.{list} pxwelke je hieronder aanvinktEr is niets aangevinkt, dus er valt niets te maken.Er is geen formaat aangevinkt, dus er zou niets in de .ico zitten. Vink een formaat aan, of een andere uitvoer.Per afbeelding: {parts}.Per afbeelding: {parts}. De .icns wordt tot 1024 pixels getekend, dus dat is de grote; dat is wat een Mac vraagt.één .ico met {count}één .icns met alle {n} plekken van Apple{n} PNG's en de drie tekstbestanden die een site nodig heeftEr is niets aangevinkt, dus er zou niets in het bestand zitten.Vink minstens één formaat aan.{count} — {list} — {kind}. Een afbeelding die nog niet vierkant is, wordt {fit}.tot 64 pixels opgeslagen op de manier van voor Vista en daarboven als PNGelk formaat opgeslagen als PNGelk formaat opgeslagen op de manier van voor Vistaopgevuld tot een vierkant, waarbij de opvulling transparant blijftopgevuld tot een vierkant op de achtergrondkleurbijgesneden tot het vierkant in het middenuitgerekt tot een vierkant{n} ongecomprimeerd, wat precies {size} wordt{n} als PNG, waarvan de grootte van het plaatje afhangt{parts}. {tail}Niets in het bestand is gecomprimeerd, dus het opent in alles, ook in software die ouder is dan Windows Vista.Elk item is een PNG, wat het kleinste is dat een .ico wordt, en onleesbaar voor Windows XP en voor een paar installatieprogramma's.De kleine formaten worden op de oude manier opgeslagen zodat alles ze kan lezen, en de grote als PNG omdat daar de winst zit.{name} is {size}, dus niet vierkant, en een icoon is dat altijd. Het vierkant in het midden wordt genomen; de uiteinden gaan eraf.{name} is {size}, dus niet vierkant, en een icoon is dat altijd. Het wordt uitgerekt, dus het ziet er op elk formaat platgedrukt uit.{name} is {size}, dus niet vierkant, en een icoon is dat altijd. Het wordt opgevuld, dus het hele plaatje blijft en er is ruimte boven en onder.Het is maar {size}, dus {list} is groter dan het plaatje. Dat formaat wordt opgeblazen in plaats van getekend, en een plaatje opblazen kan geen detail terughalen dat er nooit in zat.Het is maar {size}, dus {list} zijn groter dan het plaatje. Die formaten worden opgeblazen in plaats van getekend, en een plaatje opblazen kan geen detail terughalen dat er nooit in zat.{shape} {small}{name}, getekend op elk formaat dat in het bestand gaat. Elk vierkant hierboven heeft zijn echte formaat op dit scherm, op een dambord zodat transparantie als transparantie te zien is. Als die van 16px een grijze veeg is, heeft het icoon een eenvoudiger tekening nodig en geen andere instelling.{note} {list} pixels worden ook geschreven, en zijn hier weggelaten omdat een vierkant van dat formaat niet op het scherm past — en het is nooit die die misgaat.{count} aan het tekenen…{name} aan het tekenen…Klaar.{name} bevat {slots} en is {size}.{names}, samen {size}.{count} omgezet in {n} icoonbestanden, {size} in totaal.{summary} De rest van de set voor de website zit in de zip ernaast.{slots}, {size}Uit {name}, {size}.{detail} Zet hem in een Mac-programmabundel, of stel hem in als mapicoon via Toon info.{detail} Plus {n} bestanden voor de rest van de icoonset.{label} · {detail} · {size}ongecomprimeerdDe .{kind} downloadenKopiërenGekopieerdGeselecteerd — druk op Ctrl+CIconen. favicon.ico hoort in de hoofdmap van de site; browsers vragen ongevraagd om dat adres, dus het heeft geen eigen <link> nodig.De naam van je sitehet tabblad, voor browsers die een PNG boven de .ico verkiezende favorietenbalk en een vastgezette Windows-snelkoppelinghet iOS-beginscherm. Ondoorzichtig getekend: iOS maakt van transparantie zwarthet Android-beginscherm, en de installatievraaghet opstartscherm dat een webapp toont terwijl hij starthetzelfde icoon binnen het veilige gebied waar een adaptieve launcher naar bijsnijdteen tegel vastgezet in het Windows-startmenuIcoonset voor een websiteGemaakt in de browser op abox.tools/image-to-ico/ — er is niets geüpload om hem te maken, en er is niets over deze bestanden ergens naartoe gestuurd.Zet elk bestand behalve dit en head.html in de hoofdmap van je site, zodat ze antwoorden op /favicon.ico, /apple-touch-icon.png enzovoort. De paden in site.webmanifest, browserconfig.xml en head.html gaan daar allemaal van uit. Gaan ze in plaats daarvan in een submap, pas die drie bestanden dan aan.de klassieke favicon, met de versies van {sizes} pixelswordt gelezen door Android en door elke vraag om aan het beginscherm toe te voegenwordt gelezen door een tegel die in het Windows-startmenu is vastgezetde opmaak om in je <head> te plakken; geen bestand om te uploadenZet de naam in site.webmanifest op de naam van je site voordat je hem uploadt, en de twee kleuren erin op wat bij het icoon past.Let op: er zit geen favicon.ico in, omdat de .ico-uitvoer uit stond. Een site wil er echt een — het is het adres waar browsers uit zichzelf om vragen.Je afbeeldingen zijn nergens heen gegaan. {total} bestanden geladen, allemaal van deze site zelf. {platform}Iets heeft {hosts} benaderd, en dat doet dit gereedschap nooit. Dat is het waard om na te kijken. {platform}De eigen scripts van de site voor advertenties, meting en de donatieknop kwamen van {hosts} host; geen daarvan heeft een afbeelding of een byte ervan gekregen.De eigen scripts van de site voor advertenties, meting en de donatieknop kwamen van {hosts} hosts; geen daarvan heeft een afbeelding of een byte ervan gekregen.
Heeft dit geholpen?
Wat ging er mis?
Bedankt — daar hebben we wat aan.
Alleen je antwoord wordt verstuurd, en alleen als je op een knop drukt. Nooit je bestand, niet de naam ervan, en niets erover.
# Afbeelding naar ICO — favicon-, Windows- en macOS-icoonmaker
Eén plaatje erin. Elk formaat dat een browser, Windows of een Mac vraagt eruit.
> Zet een PNG, JPEG of SVG om in een echte .ico met meerdere formaten, of in een macOS-.icns, in je browser. Favicon, Windows-app-icoon, Mac-app-icoon, plus de Apple- en Android-bestanden die een site nodig heeft. Er wordt niets geüpload.
Deze pagina is een interactief hulpmiddel dat volledig in je browser draait, op https://abox.tools/nl/favicon-maken/ — niets van wat je het geeft wordt geüpload. Hieronder staat alles wat de pagina er in woorden over zegt; om het te gebruiken, open je het adres.
## Je afbeeldingen worden **nooit geüpload**. Er is geen server.
Het schalen en de icoonbestanden zelf komen allebei in je eigen browser tot stand. Het plaatje wordt getekend door het canvas dat je browser toch al meelevert, en elke container, of dat nu de Windows-`.ico` is of de macOS-`.icns`, wordt uit die pixels opgebouwd door een paar honderd regels in `src/ico.js` en `src/icns.js` die je gewoon kunt lezen. Deze tool heeft geen enkele netwerkfunctie, dus er valt niets op te halen en niets te versturen. En al was die er wel, dan stond aan de andere kant van deze pagina nog steeds geen server om een logo naartoe te sturen.
- ✗ Geen upload
- ✗ Geen account
- ✗ Geen watermerk
- ✓ Werkt offline
- ✓ Open source
## Zo maak je een .ico-bestand zonder iets te uploaden
1. **Kies het plaatje.** Sleep een PNG, JPEG, WebP of SVG het vak in, of kies er meerdere en zet ze in één keer om. Vierkant werkt het makkelijkst, en alles vanaf 256 pixels heeft genoeg detail voor elk formaat. De browser leest het rechtstreeks van je schijf, en er gaat ondertussen niets ergens heen.
2. **Kies de bestanden die je nodig hebt.** Windows en een browser lezen `.ico`, terwijl een Mac `.icns` leest en naar het andere niet omkijkt. Vink er een aan, of allebei als wat je maakt op allebei uitkomt. Een website wil ook nog de extra Apple-, Android- en tegelplaatjes, en daar is het derde vakje voor.
3. **Zeg waar het icoon voor is.** Een website-favicon is 16, 32 en 48 pixels. Een Windows-programma wil 256 er ook bij, en een programma dat op een hi-dpi-laptop goed moet staan wil de tussenformaten die Windows op 125% en 150% schaling vraagt. Kies de voorkeuze die bij de klus past, of vink de formaten zelf aan. Bij elk formaat op de lijst staat wat erom vraagt. Bij de `.icns` heb je die keuze niet, want Apple noemt precies tien plekken en alle tien gaan erin.
4. **Regel de vorm en de achtergrond.** Een icoon is vierkant en de meeste logo's zijn dat niet. Vul je het op, dan blijft het hele plaatje staan met ruimte erboven en eronder. Snijd je bij, dan wordt het midden genomen. Rek je uit, dan wordt het platgedrukt. Transparantie blijft transparantie, tenzij je er een kleur achter kiest.
5. **Kijk naar die van 16 pixels vóór je downloadt.** Op dat formaat wordt het icoon het vaakst gezien, en daar verdwijnen dunne lijnen en kleine letters. Elk vierkantje in de voorvertoning wordt op zijn echte formaat uit je eigen bestand getekend. Is de kleinste een vlek, dan helpt geen enkele instelling en moet de tekening eenvoudiger.
6. **Neem de bestanden mee.** Eén .ico met elk formaat erin, en die heet `favicon.ico` als je daarom vroeg, want daar kijken browsers naar. Vinkte je de .icns aan, dan komt die ernaast te staan, klaar om in een Mac-applicatiebundel te gaan. Vink je ook de websiteset aan, dan krijg je er de Apple-, Android- en Windows-tegelplaatjes bij, plus het manifest en het blok HTML om in je pagina te plakken. Alles wat meer is dan één bestand komt binnen als één zip.
## De uitgebreide versie
[Hoe je een favicon maakt die op zestien pixels nog leesbaar is](https://abox.tools/nl/gidsen/zelf-een-favicon-maken/): Welke formaten een favicon.ico werkelijk nodig heeft, welke extra bestanden iPhones, Android en een Mac vragen, en waarom een logo dat op een poster werkt bij zestien pixels verdwijnt.
## Ook in de gereedschapskist
- [Afbeelding naar data-URI](https://abox.tools/nl/afbeelding-naar-base64/): Het hele plaatje als één regel tekst. Plak hem zo in je CSS of HTML.
- [SVG naar afbeelding](https://abox.tools/nl/svg-naar-png/): Noem het formaat. Een vector heeft er zelf geen om te verliezen.
- [Afbeelding naar SVG](https://abox.tools/nl/afbeelding-naar-svg/): Eén vorm, één omtrek. Wijs aan wat er niet in hoort.
- [Lengtevergelijker](https://abox.tools/nl/lengtes-vergelijken/): Typ de lengtes, neem de afbeelding mee. Er wordt niets verstuurd om hem te tekenen.
## Vragen
### Wordt mijn afbeelding ergens heen geüpload?
Nee. Je eigen browser decodeert en schaalt het plaatje op je eigen hardware, en de .ico wordt uit die pixels opgebouwd door code die vanaf deze pagina geserveerd wordt. Deze tool heeft geen enkele netwerkfunctie en haalt dus nooit iets op en verstuurt nooit iets. In de `Content-Security-Policy` van de pagina staat bovendien elk adres dat hij mag benaderen, en geen daarvan hoort bij deze site.
### Welke formaten horen er in een favicon.ico?
16, 32 en 48, en dat is geen kwestie van voorkeur. Op 16 tekent een browser het icoon in een tabblad, 32 gebruikt Windows voor een bureaubladsnelkoppeling en gebruiken verschillende browsers voor een bladwijzer, en op 48 leest Google een site-icoon. Alles wat groter is hoort in een PNG naast de .ico in plaats van erin, en precies dat levert de websiteset hier op.
### Welke formaten heeft een Windows-app-icoon nodig?
16, 32, 48 en 256, precies wat de standaard-app.ico van Visual Studio zelf ook bevat. Op 16 zit de titelbalk en de kleine Verkennerweergave, op 32 het bureaublad en de taakbalk, op 48 de middelgrote pictogrammen van Verkenner, en op 256 het startmenu en de extra grote weergave. Op een hi-dpi-scherm vraagt Windows ook om 20, 24, 40, 64 en 96, en ontbreken die, dan herbemonstert het ze vanaf het dichtstbijzijnde formaat dat het wel heeft. Met de voorkeuze “elke schaal” zet je ze er gewoon in.
### Waarom is het bestand groter dan het plaatje waarmee ik begon?
Omdat een .ico niet één plaatje is maar meerdere, en de kleine daarvan ongecomprimeerd worden opgeslagen zodat alles ze kan lezen. Een item van 32×32 is precies 4.264 bytes, wat er ook in zit, en een ongecomprimeerd item van 256×256 is 264 KB. Daarom worden formaten boven 64 standaard als PNG opgeslagen. Kies je “PNG voor elk formaat”, dan krijg je het kleinste bestand; kies je ongecomprimeerd voor elk formaat, dan krijg je het best leesbare.
### Wat is het verschil tussen de PNG- en de ongecomprimeerde items?
Alleen hoe de pixels binnen de .ico opgeslagen worden. Een ongecomprimeerd item is de oorspronkelijke Windows-indeling, met een bitmapkop, de pixels ondersteboven en een transparantiemasker van één bit, en elke Windows-versie die ooit is uitgekomen kan dat lezen. Een PNG-item is een heel PNG-bestand dat in het icoon is gestopt, op de grote formaten drie tot tien keer zo klein, maar pas begrepen vanaf Windows Vista. Standaard wordt allebei ingezet waar het wint: ongecomprimeerd tot 64 pixels en PNG daarboven.
### Kan hij een icoon groter dan 256 pixels maken?
Nee, en niets kan dat. Het formaat slaat elke zijde in één byte op, en 0 is vergeven omdat het 256 betekent. Daar ligt het plafond, dus een .ico met een plaatje van 512 pixels erin is geen groter icoon maar een kapot icoon. Heb je 512 nodig, dan heb je een PNG nodig, en die zit in de websiteset voor Android en voor het startscherm van een webapp.
### Blijft de transparantie behouden?
Ja, in beide soorten items. Daarnaast wordt het oude masker van één bit naast het alfakanaal geschreven, zodat software die te oud is om het alfa te lezen het icoon toch uitknipt in plaats van een zwart blok te tekenen. Eén bestand wordt met opzet wel ondoorzichtig gemaakt, en dat is het Apple-touch-icoon in de websiteset. iOS zet dat op zijn eigen tegel en maakt transparantie zwart, dus wordt het op je achtergrondkleur platgeslagen, standaard wit.
### Mijn logo is een breed woordmerk. Wat gebeurt daarmee?
Er moet iets gebeuren, want een icoon is vierkant. Opvullen houdt het geheel maar maakt het klein, en een woordmerk dat in een vierkant van 16 pixels wordt gepast is zo'n drie pixels hoog en dus onleesbaar. Bijsnijden naar het midden werkt meestal beter. Haal het symbool uit het geheel en gebruik alleen dat, zoals vrijwel elk merk voor zijn favicon doet. In de voorvertoning zie je welke van de twee het overleeft voordat je iets downloadt.
### Wat zit er in de websiteset, en heb ik het allemaal nodig?
Zeven PNG's, een webapp-manifest, een browserconfig.xml en een blok HTML om te plakken. Je hebt ze nodig omdat een .ico alleen browsers en Windows dekt. Een iPhone-beginscherm leest namelijk een PNG van 180 pixels onder een eigen naam, Android en elke installatievraag lezen het manifest, en een tegel die aan het startmenu is vastgezet leest de XML. Geen van drieën kijkt in een .ico. Alles wordt hier gemaakt, op jouw apparaat, en in de zip zit een briefje waarop staat waar elk bestand voor is.
### Kan hij ook een macOS-icoon maken?
Ja. Vink *macOS-icoon* aan en je krijgt een `.icns` naast de `.ico`, of in plaats daarvan. Het is een andere container voor hetzelfde idee, en geen van beide systemen leest die van de ander: Windows wil .ico en een Mac-applicatiebundel wil .icns. Bij de formaten heb je daar niets te kiezen, want Apple publiceert precies tien plekken, namelijk 16, 32, 64, 128, 256, 512 en 1024 pixels, waarvan er drie twee keer voorkomen als de Retina-versie van het formaat eronder. Alle tien gaan erin, getekend uit zeven renders, en daarom is een .icns het grotere bestand.
### Hoe gebruik ik het .icns-bestand?
Voor een programma gaat het in de bundel in `JouwApp.app/Contents/Resources/`, en noem je het in `Info.plist` onder `CFBundleIconFile`. Elke Mac-inpaktool heeft daar een veld voor. Wil je het ergens anders voor gebruiken, selecteer het bestand dan in de Finder en druk op Command-C. Kies daarna Toon info op de map of schijfkopie die je wilt wijzigen, klik op het kleine icoon linksboven en druk op Command-V.
### Is de .icns hetzelfde als wat iconutil maakt?
Dezelfde tien plekken met dezelfde vierlettertypen, en PNG in elk daarvan, precies wat `iconutil` uit een `.iconset`-map maakt. Er is één bewust verschil. De tool van Apple schrijft ook een `TOC` -element, een index van de types en lengtes die volgen. Dat is een optimalisatie en geen onderdeel van het formaat, want een lezer zonder index loopt de elementen van begin tot eind door en komt op hetzelfde antwoord uit. Een verkeerde index is erger dan geen index, dus hij blijft weg.
### Kan ik meerdere plaatjes tegelijk omzetten?
Ja. Elk plaatje op de lijst wordt zijn eigen .ico met dezelfde instellingen, en de stapel komt binnen als één zip met een map per plaatje. Anders zouden er twee favicon.ico heten en zou de een de ander overschrijven. Elke uitvoer die je aanvinkte wordt voor elk plaatje gemaakt. Klik op een regel om dat plaatje in de voorvertoning te zetten.
### Is het gratis, en heb ik een account nodig?
Het is gratis, en er komt geen account, geen inlog, geen proefperiode en geen watermerk aan te pas. Er zit ook geen limiet op het aantal bestanden of op de grootte ervan, omdat er geen server is die daarvoor betaalt: het werk gebeurt op je eigen apparaat. De site draait op advertenties, en die betalen hem. Die advertenties krijgen niets over je afbeeldingen mee.
### Werkt het offline?
Ja. Laad de pagina één keer, verbreek daarna je internetverbinding en hij werkt gewoon door. Dat is meteen de eenvoudigste manier om te bewijzen dat er niets geüpload wordt, want een tool die je logo wegstuurde om het te laten omzetten zou ermee ophouden zodra je de stekker eruit trok.
## Hoe je de privacybelofte controleert
- **Je logo kan nergens heen.** In de Content-Security-Policy staat elk adres dat deze pagina mag benaderen, en geen daarvan hoort bij deze site. Er is hier geen eindpunt waar je bestanden verzameld zouden kunnen worden, en in de code staat niets wat ze zou versturen als dat eindpunt er wel was.
- **Niets hier haalt iets op.** In `src/` staat nergens een `fetch`, een `XMLHttpRequest` of een `sendBeacon`. Het schalen is één `drawImage` op een canvas, en elk icoon is een kop die `src/ico.js` of `src/icns.js` vóór die pixels schrijft, hier in deze pagina.
- **Het bestand wordt beschreven vanuit zijn eigen bytes.** De lijst formaten die naast een klaar icoon staat, is niet de lijst formaten waar je om vroeg. Die wordt teruggelezen uit het bestand dat zojuist geschreven is, door `readIcoDirectory` of `readIcnsElements`. Was een schrijver het ooit oneens met de instellingen, dan zou de pagina dat dus zeggen, in plaats van dat jij erachter kwam toen Windows niets tekende en macOS een leeg vel papier.
- **Wat Google laadt, en wat het niet te zien krijgt.** De advertentie- en meetscripts komen van Google, de doneerknop van Buy Me a Coffee. Geen van alle krijgt iets over je plaatje mee. Elke regel die een bestand leest, schaalt of schrijft, wordt vanaf deze herkomst geserveerd en staat in de repository.
- **Het werkt offline.** Verbreek de verbinding en de tool werkt onveranderd door, omdat er nooit een netwerkstap in zat. Eenvoudiger bewijs bestaat er niet.
**Controleer het zelf.** Je hoeft niets van het bovenstaande op ons woord aan te nemen. Een buildscript maakt deze pagina uit de sjablonen en de configuratie in de repository, en dat script kun je lezen en zelf draaien. Het resultaat staat vastgelegd op de branch `dist`, dus je kunt wat er geserveerd wordt vergelijken met wat een build van de bronnen oplevert: https://github.com/A-Box-of-Tools/website
De bestanden die je als eerste wilt lezen zijn `config/site.toml` voor de Content-Security-Policy, `src/ico.js` en `src/icns.js` voor de twee icoonformaten, waarbij het ene de directory, de items en het masker bevat en het andere de tien benoemde plekken van Apple, en `src/sizes.js` voor waar elk formaat op de pagina vandaan komt.
Zo maak je een .ico-bestand zonder iets te uploaden
Kies het plaatje. Sleep een PNG, JPEG, WebP of SVG het vak in, of kies er meerdere en zet ze in één keer om. Vierkant werkt het makkelijkst, en alles vanaf 256 pixels heeft genoeg detail voor elk formaat. De browser leest het rechtstreeks van je schijf, en er gaat ondertussen niets ergens heen.
Kies de bestanden die je nodig hebt. Windows en een browser lezen .ico, terwijl een Mac .icns leest en naar het andere niet omkijkt. Vink er een aan, of allebei als wat je maakt op allebei uitkomt. Een website wil ook nog de extra Apple-, Android- en tegelplaatjes, en daar is het derde vakje voor.
Zeg waar het icoon voor is. Een website-favicon is 16, 32 en 48 pixels. Een Windows-programma wil 256 er ook bij, en een programma dat op een hi-dpi-laptop goed moet staan wil de tussenformaten die Windows op 125% en 150% schaling vraagt. Kies de voorkeuze die bij de klus past, of vink de formaten zelf aan. Bij elk formaat op de lijst staat wat erom vraagt. Bij de .icns heb je die keuze niet, want Apple noemt precies tien plekken en alle tien gaan erin.
Regel de vorm en de achtergrond. Een icoon is vierkant en de meeste logo's zijn dat niet. Vul je het op, dan blijft het hele plaatje staan met ruimte erboven en eronder. Snijd je bij, dan wordt het midden genomen. Rek je uit, dan wordt het platgedrukt. Transparantie blijft transparantie, tenzij je er een kleur achter kiest.
Kijk naar die van 16 pixels vóór je downloadt. Op dat formaat wordt het icoon het vaakst gezien, en daar verdwijnen dunne lijnen en kleine letters. Elk vierkantje in de voorvertoning wordt op zijn echte formaat uit je eigen bestand getekend. Is de kleinste een vlek, dan helpt geen enkele instelling en moet de tekening eenvoudiger.
Neem de bestanden mee. Eén .ico met elk formaat erin, en die heet favicon.ico als je daarom vroeg, want daar kijken browsers naar. Vinkte je de .icns aan, dan komt die ernaast te staan, klaar om in een Mac-applicatiebundel te gaan. Vink je ook de websiteset aan, dan krijg je er de Apple-, Android- en Windows-tegelplaatjes bij, plus het manifest en het blok HTML om in je pagina te plakken. Alles wat meer is dan één bestand komt binnen als één zip.
Nee. Je eigen browser decodeert en schaalt het plaatje op je eigen hardware, en de .ico wordt uit die pixels opgebouwd door code die vanaf deze pagina geserveerd wordt. Deze tool heeft geen enkele netwerkfunctie en haalt dus nooit iets op en verstuurt nooit iets. In de Content-Security-Policy van de pagina staat bovendien elk adres dat hij mag benaderen, en geen daarvan hoort bij deze site.
Welke formaten horen er in een favicon.ico?
16, 32 en 48, en dat is geen kwestie van voorkeur. Op 16 tekent een browser het icoon in een tabblad, 32 gebruikt Windows voor een bureaubladsnelkoppeling en gebruiken verschillende browsers voor een bladwijzer, en op 48 leest Google een site-icoon. Alles wat groter is hoort in een PNG naast de .ico in plaats van erin, en precies dat levert de websiteset hier op.
Welke formaten heeft een Windows-app-icoon nodig?
16, 32, 48 en 256, precies wat de standaard-app.ico van Visual Studio zelf ook bevat. Op 16 zit de titelbalk en de kleine Verkennerweergave, op 32 het bureaublad en de taakbalk, op 48 de middelgrote pictogrammen van Verkenner, en op 256 het startmenu en de extra grote weergave. Op een hi-dpi-scherm vraagt Windows ook om 20, 24, 40, 64 en 96, en ontbreken die, dan herbemonstert het ze vanaf het dichtstbijzijnde formaat dat het wel heeft. Met de voorkeuze “elke schaal” zet je ze er gewoon in.
Waarom is het bestand groter dan het plaatje waarmee ik begon?
Omdat een .ico niet één plaatje is maar meerdere, en de kleine daarvan ongecomprimeerd worden opgeslagen zodat alles ze kan lezen. Een item van 32×32 is precies 4.264 bytes, wat er ook in zit, en een ongecomprimeerd item van 256×256 is 264 KB. Daarom worden formaten boven 64 standaard als PNG opgeslagen. Kies je “PNG voor elk formaat”, dan krijg je het kleinste bestand; kies je ongecomprimeerd voor elk formaat, dan krijg je het best leesbare.
Wat is het verschil tussen de PNG- en de ongecomprimeerde items?
Alleen hoe de pixels binnen de .ico opgeslagen worden. Een ongecomprimeerd item is de oorspronkelijke Windows-indeling, met een bitmapkop, de pixels ondersteboven en een transparantiemasker van één bit, en elke Windows-versie die ooit is uitgekomen kan dat lezen. Een PNG-item is een heel PNG-bestand dat in het icoon is gestopt, op de grote formaten drie tot tien keer zo klein, maar pas begrepen vanaf Windows Vista. Standaard wordt allebei ingezet waar het wint: ongecomprimeerd tot 64 pixels en PNG daarboven.
Kan hij een icoon groter dan 256 pixels maken?
Nee, en niets kan dat. Het formaat slaat elke zijde in één byte op, en 0 is vergeven omdat het 256 betekent. Daar ligt het plafond, dus een .ico met een plaatje van 512 pixels erin is geen groter icoon maar een kapot icoon. Heb je 512 nodig, dan heb je een PNG nodig, en die zit in de websiteset voor Android en voor het startscherm van een webapp.
Blijft de transparantie behouden?
Ja, in beide soorten items. Daarnaast wordt het oude masker van één bit naast het alfakanaal geschreven, zodat software die te oud is om het alfa te lezen het icoon toch uitknipt in plaats van een zwart blok te tekenen. Eén bestand wordt met opzet wel ondoorzichtig gemaakt, en dat is het Apple-touch-icoon in de websiteset. iOS zet dat op zijn eigen tegel en maakt transparantie zwart, dus wordt het op je achtergrondkleur platgeslagen, standaard wit.
Mijn logo is een breed woordmerk. Wat gebeurt daarmee?
Er moet iets gebeuren, want een icoon is vierkant. Opvullen houdt het geheel maar maakt het klein, en een woordmerk dat in een vierkant van 16 pixels wordt gepast is zo'n drie pixels hoog en dus onleesbaar. Bijsnijden naar het midden werkt meestal beter. Haal het symbool uit het geheel en gebruik alleen dat, zoals vrijwel elk merk voor zijn favicon doet. In de voorvertoning zie je welke van de twee het overleeft voordat je iets downloadt.
Wat zit er in de websiteset, en heb ik het allemaal nodig?
Zeven PNG's, een webapp-manifest, een browserconfig.xml en een blok HTML om te plakken. Je hebt ze nodig omdat een .ico alleen browsers en Windows dekt. Een iPhone-beginscherm leest namelijk een PNG van 180 pixels onder een eigen naam, Android en elke installatievraag lezen het manifest, en een tegel die aan het startmenu is vastgezet leest de XML. Geen van drieën kijkt in een .ico. Alles wordt hier gemaakt, op jouw apparaat, en in de zip zit een briefje waarop staat waar elk bestand voor is.
Kan hij ook een macOS-icoon maken?
Ja. Vink macOS-icoon aan en je krijgt een .icns naast de .ico, of in plaats daarvan. Het is een andere container voor hetzelfde idee, en geen van beide systemen leest die van de ander: Windows wil .ico en een Mac-applicatiebundel wil .icns. Bij de formaten heb je daar niets te kiezen, want Apple publiceert precies tien plekken, namelijk 16, 32, 64, 128, 256, 512 en 1024 pixels, waarvan er drie twee keer voorkomen als de Retina-versie van het formaat eronder. Alle tien gaan erin, getekend uit zeven renders, en daarom is een .icns het grotere bestand.
Hoe gebruik ik het .icns-bestand?
Voor een programma gaat het in de bundel in JouwApp.app/Contents/Resources/, en noem je het in Info.plist onder CFBundleIconFile. Elke Mac-inpaktool heeft daar een veld voor. Wil je het ergens anders voor gebruiken, selecteer het bestand dan in de Finder en druk op Command-C. Kies daarna Toon info op de map of schijfkopie die je wilt wijzigen, klik op het kleine icoon linksboven en druk op Command-V.
Is de .icns hetzelfde als wat iconutil maakt?
Dezelfde tien plekken met dezelfde vierlettertypen, en PNG in elk daarvan, precies wat iconutil uit een .iconset-map maakt. Er is één bewust verschil. De tool van Apple schrijft ook een TOC -element, een index van de types en lengtes die volgen. Dat is een optimalisatie en geen onderdeel van het formaat, want een lezer zonder index loopt de elementen van begin tot eind door en komt op hetzelfde antwoord uit. Een verkeerde index is erger dan geen index, dus hij blijft weg.
Kan ik meerdere plaatjes tegelijk omzetten?
Ja. Elk plaatje op de lijst wordt zijn eigen .ico met dezelfde instellingen, en de stapel komt binnen als één zip met een map per plaatje. Anders zouden er twee favicon.ico heten en zou de een de ander overschrijven. Elke uitvoer die je aanvinkte wordt voor elk plaatje gemaakt. Klik op een regel om dat plaatje in de voorvertoning te zetten.
Is het gratis, en heb ik een account nodig?
Het is gratis, en er komt geen account, geen inlog, geen proefperiode en geen watermerk aan te pas. Er zit ook geen limiet op het aantal bestanden of op de grootte ervan, omdat er geen server is die daarvoor betaalt: het werk gebeurt op je eigen apparaat. De site draait op advertenties, en die betalen hem. Die advertenties krijgen niets over je afbeeldingen mee.
Werkt het offline?
Ja. Laad de pagina één keer, verbreek daarna je internetverbinding en hij werkt gewoon door. Dat is meteen de eenvoudigste manier om te bewijzen dat er niets geüpload wordt, want een tool die je logo wegstuurde om het te laten omzetten zou ermee ophouden zodra je de stekker eruit trok.