Favicon はブラウザのタブやブックマークに表示される小さなアイコンです。一口に「Favicon」と言っても、表示される場所によって必要なサイズが異なります。タブには 16×16、ブックマークバーには 32×32、iOS のホーム画面追加には 180×180(apple-touch-icon)、Android には 192×192 px が使われます。
このツールでは、アップロードされた画像を Canvas API で各サイズにリサイズして PNG として生成します。canvas.width = 32; canvas.height = 32 のようにサイズを設定してから drawImage() で元画像を描画すると、ブラウザが自動でリサイズしてくれます。
favicon.ico は少し特殊で、複数サイズの画像を一つのファイルにまとめた「コンテナ形式」です。ICO フォーマットのバイナリ構造を JavaScript で直接組み立てることで、ライブラリなしで生成しています。ファイルの先頭にヘッダー情報と各画像の位置を記録し、その後に BMP データを連結するシンプルな構造です。
最後に、生成した全ファイルを JSZip ライブラリで ZIP にまとめてダウンロードします。全工程がブラウザ内で完結するため、画像はサーバーに送られません。