How a Favicon Replaced an Entire Website
▼ Summary
– Tim Wehrle’s hobby project stores a complete HTML website inside a favicon image by encoding the HTML as UTF-8 bytes and declaring them as a PNG image.
– The original 208-byte HTML payload plus 4-byte PNG header only partially filled a 9×9 pixel favicon, and larger favicons could store more data.
– A separate TypeScript script is required to unpack the bytes from the “image” and render the website in the browser.
– The project demonstrates that a functional website can be stored in very few bytes, contrasting with modern large, slow-loading websites.
– The purpose of this technique is left open, with the project available on GitHub along with a demonstration site.
Hiding information in unexpected places can be a playful pastime or even a career, but for Tim Wehrle, it’s simply a hobby. His latest trick involves tucking an entire HTML-based website inside a favicon image, then rendering it in the browser once that tiny icon loads.
To make this work, a minimal HTML page was converted into a series of UTF-8 encoded bytes and then redefined as a standard PNG image. The original payload of 208 bytes, plus a 4-byte PNG header, occupied only a fraction of a 9×9 pixel favicon. A larger favicon, the kind most sites use, could store even more data, either as visible noise or something far sneakier.
There is, of course, a catch. The TypeScript code needed to unpack those bytes from the “image” and display them must be loaded separately. Still, in an era of bloated, slow-rendering websites, it’s refreshing to see what can be done with so few bytes that they fit entirely inside a favicon.
As for the practical use of this approach, that’s left for you to decide. Feel free to explore the GitHub project or check out the demonstration site to see it in action.
(Source: Hackaday)
