I Stored a Website in a Favicon

123 points - today at 5:33 AM

Comments

Tepix today at 6:30 AM

Instead of going via pixels, why not use a SVG favicon and directly store markup inside it and extract it?

Use this favicon.svg:

    <svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50%" cy="50%" r="50%" fill="orange"/>
    <p>hello HN!</p>
    </svg>

use this in your <head> to use a svg favicon:

    <link id="favicon" rel="icon" href="favicon.svg" type="image/svg+xml">

finally, use this in your <body> to extract it and add it to your document body:

    <script>
    fetch(favicon.href).then(r => r.text()).then(t => document.body.innerHTML += t.match(/<p[\s\S]*p>/)[0]);
    </script>

Walf today at 6:44 AM

PNG has comment chunks tEXt, zTXt, and iTXt. You can have a completely normal image whose file is stuffed with as much content as you want. That is less fun, I suppose.

sheept today at 6:19 AM

You can use the favicon cache as storage too, by redirecting users across domains. It's been proposed as a potential fingerprinting risk[0], and if a browser naively reuses the cache for incognito mode, it could be used to track users across browser profiles.

[0]: https://www.schneier.com/blog/archives/2021/02/browser-track...

franciscop today at 6:05 AM

Is this timing coincidence? I just submitted 1h (30 mins before this) ago a website I just made about storing your stock porfolio in a URL + favicon!

https://news.ycombinator.com/item?id=48606396

esquivalience today at 7:22 AM

I found the agressively staccato, clearly LLM-generated content extremely difficult to read.

jorisw today at 8:46 AM

Fun Fact: You can use any inline SVG for a favicon and keep it right in the HTML document.

This also allows you to use an emoji directly as a favicon, like so:

  <link
    rel="icon"
    type="image/svg+xml"
    href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>(your emoji here)</text></svg>"
  />

(HN isn't showing the emoji)

berkes today at 8:39 AM

I'd imagine the (aggressive) caching of the favicon by browsers makes it a challenge, but you could generate the favicon dynamically, then have JS extract the sequentially. Basically streaming arbitraily large content to a webpage via favicons. Via blocks of 239 bytes.

It may be a fun, novel way to proxy webpages that are otherwise blocked. Though, i guess, the service rendering the favicons can just as easily be blocked then.

tetrisgm today at 8:45 AM

Love it. Did you see the old effort to store the page in the url? https://github.com/jstrieb/urlpages

soanvig today at 7:31 AM

Honestly it didn't interest me, but I do remember from back in the days full websites rendered by a browser from... Empty files. https://mathiasbynens.be/notes/css-without-html

beardyw today at 6:52 AM

I would have used a minimal service worker to unpack the web data and present it as if it were just a normal page being loaded.

superjose today at 5:53 AM

Pretty cool tbh!!! Would have loved seeing the decoder code!!!

It's also pretty interesting to think how an attacker could exploit images on his behalf. Never thought that would be a way!!!

Thanks!

bozdemir today at 6:30 AM

Very cool. I wonder is it possible to make a simple game with also leveraging the webassembly?

neon_me today at 8:02 AM

Is it cake? Game for devs.

ab_wahab01 today at 7:01 AM

Fascinating concept! Thanks for sharing this!

scoot today at 7:28 AM

Would have been more fun if the blogpost was rendered from the favicon.

fitsumbelay today at 6:54 AM

very cool and interesting after reading just the title I wrongly assumed this would be about svg

jibal today at 7:00 AM

Surprised that a minimal "website" only requires a small image = few pixels = few bytes to store it? Um, ok.

deleted today at 8:05 AM

pizzaballs today at 8:03 AM

[dead]

anujshashimal98 today at 5:36 AM

[flagged]

shaharamir today at 6:48 AM

Amazing!