ファビコン一括生成
1枚の画像から、favicon.ico（16・32・48px）、各サイズのPNG、apple-touch-icon（180px）、manifest.json用のアイコン（192・512px）とmanifest.jsonをまとめて生成し、ZIPでダウンロードできるツールです。余白や背景色、角丸も調整でき、すべてブラウザ内で処理されます。
画像をドラッグ＆ドロップ、またはクリックして選択
PNG / JPEG / WebP / SVG に対応（512×512px以上の正方形の画像がおすすめです）
使い方
- アイコンの元になる画像をドラッグ＆ドロップするか、クリックして選択します。512×512px以上の正方形の画像がおすすめです。
- 「アイコンの見た目」で余白、背景色、角丸を調整します。変更はすぐにプレビューに反映されます。
- 「manifest.json の設定」でアプリ名やテーマカラーを入力します。
- 「すべてZIPでダウンロード」で一式を保存し、Webサイトの公開ディレクトリに配置して、表示されたタグをHTMLの<head>に追加します。
このツールについて
ファビコンは、ブラウザのタブやブックマーク、スマートフォンのホーム画面などに表示されるWebサイトのアイコンです。表示される場所によって必要なサイズや形式が異なり、従来のfavicon.ico、高解像度ディスプレイ向けのPNG、iPhoneのホーム画面用のapple-touch-icon、Androidやインストール可能なWebアプリ（PWA）向けのmanifest.jsonのアイコンなどを用意する必要があります。
このツールは、1枚の画像からこれらをまとめて生成します。favicon.icoには16・32・48pxのPNG画像を格納しており、現在の主要なブラウザで表示できます。大きな画像から小さなアイコンを作るときは段階的に縮小して、細部がつぶれにくいようにしています。
ZIPには、アイコン画像に加えてmanifest.jsonと、HTMLに追加するタグの例（favicon-snippet.html）が含まれます。画像の読み込みから生成、ZIPの作成まで、すべてブラウザ内で完結し、画像がサーバーへ送信されることはありません。
よくある質問
SVG画像からも生成できますか？
できます。SVGはベクター画像のため、どのサイズでもくっきりしたアイコンを生成できます。幅・高さの指定がないSVGは512×512pxとして扱います。
生成したファイルはどこに置けばよいですか？
Webサイトのルート（ドメイン直下）に置くのが一般的です。Next.jsなどのフレームワークでは public ディレクトリに配置してください。別の場所に置く場合は、HTMLのタグとmanifest.json内のパスを書き換えてください。
透過PNGの背景はどうなりますか？
「背景色を付ける」をオフにすると透過のまま出力します。ただしiPhoneのホーム画面では透過部分が黒く表示されることがあるため、apple-touch-icon用には背景色の指定をおすすめします。
画像はサーバーにアップロードされますか？
アップロードされません。アイコンの生成とZIPの作成はすべてブラウザ内で行われます。