Developer Stores a Whole Website Inside a Favicon's Pixels

Every website has a favicon: the small icon in a browser tab, uploaded once and then forgotten. Developer Tim Wehrle turned that assumption around and built a small demo in which an entire web page is stored inside the favicon pixels and decoded back by the browser at runtime.

Bytes hidden in RGB channels

The approach is a direct form of steganography. Every pixel of an image carries red, green and blue values — three bytes. Wehrle took the UTF-8 bytes of a small HTML document and wrote them straight into those channels, pixel after pixel, producing an image that looks like visual noise. A four-byte header is prepended with the payload length, because the image may contain unused pixels at the end and without the length value there is no way to know where the real data stops.

The payload itself was only 208 bytes of HTML; with the header the total came to 212 bytes. At three bytes per pixel that requires 71 pixels, and the smallest square image that can hold them is 9x9 pixels, or 81 pixels in total. The finished image uses 87% of its 239-byte capacity.

Reading the site back out

Recovering the page uses APIs every browser already provides. The favicon is loaded as an image, drawn onto a canvas, and then JavaScript reads the pixels back through the canvas API. The code reconstructs the byte array, reads the first four bytes to learn the payload length, extracts the data and decodes it as UTF-8 text — at which point the original HTML is available again.

There is one catch: the favicon does not contain the website, it contains a website's content. A small bootstrap script is still needed to decode the image; without JavaScript the file is just a PNG that happens to hold HTML. The demo page includes a "Render Website" button that reads the favicon, decodes the HTML and replaces the page with the reconstructed content.

Useful? Not really — and that is the point

Wehrle is direct about the practicality: the storage capacity is tiny and the page cannot bootstrap itself without JavaScript, so there are dozens of better ways to ship a small HTML document. The experiment follows an earlier one in which he stored two bytes in his mouse's DPI register, and it belongs to the same category — probing what ordinary formats will tolerate.

He also lists alternatives: embedding markup directly in an SVG favicon, using PNG comment chunks such as tEXt, zTXt and iTXt, or the ICO format, which can hold several icons at different resolutions. The demo is available on his site, and the source code is published on GitHub.