A creative technical experiment that captivated Hacker News

I Stored a Website in a Favicon

Tim Wehrle

99 Points on Hacker News

02

The Challenge

Understanding the constraints of favicon technology

What is a Favicon?

01

Tiny Canvas Standard favicons are just 16×16 pixels — that's only 256 total pixels to work with
02

File Size Limits Typical favicon files are under 1KB, severely limiting what can be stored
03

Binary Format The ICO format uses a specific binary structure that must be preserved
04

Browser Compatibility The favicon must still display correctly across all modern browsers

04

The Solution

Pushing the boundaries of what's possible

How It Works

1

Encode Website

Compress and encode the entire website content into binary data

→

2

Pack into ICO

Embed the encoded data into a valid favicon file structure

→

3

Serve to Browser

The favicon displays normally while containing hidden data

→

4

Extract & Run

JavaScript decodes and renders the complete website from the favicon

Technical Approach

index.html

<!-- Favicon contains the entire website -->
<link rel="icon" href="favicon.ico">

<script>
  // Extract website from favicon
  fetch('/favicon.ico')
    .then(r => r.arrayBuffer())
    .then(data => {
      // Decode and render website
      const website = decode(data);
      document.body.innerHTML = website;
    });
</script>

The favicon acts as both a visual element and a data container for the entire website

99

Points on Hacker News

Demonstrating the creativity and technical innovation that captivates developers

Thank You

Sometimes the most creative solutions hide in the smallest places

https://www.timwehrle.de/blog/i-stored-a-website-in-a-favicon/