How to use
- Drop a .ico file onto the drop area, click to choose one, or paste an image.
- Keep the original format so that all sizes stored in the icon stay in the output.
- Check the encoded size; an icon with many sizes can be larger than you expect.
- Copy the data URI for a favicon link tag, or copy the img tag, CSS or Markdown output.
The ICO format
ICO is the Windows icon format and the original favicon format. It is a container: a short directory lists one or more images with their width, height and colour depth, and each image is stored as bitmap data or, for large sizes such as 256 by 256, as an embedded PNG. A typical favicon.ico holds 16, 32 and 48 pixel versions so the browser can pick the sharpest one.
The registered MIME type is image/vnd.microsoft.icon, but image/x-icon is far more common, and browsers accept both. ICO data in Base64 starts with AAABAA, the encoded file header.
A data URI favicon
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Inlining the favicon is handy for single-file HTML documents such as exported reports, dashboards saved to disk and offline documentation, and for prototypes or internal tools where you do not want to deploy a separate file. On a website with many pages a normal /favicon.ico is usually better: it is downloaded once and cached, while a data URI is repeated in every HTML response.
If you want no icon at all, <link rel="icon" href="data:,"> stops the browser from requesting /favicon.ico.
ICO, PNG or SVG favicons
Current browsers also accept PNG and SVG favicons, for example <link rel="icon" type="image/png" href="data:image/png;base64,...">. A single 32 by 32 PNG is often smaller than a multi-size ICO; use PNG to Base64 or SVG to Base64 for those.
Converting an ICO here to PNG, JPEG or WebP keeps only one image, the one the browser chooses to display. To go the other way and build an ICO file, encode a PNG and paste the result into Base64 to ICO, which writes icons from 16 to 256 pixels.
Frequently asked questions
Should I use image/x-icon or image/vnd.microsoft.icon?
image/vnd.microsoft.icon is the officially registered type, while image/x-icon is the one most sites use. If a system expects a particular one, edit the prefix after copying.Are all icon sizes kept in the Base64 output?
Yes, when you keep the original format. The whole file is encoded, so the browser can still pick the size it needs. Converting to another format keeps a single image.
Do data URI favicons work in every browser?
Current desktop browsers display them in the tab. Bookmarks, home screen shortcuts and some older browsers may ignore an inline icon, so public websites should still provide a favicon file.