Developer Encodes a Working Website Into a 9x9-Pixel Favicon

A developer encoded an entire (tiny) HTML page into the pixels of a favicon by treating the image as raw storage rather than an icon. The approach borrows from steganography but skips the disguise: each pixel’s red, green, and blue channels hold three bytes of the UTF-8-encoded HTML, with a four-byte length header prepended so the decoder knows where the real payload ends and unused padding begins. The result looks like visual noise, but a 208-byte page plus header fits into just 71 pixels — small enough to live in a 9x9 image, smaller than a typical favicon.

Reading the data back relies entirely on capabilities browsers already ship. The favicon loads as an image, gets drawn to a canvas, and JavaScript reads the pixel values via the canvas API, reversing the encoding to reconstruct the original markup. The key caveat is that the favicon doesn’t contain the website so much as the website’s content: a small JavaScript bootstrap loader is still required to decode the image and render it, so without that script the file is just a PNG.

The author is upfront that this has no practical use — capacity is minuscule, it depends on JavaScript, and there are far better ways to ship a small HTML document. The point is probing where the boundaries of “a favicon” actually are: it’s supposed to be an icon, but underneath it’s just a PNG, and a PNG is just bytes. The writeup also notes alternative tricks worth exploring, including embedding markup directly in an SVG favicon, abusing PNG tEXt/zTXt/iTXt comment chunks, or exploiting the multi-resolution ICO format.