favicon as – A hobbyist project by Tim Wehrle shows how a favicon can be turned into a whole, HTML-based website by hiding UTF‑8 bytes inside a declared PNG image—then unpacking and rendering the content in the browser after the favicon loads.
A browser doesn’t usually think twice about a favicon. It’s small, decorative, and fast to fetch—almost nothing. But in Tim Wehrle’s latest project, that tiny icon becomes the delivery mechanism for an entire HTML-based website.
The trick is as sneakily simple as it is clever: a basic HTML page is converted into UTF‑8 encoded bytes. and those bytes are then packaged to look like a standard PNG image. After the favicon is downloaded, TypeScript code unpacks the bytes from the “image” and renders the contents inside the browser.
Wehrle’s demonstration starts with a 208-byte payload. That payload, along with a 4-byte PNG header, only uses part of a 9×9 pixel favicon. In other words, the method already works within extreme limits—but it also hints at what’s possible if you scale up the favicon size.
With a larger favicon image, which is more typical in real-world usage, the approach could store more data. It could be hidden in a way that looks like visual noise inside the icon—or structured to carry more information without announcing itself.
There’s a catch, and it matters if you’re thinking beyond the stunt. The browser still needs the TypeScript code to unpack and render the contents. and that code has to be loaded separately. So the favicon alone doesn’t magically become a self-contained website; it’s the transport layer, not the entire stack.
The result is the kind of workaround that makes modern web development feel momentarily lighter. In a world of all-singing. all-dancing pages that take forever to render. the idea that something as small as a favicon can carry a website’s contents—within a few bytes—is a reminder that constraints can still produce creativity.
If you want to see how it’s done. the project on GitHub and the demonstration site are available for inspection. And as Wehrle leaves the purpose “as an exercise for the reader. ” the real question may be less about what it can do—and more about what people will try next once they realize the favicon is no longer just decoration.
favicon hidden data web tricks UTF-8 TypeScript PNG spoofing GitHub project browser rendering cybersecurity curiosity small data payload
So the favicon is secretly a whole website? Wild.
I don’t get it, like why would anyone do this besides being weird. Also aren’t browsers supposed to block stuff like that? Seems like a hack for people who know too much.
Wait so the PNG is fake and it’s carrying UTF-8 bytes? That’s basically malware vibes even if it’s just a demo. If you scale it up doesn’t that mean you can hide like… a payload in any icon and trick users? Idk seems sketch.
This sounds cool but also like it’s gonna get used for spam or tracking. They say the favicon isn’t the whole website unless the TypeScript loads separately, but like… who loads the TypeScript then? Browser? And if it’s separate then why not just host the page normally? Feels like tech for tech’s sake.