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..