Sådan bruger du værktøjet
- Træk en .ico-fil hen på feltet, klik for at vælge en, eller indsæt et billede.
- Lad Konvertér til stå på Behold originalt format, så alle størrelser, der er gemt i ikonet, kommer med i outputtet.
- Tjek den kodede størrelse; et ikon med mange størrelser kan være større, end du forventer.
- Kopiér data URI'en til et favicon-link-tag, eller kopiér outputtet som img-tag, CSS eller Markdown.
ICO-formatet
ICO er ikonformatet i Windows og det oprindelige faviconformat. Det er en container: En kort oversigt angiver et eller flere billeder med bredde, højde og farvedybde, og hvert billede gemmes som bitmapdata eller, ved store størrelser som 256 gange 256, som en indlejret PNG. En typisk favicon.ico indeholder udgaver på 16, 32 og 48 pixel, så browseren kan vælge den skarpeste.
Den registrerede MIME-type er image/vnd.microsoft.icon, men image/x-icon er langt mere udbredt, og browsere accepterer begge. ICO-data i Base64 starter med AAABAA, som er den kodede filheader.
Et favicon som data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Det er praktisk at indlejre faviconet i HTML-dokumenter, der består af én fil, for eksempel eksporterede rapporter, dashboards gemt på disken og offlinedokumentation, og i prototyper eller interne værktøjer, hvor du ikke vil udrulle en separat fil. På et websted med mange sider er en almindelig /favicon.ico som regel bedre: Den downloades én gang og caches, mens en data URI gentages i hvert eneste HTML-svar.
Hvis du slet ikke vil have et ikon, forhindrer <link rel="icon" href="data:,">, at browseren anmoder om /favicon.ico.
Favicons i ICO, PNG eller SVG
Aktuelle browsere accepterer også favicons i PNG og SVG, for eksempel <link rel="icon" type="image/png" href="data:image/png;base64,...">. En enkelt PNG på 32 gange 32 pixel er ofte mindre end en ICO med flere størrelser; brug PNG til Base64 eller SVG til Base64 til dem.
Konverterer du en ICO til PNG, JPEG eller WebP her, beholdes kun ét billede, nemlig det, browseren vælger at vise. Vil du gå den anden vej og bygge en ICO-fil, så kod en PNG, og indsæt resultatet i Base64 til ICO, som laver ikoner fra 16 til 256 pixel.
Ofte stillede spørgsmål
Skal jeg bruge image/x-icon eller image/vnd.microsoft.icon?
image/vnd.microsoft.icon er den officielt registrerede type, mens image/x-icon er den, de fleste websteder bruger. Hvis et system forventer en bestemt type, så ret præfikset, når du har kopieret.Bevares alle ikonstørrelser i Base64-outputtet?
Ja, når du beholder det originale format. Hele filen kodes, så browseren stadig kan vælge den størrelse, den har brug for. Ved konvertering til et andet format beholdes kun ét billede.
Virker favicons som data URI i alle browsere?
Aktuelle browsere til computer viser dem i fanen. Bogmærker, genveje på startskærmen og nogle ældre browsere ignorerer muligvis et indlejret ikon, så offentlige websteder bør stadig have en faviconfil.