我曾经有过一个实验，将文件编码存储到一个图片中。
没有想到还有人想到将网站内容存入一个 Favicon，然后通过 JS 解析出来，有意思。
虽然想不到什么实际意义，但是是一次有趣的探索实验。

Tim Wehrle 的文章《I Stored a Website in a Favicon》是这样说的：
PS：代码放在 GitHub 上。

1. 编码过程：将 HTML 文本转为 UTF-8 字节数组 → 前置 4 字节记录载荷长度（便于截断尾部无用像素）→ 依次写入 PNG 像素的 R/G/B 通道（每像素存 3 字节），生成的图像看似随机噪点。

   <style>
       body {
           font-family: system-ui;
           max-width: 40rem;
           margin: 2rem auto;
       }
   </style>
   <h1>Website in a Favicon</h1>
   <p>Everything you're reading right now was decoded from favicon pixels.</p>
   

   HTML 载荷：208 字节 + 4 字节长度头 = 212 字节
   Favicon 部分：选择 9×9 正方形，81 像素，可以容纳 239 字节数据，Cover 上面的 HTML 负载（利用率约 87%）

2. 解码过程：浏览器加载 favicon → 用 Canvas API 绘制并读取像素 RGB 值 → 还原字节数组 → 读取前 4 字节获知长度 → 提取载荷 → UTF-8 解码得到原 HTML → 替换页面内容渲染。

3. 关键限制：favicon 只存内容，仍需一小段外部 JavaScript（bootstrap loader）来解码，无 JS 时它只是一张普通 PNG。