Base64 Favicon Generator
Turn a favicon into a Base64 data URI and copy a ready-to-paste
<link rel="icon"> tag — one less request, and your HTML works as a single self-contained file.
100% client-side. Your image never leaves your device.
Drop a favicon image to inline it as Base64
PNG, SVG, ICO or WebP · 16–48 px works best
How to inline a favicon as a Base64 data URI
A favicon declared as a data URI lives inside your HTML instead of a separate
/favicon.ico request. All modern browsers resolve a
<link rel="icon"> whose href is a
data:image/...;base64, string, so the icon appears in tabs and bookmarks exactly like a
file-based favicon. This generator encodes your image locally and hands you the finished tag.
- Add the favicon image. Drop a small PNG or SVG onto the generator, or paste one from the clipboard.
- Review the result. Check the detected type, size and Base64 length — a favicon should stay small.
- Copy the link tag. The first output is the complete
<link rel="icon">element, prefix and all. - Paste it into your
<head>. Place it with your other meta and title tags, then reload the page to confirm the tab icon.
What the generated tag looks like
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo..." />
The type attribute mirrors the MIME type of your source image: image/png,
image/svg+xml, image/webp or image/x-icon for .ico files. The
href is the full data URI, so the icon needs no other file, no path and no extra HTTP request.
Why inline a favicon
- One less request. The icon travels inside the document, so the browser never fetches a separate file.
- Single-file HTML. Email templates, exported reports and offline demos keep their icon with no asset folder.
- file:// pages. Documents opened straight from disk reliably show an inline icon, while relative favicon links may not resolve.
- No 404 noise. Pages without a real favicon file generate a /favicon.ico 404 on every first visit; an inline icon removes it.
Keep the payload small
The data URI is embedded in every page load, so size matters more than with any other inline asset. Aim for a source image of 16×16, 32×32 or 48×48 pixels and an encoded result under roughly 2–3 KB. A 32×32 PNG icon typically encodes to a few hundred characters. If your favicon source is large, resize it first — the browser will scale it down anyway, and you would just be shipping wasted bytes in your HTML.
PNG or SVG for an inline favicon?
SVG favicons scale cleanly to any tab or bookmark size and often encode to a shorter string than an
equivalent PNG. Link them with type="image/svg+xml". Their one weakness is older browser support,
so a common pattern is to declare both — an SVG data URI first and a PNG data URI as fallback:
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2Zy4uLg==" />
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo..." />Browsers pick the first format they support. Note that SVG favicons must contain their own viewBox and cannot rely on external CSS or fonts to render correctly when inlined.
When you still want a favicon.ico file
Some clients never read link tags: certain crawlers, feed readers and bookmark services request
/favicon.ico directly. Serving a real file at that path costs you one static file and covers those
cases, while the inline <link> takes care of the browser tab. The two approaches are not
mutually exclusive — many sites ship both.
Limitations worth knowing
- Apple touch icons need real PNG files; iOS does not render them from data URIs.
- Web app manifests reference icons by file path and do not accept data URIs in the icon list.
- Caching. An inline favicon re-downloads with every HTML page; a file-based favicon is fetched once and cached. At 1–2 KB this is negligible, at 50 KB it is not.
Private, browser-only encoding
The generator uses the browser's FileReader API. Your favicon is read on the current device and
the data URI is assembled locally — the file is not uploaded and nothing is stored. The same privacy applies
in reverse: Base64 is an encoding, not encryption, so treat the generated string with the same care as the
source image.
More Base64 converters
Frequently asked questions
Can a favicon be a Base64 data URI?
Yes. All modern browsers support a favicon declared as a data URI in a <link rel="icon"> element. The browser renders the inline image exactly like a favicon loaded from a separate /favicon.ico file.
How do I add a Base64 favicon to my HTML?
Paste the generated <link rel="icon" type="image/png" href="data:image/png;base64,..." /> tag into the <head> of your page. The generator produces the complete tag — copy and paste is all it takes.
What size should a Base64 favicon be?
Keep the source image small — 16×16, 32×32 or 48×48 pixels — and the encoded data URI under a few kilobytes. The favicon ships inside every page load, so a large payload would bloat your HTML.
Why use an inline favicon instead of favicon.ico?
An inline favicon saves one HTTP request, works in single-file HTML documents, and keeps working when a page is opened from the local file system where relative favicon links may not resolve.
Do I still need a favicon.ico file?
It is a good idea to keep one. Some crawlers, bookmark services and older clients request /favicon.ico directly instead of reading link tags. A real file at that path alongside the inline favicon covers every case.
Can SVG favicons be inlined as a data URI?
Yes — use the MIME type image/svg+xml and type="image/svg+xml" on the link tag. SVG favicons scale to any size and often encode smaller than PNG, but declare a PNG data URI as fallback for older browsers.