ウェブサイトをファビコンに保存しました

2026年6月20日原文(timwehrle.de)

概要

favicon にHTMLデータを格納するという 実験的手法 の紹介
画像の RGB値 に直接データを書き込むことで、 小規模なWebサイト を埋め込み
Canvas API を使って、faviconからデータを復元
実用性は低いが、 データ隠蔽やストレージの発想拡張 として面白い
代替手法や応用例 も簡単に紹介

faviconにWebサイトを隠す試み

DPIレジスタや他デバイス にデータを隠す発想から発展した実験
faviconは 画像（主にPNG） であり、 各ピクセルはRGB値＝バイト列 として扱える
ステガノグラフィ （画像へのデータ隠蔽）の応用
- 画像としてはノイズに見えるが、実際は HTMLデータ を格納
UTF-8バイト列 をそのままRGBチャンネルにマッピング
4バイトのヘッダ でデータ長を記録し、余分なピクセルの切り分けを実現

実装手順

HTMLを TextEncoder でバイト配列に変換
4バイト長ヘッダ を先頭に付加
1ピクセル＝3バイト （R,G,B）として順番に埋め込む
9x9ピクセル （81ピクセル）で、 208バイトのHTML＋4バイトヘッダ＝212バイト を格納
- 容量：239バイト、使用率：87%
faviconとしては 極小サイズ でも簡易Webサイトを格納可能

faviconからWebサイトを復元する方法

favicon画像を Canvas API で読み込み
各ピクセルの RGB値を抽出しバイト配列を再構築
先頭4バイトで データ長 を確認し、HTML部分を抽出
UTF-8デコード で元のHTMLを復元
サイト上では「 Render Website」ボタンで復元処理を実装

制約と実用性

favicon自体は Webサイト全体ではなく、コンテンツのみ を持つ
- JavaScriptのローダー が必須
容量は非常に小さい
他の配布手段のほうが実用的
目的は 技術的限界の探求や遊び心 の発露

代替アプローチ

SVG favicon に直接マークアップを埋め込み、読み出す手法
PNGのコメントチャンク （tEXt, zTXt, iTXt）を利用
ico形式 は複数解像度アイコンを格納可能で応用範囲拡大

Hackerたちの意見

これってタイミングの偶然？さっき、株ポートフォリオをURLとファビコンで保存するサイトを作ったばかりなんだ。1時間前に提出したよ！ https://news.ycombinator.com/item?id=48606396

ユーザーをドメイン間でリダイレクトすることで、ファビコンキャッシュをストレージとして使うこともできるよ。これは潜在的なフィンガープリンティングリスクとして提案されてるし、ブラウザがナイーブにインコグニートモード用にキャッシュを再利用すると、ユーザーをブラウザプロファイル間で追跡するのに使われるかもしれない。[0]: https://www.schneier.com/blog/archives/2021/02/browser-track...

└

これってもう直ったんじゃなかったっけ？ほとんど直ってると思ったけど。

└

OPのブログを読んだとき、「これってフィンガープリンティングに使われてるに違いない」って思った。フィンガープリンティング対策は、faviconと一緒にcanvas APIを使うことを考慮してるのかな？残念ながら、スーパークッキーサイトへのリンクは死んでるね。

ピクセルを使う代わりに、SVGファビコンを使って直接マークアップを保存して抽出するのはどう？このfavicon.svgを使ってみて！これを使ってSVGファビコンを使う方法：最後に、これを使って抽出してドキュメントボディに追加する：fetch(favicon.href).then(r => r.text()).then(t => document.body.innerHTML += t.match(//)[0]);

└

そうそう、俺がその記事を書いたんだ。これ（もちろん）もっと実用的だね。指摘してくれてありがとう。ペイロードをXMLファイルの中の隠れたテキストじゃなくて、実際のピクセルデータに「生きさせたかった」んだ。だからこの方法にしたんだ :)

└

SVGはラスタ画像を埋め込めるよ：base64エンコードされたバイト。だから、この実験を重ねることができる。faviconはSVGで、その中にエンコードされたラスタがあって、そのバイトがエンコードされたHTMLになってる。少なくとも、これは驚くべきCTFのステップになるだろうね。

└

正規表現？うわ、めんどくさい。正しい名前空間でXMLとしてちゃんとエンコードして、それを読み込んで、そこから取り出すか、SVGファイルを提供してHTMLを埋め込むようにすればいいんだ。理論的には定義できるはずだけど、実際にはFirefoxもChromiumもfaviconでそれをうまく処理できてないみたいで、残念だね。

└

ただ、これは私の風車を傾けるためのものだからね。[\s\S] はもっと短く、正確に [^] と書けるよ。

└

「なぜ代替案ではないのか」は、「面白いバリエーションを紹介する」って形で言い換えた方がいいね。だって、どちらのアプローチも技術で遊んでるだけだから、楽しさや好奇心、探求心のためにね。ピクセルに保存するのは楽しいアプローチで、ルーブ・ゴールドバーグ的なものができるよ。

PNGには、コメントチャンクのtEXt、zTXt、iTXtがあるよ。ファイルに好きなだけコンテンツを詰め込んだ、完全に普通の画像を持つことができる。まぁ、それはあんまり面白くないかもね。

└

うん、それもいいね、指摘してくれてありがとう。

Hacker Newsで議論の続きを見る

ハクソク