Slik bruker du verktøyet
- Lim inn Base64-strengen eller data URI-en for et ikon eller for bildet du vil lage et ikon av.
- Sjekk forhåndsvisningen og dimensjonene. Et kvadratisk kildebilde gir det reneste ikonet.
- ICO er forhåndsvalgt. Velg én størrelse under Ikonstørrelse (16, 32, 48, 64, 128 eller 256 piksler) eller ikonet med flere størrelser.
- Last ned .ico-filen. Hvis inndataene allerede er en ICO og du vil ha alle bildene i den uendret, velger du Original.
ICO-filer i Base64
En ICO-fil er en liten container: en header, en katalog med oppføringer og ett bilde per oppføring, lagret som BMP- eller PNG-data. Headeren begynner med bytene 00 00 01 00, så Base64-formen av et ikon begynner med AAABAA. Du ser Base64-ikoner i favicon-data URI-er som <link rel="icon" href="data:image/x-icon;base64,...">, i HTML-sider i én fil og i API-er som returnerer ikoner for nettsteder.
Den registrerte MIME-typen er image/vnd.microsoft.icon, men image/x-icon er langt vanligere og fungerer overalt.
Hvilken ikonstørrelse du bør velge
| Størrelse | Typisk bruk |
|---|---|
| 16 × 16 | Nettleserfane og bokmerke på vanlige skjermer |
| 32 × 32 | Nettleserfane på skjermer med høy pikseltetthet |
| 48 × 48 | Ikoner på skrivebordet og i Filutforsker i Windows |
| 64, 128 | Større forhåndsvisninger og programlister |
| 256 × 256 | Visningene Store ikoner og Ekstra store ikoner i Windows |
Valget med flere størrelser pakker 16, 32, 48 og 256 inn i én fil, slik at hvert system kan velge den som passer best. Bildene inni er PNG-komprimert, noe som beholder gjennomsiktigheten og støttes av Windows Vista og nyere og av alle moderne nettlesere.
Bruke ikonet som favicon
Nettlesere ber automatisk om /favicon.ico fra rotkatalogen til nettstedet, så det fungerer å lagre filen der selv uten noen kode. En Base64-data URI i href sparer den forespørselen, men da lastes ikonet ned på nytt med hver side i stedet for å hurtigbufres for seg. Moderne nettlesere godtar også PNG- og SVG-ikoner, og et vanlig oppsett kombinerer begge:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Start med et kvadratisk bilde med enkle former og sterk kontrast; fine detaljer forsvinner ved 16 piksler. Trenger du en PNG-versjon til annen bruk, kan du prøve Base64 til PNG.
Ofte stilte spørsmål
Hvilken størrelse bør favicon.ico ha?
Et ikon med flere størrelser som inneholder bilder på 16, 32 og 48 piksler, dekker nettlesere og Windows. Valget med flere størrelser her legger i tillegg til 256 for store ikonvisninger.
Kan jeg konvertere en Base64-PNG eller -SVG til ICO?
Ja. Lim den inn, la Last ned som stå på ICO og velg en størrelse. Alle bilder nettleseren din kan vise, kan konverteres.
Hvorfor viser forhåndsvisningen bare én størrelse av ikonet mitt?
En ICO-fil kan inneholde flere bilder, men en forhåndsvisning viser bare ett av dem. Velg Original under Last ned som for å beholde alle bildene i filen.
Beholder ICO-filen gjennomsiktigheten?
Ja. Ikonene lagres som PNG-data med full alfakanal, så avrundede hjørner og myke kanter forblir gjennomsiktige.
Hvordan legger jeg et ikon inn i en data URI?
href i <link rel="icon">-taggen din.