Разработчик Тим Верле решил проверить, можно ли спрятать веб-страницу… в favicon — той самой иконке вкладки браузера. Идея простая: favicon — это изображение, изображение — пиксели, а пиксели — байты. Вместо того чтобы хранить там иконку, он записал в RGB-каналы пикселей HTML-код.
Процесс такой: берётся HTML (в демке это заголовок Website in a Favicon и параграф), кодируется в байты через TextEncoder, спереди добавляется четырёхбайтовый заголовок длиной payload. Потом байты по порядку записываются — первый байт в красный канал первого пикселя, второй в зелёный, третий в синий, и так далее. Получившаяся картинка выглядит как цветной шум, но внутри неё — целая страница.
Самое удивительное — размер. HTML занял всего 208 байт, с заголовком — 212. Каждый пиксель хранит 3 байта, так что потребовался квадрат 9×9 пикселей (81 пиксель, ёмкость 239 байт). Использовано 87%. Маленькая веб-страничка помещается в картинку меньше обычного favicon.
Считать данные обратно браузер может сам: favicon загружается как изображение, рисуется на canvas, и JavaScript читает каждый пиксель. Скрипт переворачивает процесс — достаёт RGB-значения, восстанавливает массив байт, читает заголовок длины, извлекает payload и декодирует UTF-8. Всё, страница готова.
Конечно, есть нюанс: сам код для декодирования (bootstrap) должен быть на странице заранее. Без него favicon — просто PNG с закодированным контентом. В демке есть кнопка Render Website, которая запускает процесс и заменяет страницу на восстановленный HTML.
Практической пользы ноль: объём крошечный, нужен JavaScript, есть десятки простых способов раздать маленький HTML. Но эксперимент классно показывает границы возможного. Faviсon — это просто PNG, а PNG — просто байты.
В статье упомянуты и альтернативы: записать разметку прямо в SVG-favicon и читать на загрузке страницы, использовать текстовые комментарии PNG (tEXt, zTXt, iTXt) или формат ico с несколькими разрешениями.