When A Favicon Becomes The Entire Website

Putting hidden data in places where few expect it can be a fun hobby or even a professional career. In the case of [Tim Wehrle] it’s just the former. His most recent project in this area uses a favicon image for storing a HTML-based website and rendering its contents within the browser after the favicon has been downloaded.

To pull this off, a very basic HTML page was turned into a series of UTF-8 encoded bytes that were then declared to be a standard PNG image. The original 208 byte payload plus 4-byte PNG header only used part of a 9×9 pixel favicon. With a larger favicon image as typically used you could thus easily store more data, whether as visual noise like here or a bit more hidden.

Of course there’s a catch, and in this case it’s the Typescript code to unpack the bytes from the “image” and render them; you have to load that separately. But still, in these days of all-singing, all-dancing websites that take forever to render, it’s refreshing to see what you can do with so few bytes that they fit in a favicon.

As for the purpose of such an approach, that’s left as an exercise for the reader, but you’re more than welcome to take a poke at the GitHub project and the demonstration site..

 

5 thoughts on “When A Favicon Becomes The Entire Website

  1. With all the byte-padding 64K things should have no shortage of spare space, actually overabundance of spare space. 32K ones, too (MCUs), if one knows how to use these.

    I’ve known people who tried their hands on smallest static HTML page challenge, no scripting, only a browser-built-in-whatever. I forgot the metrics, but it was something like under 1K in grand total while still being rendered properly. As far as the usability goes I am not sure there was any, so that’s that, it probably was just art for the sake of art.

Leave a Reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.