Why Base64-Encode a Favicon or Icon?
Embedding an icon as a Base64 data URI eliminates a separate HTTP request — the browser decodes the icon inline from the HTML or CSS itself. For a tiny favicon (typically 1–5 KB), this can shave a request off the page's critical path, which matters more on high-latency mobile connections than the raw byte count suggests.
How Do You Embed a Base64 Favicon?
Upload your icon above to get ready-to-paste <link> tags for the <head> of your HTML, covering both the standard favicon and the Apple touch icon used on iOS home screens. Browsers support data URIs in rel="icon" the same way they support them in <img> tags.
When Should You Avoid Inlining a Favicon?
A linked favicon.ico file gets cached once and reused across every page on your domain. An inlined Base64 favicon is duplicated inside every HTML page's source and can't be cached separately — so for a multi-page site, a normal linked file is usually still the better choice. Base64 favicons make the most sense for single-page apps, email signatures, or contexts where you can't reference an external file at all.
Recommended Icon Sizes
| Use case | Size | rel attribute |
|---|---|---|
| Standard favicon | 16×16 / 32×32 | icon |
| Apple touch icon (iOS home screen) | 180×180 | apple-touch-icon |
| Android/Chrome (manifest-based) | 192×192 / 512×512 | referenced in manifest.json, not inlined |
For general image-to-code embedding beyond favicons, see the embed code generator. For uncommon icon formats like .ico specifically, see Base64 to ICO.
Frequently Asked Questions
Can I use a Base64 data URI as a favicon?
Yes. Modern browsers accept <link rel="icon" href="data:image/png;base64,..."> the same way they accept a linked file.
Does inlining a favicon speed up my site?
It removes one HTTP request on first load, but since a linked favicon.ico is cached across every page after the first visit, inlining can end up costing more bytes overall on multi-page sites. It's most useful for single-page apps or standalone HTML documents.
What image format should I use for a Base64 favicon?
PNG for a crisp, small raster icon, or SVG if your icon is a simple vector shape — SVG favicons scale to any size and often produce a smaller Base64 string than PNG.