Instead of linking to a separate favicon.ico file, you can embed the entire icon directly into your HTML using a base64-encoded data URI. This eliminates the extra HTTP request browsers normally make to fetch a favicon, and it’s a handy trick when you want a fully self-contained page with no external file dependencies.
How It Works
Essentially, instead of linking the external ico file, the image data is placed directly in the href attribute of the link element. That means the entire favicon lives inline in your HTML, rather than sitting as a separate file your server needs to serve.
Base64 encoding generates characters from a set that includes Latin letters, numerals, plus, and slash, and it’s widely used in Multipurpose Internet Mail Extensions for email transport encoding. For favicons specifically, this same encoding lets you embed image bytes as plain text right inside an HTML attribute.
Converting an Image to Base64
You have a few options depending on your workflow.
Using the command line, you can encode any image file directly:
cat img | base64
This outputs the base64 representation of your image, which you can then paste into your favicon link tag.
Using an online converter, tools built specifically for this purpose will output ready-to-use HTML alongside the raw base64 string. These converters typically provide several output formats at once, including plain text, a data URI, a CSS background-image declaration, and a ready-made HTML favicon tag.
Adding It to Your HTML
Once you have the base64 string, the format for the link tag is consistent regardless of how you generated it:
<link rel="icon" href="data:image/x-icon;base64,<your base64 data here>" type="image/x-icon" />
A real, working example (a blank one-pixel icon) looks like this:
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />
The whole image file is included directly in the HTML this way, so there’s no need to upload a separate favicon.ico file to your server at all.
Setting It Dynamically With JavaScript
If you’d rather inject the favicon programmatically instead of hardcoding it into your HTML, you can do so at runtime:
(function() {
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'data:image/x-icon;base64,<add your base64 data here>';
document.getElementsByTagName('head')[0].appendChild(link);
})();
This approach either finds an existing icon link element or creates a new one, then sets its href to the base64 data URI directly. It’s a useful pattern if your favicon needs to change based on application state, like showing a different icon for unread notifications.
Where This Approach Makes Sense
All modern browsers support data URIs with base64 encoded images, and they work seamlessly across img src attributes, CSS backgrounds, and favicon sources alike. A few scenarios where this is worth using:
- Single-file demos or mockups. Base64-encoded images are useful for creating single-file mockups or demo HTML pages where you don’t want to manage a separate assets folder.
- Self-contained deployments. Base64 encoding ensures complete self-containment of your web application, improving reliability and reducing dependencies on external resources — your images stay accessible even if a CDN is down or blocked.
- Avoiding broken links during deployment. Since base64-encoded images travel with your code, this eliminates the need to manage separate image files and directories, simplifying deployment and reducing the risk of missing or broken image links.
Tradeoffs to Keep in Mind
- Base64-encoded images are inherently larger than their standalone equivalents, and for larger images the encoded string can get quite long — so this technique is best reserved for genuinely small images like favicons rather than full-size photos.
- Favicons encoded this way are baked into your HTML at build or edit time, so any time you want to change the icon, you need to regenerate and re-paste the base64 string rather than just swapping out a file.
- This approach generally works across all modern browsers except for older versions of Internet Explorer, which is rarely a concern today but worth knowing if you have legacy support requirements.
Join The Discussion
Have you used base64-encoded favicons in your own projects, and did it actually help with load times or deployment simplicity in practice? Share your experience with embedding images this way versus linking to standalone files, and if you’ve run into any browser quirks or size tradeoffs worth flagging, it’d be great to hear how you worked around them.
