Generate a favicon straight from an image URL with the new /by-url page

There is now an even simpler way to send someone into RealFaviconGenerator with their image already loaded: a plain link. Meet /by-url.

Normally you open the homepage and drop or pick your image. The /by-url page skips that step entirely. Give it the URL of an image and it opens the favicon editor on that image immediately — exactly as if you had picked it yourself. From there it is the usual RealFaviconGenerator experience: preview on every platform, tweak each one independently, then get your package and HTML.

The whole point is that there is nothing to integrate. No API key, no SDK, no backend code. Just a URL you can put behind a link or a button.

How it works

The page lives at /by-url and expects a single url query parameter pointing to an image. If url is missing, you are simply redirected to the homepage.

Classic URL

Point url at a publicly reachable image:

https://realfavicongenerator.net/by-url?url=https://example.com/logo.svg

RealFaviconGenerator downloads that image server-side, then opens the editor on it. Because the fetch happens on the server, the image must be publicly accessible — no localhost, no assets behind authentication. SVG, PNG and JPEG all work, and SVG is, as always, the recommended master.

One detail bites everyone eventually: the image URL is a URL inside a URL. If it contains its own query parameters or special characters, you have to encode it. In practice:

const editorUrl =
  'https://realfavicongenerator.net/by-url?url=' +
  encodeURIComponent(imageUrl);

A bare ?url=https://cdn.example.com/logo.png?v=2 loses everything after the second ?. encodeURIComponent fixes that, and it costs nothing to always use it.

Data URL, with caution

You can also pass a data URL, embedding the image directly in the link:

https://realfavicongenerator.net/by-url?url=data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...

This is handy when the image only exists in memory — a canvas, a freshly generated logo — and you do not want to host it anywhere. As a nice side effect, data URLs are never fetched server-side: the bytes go straight to the in-browser editor, which fits the privacy model the rest of the tool follows.

But this is the "with caution" part:

  • Always URL-encode it. A raw base64 data URL contains + characters, and a query string turns + into a space, quietly corrupting your image. A & or # will truncate it outright. Wrap the whole data URL in encodeURIComponent and you are safe.
  • Mind the length. Browsers and servers cap URL length. A small SVG or icon is fine; a large PNG photo encoded in base64 will blow past that limit. When in doubt, host the image somewhere and use a classic URL instead.

Rule of thumb: data URL for small, ephemeral images; classic URL for everything else.

Use cases

I built this because a link is the lowest-friction integration there is. A few places where it shines:

Icon and logo sites: a free "Generate favicon" feature

If you run a site that produces icons or logos — an icon library, a logo maker, an AI logo generator — you can offer favicon generation to your users without writing a single line of integration code. You already have a URL for the image you just produced. Add a button:

<a href="https://realfavicongenerator.net/by-url?url=https://your-site.com/icons/42.svg">
  Generate favicon
</a>

That is the entire integration. Your users click it and land in the editor with their icon ready to go. A new feature, shipped this afternoon, with zero backend work.

AI agents and tools

This pairs particularly well with AI agents and automated tools. An agent that generates or selects an image can host it, even temporarily, then hand the user a /by-url link — or open it directly. The human then gets a real, visual favicon editor to review and adjust the result, instead of the agent guessing at icon sizes and HTML markup, which tends to go wrong. The agent does the creative part; RealFaviconGenerator does the favicon part, correctly.

For agents working with in-memory images, the data URL form means there is nothing to host at all.

Tutorials, docs and "Open in RealFaviconGenerator" links

Writing a guide about favicons, or building developer documentation? Deep-link your readers straight into the editor, preloaded with a sample image, the same way other tools offer an "Open in…" button. It turns a paragraph of instructions into a single click — useful for tutorials, README badges and integration guides.

Design handoff and brand portals

Teams that keep brand assets in a portal or a shared bucket — Figma exports, an S3 folder, a design system site — can put a "Make the favicon" link right next to the official logo. Designers export, developers click, the favicon ships, and nobody re-uploads anything by hand.

In short

/by-url is RealFaviconGenerator with the front door already open: one URL, the image preloaded, the full editor behind it, and the same browser-side processing as always. No API to learn, nothing to integrate.

Got a logo somewhere with a URL? Drop it into a /by-url link and see for yourself, or read the developer documentation to wire it into your own site.