Så använder du verktyget
- Släpp en .ico-fil på släppytan, klicka för att välja en fil eller klistra in en bild.
- Låt Behåll original vara valt så att alla storlekar som lagras i ikonen följer med i resultatet.
- Kontrollera den kodade storleken; en ikon med många storlekar kan vara större än du tror.
- Kopiera data URI:n för en link-tagg för favicon, eller kopiera img-taggen, CSS eller Markdown.
ICO-formatet
ICO är Windows ikonformat och det ursprungliga formatet för favicons. Det är en container: en kort katalog listar en eller flera bilder med bredd, höjd och färgdjup, och varje bild lagras som bitmappsdata eller, för stora storlekar som 256 gånger 256, som en inbäddad PNG. En typisk favicon.ico innehåller versioner på 16, 32 och 48 pixlar så att webbläsaren kan välja den skarpaste.
Den registrerade MIME-typen är image/vnd.microsoft.icon, men image/x-icon är betydligt vanligare, och webbläsare accepterar båda. ICO-data i Base64 börjar med AAABAA, det kodade filhuvudet.
Favicon som data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Att bädda in faviconen är praktiskt för HTML-dokument i en enda fil, till exempel exporterade rapporter, instrumentpaneler som har sparats på disk och offlinedokumentation, och för prototyper eller interna verktyg där du inte vill driftsätta en separat fil. På en webbplats med många sidor är en vanlig /favicon.ico oftast bättre: den laddas ned en gång och cachas, medan en data URI upprepas i varje HTML-svar.
Vill du inte ha någon ikon alls hindrar <link rel="icon" href="data:,"> webbläsaren från att begära /favicon.ico.
Favicon i ICO, PNG eller SVG
Aktuella webbläsare accepterar även favicons i PNG och SVG, till exempel <link rel="icon" type="image/png" href="data:image/png;base64,...">. En enda PNG på 32 gånger 32 är ofta mindre än en ICO med flera storlekar; använd PNG till Base64 eller SVG till Base64 för sådana.
Om du konverterar en ICO till PNG, JPEG eller WebP här behålls bara en bild, den som webbläsaren väljer att visa. För att gå åt andra hållet och skapa en ICO-fil kodar du en PNG och klistrar in resultatet i Base64 till ICO, som skriver ikoner från 16 till 256 pixlar.
Vanliga frågor
Ska jag använda image/x-icon eller image/vnd.microsoft.icon?
image/vnd.microsoft.icon är den officiellt registrerade typen, medan image/x-icon är den som de flesta webbplatser använder. Om ett system förväntar sig en viss typ kan du ändra prefixet efter att du har kopierat.Behålls alla ikonstorlekar i Base64-resultatet?
Ja, när du behåller originalformatet. Hela filen kodas, så webbläsaren kan fortfarande välja den storlek den behöver. Vid konvertering till ett annat format behålls en enda bild.
Fungerar favicons som data URI i alla webbläsare?
Aktuella webbläsare för datorer visar dem i fliken. Bokmärken, genvägar på hemskärmen och vissa äldre webbläsare kan ignorera en inbäddad ikon, så offentliga webbplatser bör ändå tillhandahålla en faviconfil.