ファビコンとは何ですか？必ず設定した方がいいですか？

ファビコン（favicon）は、ブラウザのタブやアドレスバー、ブックマークに表示されるサイトの目印アイコンです。必須ではありませんが、設定しないと白紙や既定アイコンが表示され素っ気ない見た目になります。たくさん開いたタブやブックマークの中からサイトを見分けやすくなるため、設定しておくのがおすすめです。

どのサイズを用意すればいいですか？

一般的なサイトなら16・32・48pxがあれば基本のファビコンとして十分です。iPhone・iPadのホーム画面追加に対応するなら180px（Apple touch）、Android・PWAに対応するなら192pxと512pxも用意します。本ツールはこれらをまとめて生成するので、貼り付け先に合わせて必要なものを使ってください。

正方形でない画像を使うとどうなりますか？

アイコンは正方形の枠で表示されるため、そのままだと中心がずれたり余白が出たりします。本ツールでは「中央を正方形にクロップ（はみ出しを切り取る）」か「全体を収める（余白を背景色で足す）」を選べます。ロゴなど全体を見せたいときはfit、写真の主要部分を切り出したいときはクロップが向きます。理想は元から正方形の画像を用意することです。

背景を透過にできますか？

はい。背景色で「透過」を選ぶと、PNGの透明を保持したまま書き出します。背景のないロゴやアイコンに向いています。白や黒、任意のHEX色を選ぶと、fit時の余白や元画像の透明部分がその色で塗られます。タブの背景色になじませたい場合などに使い分けてください。

生成した画像はどうやってサイトに設定しますか？

各サイズをダウンロードしてサーバー（サイトのフォルダ）に置き、画面下のスニペットをHTMLの内に貼り付けます。favicon-16.png などのファイル名・パスは、実際に置いた場所に合わせて変更してください。PWAを作る場合は、192pxと512pxを manifest.json の icons に登録します。

選んだ画像はどこかにアップロードされますか？

いいえ。画像の読み込み・正方形化・各サイズへの縮小・PNG書き出しはすべてお使いのブラウザ内（Canvas）で行われ、画像データがサーバーへ送信されることはありません。オフラインでも動作するので、公開前のロゴや社内素材でも安心して使えます。

ファビコン生成 - 画像から16〜512pxのfaviconとApple touchアイコンをブラウザ内で作成

ここに画像をドラッグ＆ドロップ
または

画像ファイルを選択

PNG / JPEG / WebP / SVG など・正方形の画像が理想です

正方形でない画像の扱い

中央を正方形にクロップ（はみ出しは切り取り）全体を収める（余白を背景色で追加）

背景色（透過・fit時の余白・元画像の透明部分に使用）

透過白黒カスタム

透過を選ぶと、PNGの透明を保持します（背景がないアイコン向き）。

各サイズを個別にダウンロードできます。プレビューは実際のピクセル数で表示しています。

16 × 16 px

ブラウザのタブ・アドレスバー

16px を保存

32 × 32 px

タブ（高解像度）・タスクバー

32px を保存

48 × 48 px

Windowsのショートカット等

48px を保存

180 × 180 px

Apple touch（iOSホーム画面）

180px を保存

192 × 192 px

Android / PWA（ホーム追加）

192px を保存

512 × 512 px

PWAスプラッシュ・ストア表示

512px を保存

HTMLへの設置スニペット（<head> 内に貼り付け・パスはご自身の配置に合わせて変更）

⭐ ファビコン生成

画像の選択

生成設定

生成結果