Logo を1枚アップロードするだけで、ウェブサイトに必要な一式のアイコンと favicon.ico を生成し、HTML 参照コードもコピーできます。本ガイドでは、サイズ、透明背景、デプロイのポイントを説明します。
favicon とは？
favicon は、ブラウザのタブ、ブックマーク、お気に入りに表示される小さなアイコンです。小さいですが、サイトがブックマークされた後に識別しやすいかどうかを左右します。
タブアイコンのほか、iOS のホーム画面への追加や、Android でアプリとしてインストールする際にも、より大きなサイズのアイコンが使われます。
なぜ複数のサイズを生成するの？
場面ごとに必要なサイズが異なります：タブには 16/32、ホーム画面アイコンには 180/192、アプリストアや起動画面には 512 が必要な場合があります。
大きな画像1枚だけを提供すると、ブラウザが縮小した際に小さなアイコンがぼやけやすくなります。本ツールはよく使われる規格をすべて一度に生成します。
- favicon.ico：互換性が最も高く、16/32/48 の3サイズを含む
- favicon-16x16.png / favicon-32x32.png：モダンブラウザのタブ用
- apple-touch-icon.png（180）：iOS のホーム画面への追加用
- android-chrome-192x192.png / 512x512.png：Android と PWA 用
元画像はどのくらいのサイズにすべき？
正方形で 512×512 以上の PNG の使用をおすすめします。正方形なら、生成時に切り抜かれたり余白が不均一になったりするのを防げます。
正方形でない場合は、「全体表示」（図形全体を保持し、四周に余白）または「敷き詰めて切り抜き」（キャンバスを埋め、はみ出た部分をカット）を選択できます。
透明背景と apple-touch-icon
透明背景はタブ内では通常すっきり見えます。ただし iOS のホーム画面アイコンは透明に対応しておらず、透明部分が黒くなります。
そのため、本ツールは apple-touch-icon を生成する際に自動で不透明な下地色（デフォルトは白）を使います。それ以外のサイズは、選択した透明設定が保持されます。
デプロイ方法は？
ダウンロードしたファイルをウェブサイトのルートディレクトリ（index.html と同じ階層）に置き、生成された HTML コードを
に貼り付けるだけです。ブラウザは宣言されたアイコンを優先的に使用します。favicon.ico はフォールバックとして、古いブラウザとの互換性を確保します。