Data URI Generator

What this tool does

Data URI Generator builds RFC 2397 data: URIs from code you type or a file you choose. It picks the smaller encoding for text formats, can add a UTF-8 charset parameter, and wraps the result as a CSS url(), @font-face rule, img tag, download link or iframe.

A data URI packs a whole resource into a URL: data:[MIME type][;charset][;base64],<data>, as defined in RFC 2397. Browsers treat it like a normal file, so you can use it in an img src, a CSS url(), a link href or an iframe without hosting anything. It is ideal for small icons, inline SVG backgrounds, web fonts in a single stylesheet, downloadable sample files generated in a page, and test fixtures that must not depend on a server.

This generator accepts either text you type, with a MIME type such as image/svg+xml, text/css, text/html or application/json, or any file from your device, whose type is taken from the file or detected from its signature. For text formats you can choose minimal percent-encoding, which escapes only characters that are unsafe in URLs and keeps SVG readable and usually shorter than Base64. Binary files always use Base64. CSS-friendly mode collapses line breaks and swaps double quotes for single quotes so the URI fits inside url(""). The stats compare the result with the Base64 length, and images are previewed safely through an img element. Nothing is uploaded.

How to use Data URI Generator

1. Choose Text or code, or File, as the Source.
2. Type or paste content and choose its MIME type, or drop a file and optionally override its type.
3. Select the Encoding: percent-encoded text or Base64.
4. Toggle “Add ;charset=utf-8” and “CSS-friendly percent-encoding” as needed.
5. Pick “Output as” to get the bare URI or a CSS or HTML snippet, then copy or download the result.

Tips for better results

• For SVG in CSS, percent-encoding with single quotes is the most compact form that works in every modern browser.
• Add ;charset=utf-8 to text/html or text/plain data URIs that contain non-ASCII characters, or they may display as garbled text.
• Fonts embedded with @font-face should be WOFF2, which is already compressed.
• Modern browsers block top-level navigation to data: URIs typed or linked from pages, so use them for embedding rather than as links to open.

Common use cases

• Embedding an SVG icon as a CSS background without a separate file.
• Creating a download link for a generated JSON or CSV file in a demo page.
• Inlining a small font or image into a self-contained HTML report.
• Producing test URLs for a parser, crawler or content security policy check.

Common mistakes to avoid

• Leaving a “#” unescaped in an SVG colour such as fill="#fff"; browsers treat it as the start of a fragment and truncate the image. Percent-encoding here escapes it as %23.
• Using double quotes inside an SVG and around the CSS url() value, which ends the string early.
• Embedding large files as data URIs, which cannot be cached separately and inflate every page that includes them.