About the Favicon to Base64
Inlining a small icon as a Base64 data URI removes one HTTP request and guarantees the icon appears even before other assets load. It is a good trade for favicons, tiny logos and single-colour sprites; it is a poor trade for photographs, because Base64 adds roughly a third to the file size and the result cannot be cached separately.
How to use the Favicon to Base64
- Choose your icon file — ICO, PNG, SVG, WebP or JPG.
- Check the preview and the before/after size comparison.
- Copy the full data URI, the raw Base64, or a ready-made HTML tag.
- Paste it into your head section or stylesheet.
Why use this tool?
Ready-to-paste snippets
Get the link rel=icon tag and a CSS background-image line, not just a wall of characters.
Size comparison
See the original file size next to the encoded size so you can judge whether inlining is worth it.
Entirely local
The file is read by your browser with FileReader and never uploaded anywhere.
Frequently asked questions
How large should an inlined icon be?
As a rule of thumb, inline anything under about 4 KB. Above that the page HTML or CSS grows enough that a separate cacheable file is faster.
Do all browsers support data URI favicons?
Every modern browser does. Very old versions of Internet Explorer did not, which is why many sites still ship a /favicon.ico as a fallback.
Why is the Base64 longer than my file?
Base64 represents three bytes with four characters, so encoded data is about 33% larger than the original binary.