Så använder du verktyget
- Klistra in Base64-strängen eller data URI:n för en ikon, eller för den bild du vill göra om till en ikon.
- Kontrollera förhandsvisningen och måtten. En kvadratisk källbild ger den renaste ikonen.
- ICO är förvalt. Välj en storlek under Ikonstorlek (16, 32, 48, 64, 128 eller 256 pixlar) eller alternativet Flera storlekar.
- Ladda ned .ico-filen. Om indatan redan är en ICO och du vill behålla alla bilder i den oförändrade väljer du Original.
ICO-filer i Base64
En ICO-fil är en liten container: ett huvud, en katalog med poster och en bild per post, var och en lagrad som BMP- eller PNG-data. Huvudet börjar med bytena 00 00 01 00, så Base64 för en ikon börjar med AAABAA. Base64-kodade ikoner ser du i data URI:er för favicons, till exempel <link rel="icon" href="data:image/x-icon;base64,...">, i HTML-sidor som består av en enda fil och i API:er som returnerar webbplatsikoner.
Den registrerade MIME-typen är image/vnd.microsoft.icon, men image/x-icon är betydligt vanligare och fungerar överallt.
Vilken ikonstorlek ska du välja
| Storlek | Typisk användning |
|---|---|
| 16 × 16 | Webbläsarflik och bokmärke på vanliga skärmar |
| 32 × 32 | Webbläsarflik på skärmar med hög pixeltäthet |
| 48 × 48 | Ikoner på skrivbordet och i Utforskaren i Windows |
| 64, 128 | Större förhandsvisningar och programlistor |
| 256 × 256 | Vyerna Stora ikoner och Extra stora ikoner i Windows |
Alternativet Flera storlekar packar 16, 32, 48 och 256 i en enda fil, så att varje system kan välja den som passar bäst. Bilderna inuti är PNG-komprimerade, vilket bevarar transparensen och stöds av Windows Vista och senare samt av alla moderna webbläsare.
Använd ikonen som favicon
Webbläsare begär automatiskt /favicon.ico från webbplatsens rot, så det fungerar att spara filen där även utan någon HTML-kod. En Base64-kodad data URI i href sparar den förfrågan, men då laddas ikonen ned igen med varje sida i stället för att cachas separat. Moderna webbläsare accepterar också ikoner i PNG och SVG, och en vanlig lösning kombinerar båda:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">Utgå från en kvadratisk bild med enkla former och stark kontrast; fina detaljer försvinner vid 16 pixlar. Vill du ha en PNG-version för annan användning kan du prova Base64 till PNG.
Vanliga frågor
Vilken storlek ska favicon.ico ha?
En ikon med flera storlekar som innehåller bilder på 16, 32 och 48 pixlar täcker webbläsare och Windows. Alternativet Flera storlekar här lägger dessutom till 256 för stora ikonvyer.
Kan jag konvertera en Base64-kodad PNG eller SVG till ICO?
Ja. Klistra in den, låt ICO vara valt under Ladda ned som och välj en storlek. Alla bilder som din webbläsare kan visa går att konvertera.
Varför visar förhandsvisningen bara en storlek av min ikon?
En ICO-fil kan rymma flera bilder, men en förhandsvisning visar bara en av dem. Ladda ned som Original för att behålla alla bilder i filen.
Behåller ICO-filen transparensen?
Ja. Ikonerna lagras som PNG-data med en fullständig alfakanal, så rundade hörn och mjuka kanter förblir transparenta.
Hur lägger jag in en ikon i en data URI?
href i din <link rel="icon">-tagg.