ファビコン・アイコン生成

Webサイト用のファビコン・アイコンをまとめて生成

JPG・JPEG・PNG・WebP・SVG画像を1枚追加すると、ブラウザのファビコン、Apple Touch Icon、Android向けアイコンをまとめて生成できます。処理はすべてブラウザ内で行われます。

使い方

1. 元画像を追加します。ロゴやシンボルは、できるだけ余白が少なく中央に配置された画像がおすすめです。
2. 「中央で切り抜く」または「余白を追加」を選びます。
3. 必要に応じて透明背景を解除し、背景色を指定します。
4. 16pxから512pxまでのプレビューを確認します。
5. 必要なファイルを個別に保存するか、ZIPでまとめてダウンロードします。
6. 表示されたHTMLタグをコピーして、Webサイトのhead要素へ追加します。

生成されるファイル

favicon.icoには16×16、32×32、48×48の3サイズを収録します。ほかにfavicon-32x32.png、apple-touch-icon.png（180×180）、android-chrome-192x192.png、android-chrome-512x512.pngを生成します。SVGを入力した場合だけfavicon.svgも追加されます。

SVG入力とfavicon.svg

SVG入力ではベクターのままfavicon.svgを生成し、同じSVGからICO・PNGも作成します。JPG・PNG・WebPを入力した場合は画像を自動でベクター化せず、favicon.svgも生成しません。

生成するfavicon.svgからは、スクリプト、外部参照、foreignObjectなどファビコンに不要な危険要素を除去します。元SVGの見た目によっては、サニタイズ後に一部の装飾が変わる場合があります。

よくある質問

ファビコンとは何ですか？

ブラウザのタブ、ブックマーク、履歴などでWebサイト名と一緒に表示される小さなアイコンです。

どの画像形式に対応していますか？

JPG、JPEG、PNG、WebP、SVGに対応しています。SVG以外の画像をSVGへ自動変換・ベクター化する機能はありません。

元画像は正方形である必要がありますか？

いいえ。中央を正方形に切り抜くか、画像全体が入るように余白を追加できます。

favicon.icoには何サイズが入っていますか？

16×16、32×32、48×48の3サイズを1つのICOファイルに収録します。

favicon.svgはいつ生成されますか？

入力ファイルがSVGの場合だけ生成します。PNG・JPG・WebPから、画像を埋め込んだだけのSVGは生成しません。

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

はい。初期設定は透明です。白などの背景が必要な場合は透明を解除して任意の色を指定できます。

Apple Touch Iconとは何ですか？

iPhoneやiPadでWebサイトをホーム画面へ追加したときなどに使われるアイコンです。このツールでは180×180 PNGを生成します。

Android向けの192×192・512×512画像はどう使いますか？

Web App Manifestのiconsへ指定する用途などに使えます。このツールでは画像ファイルを生成しますが、manifestファイル自体は生成しません。

生成したファイルはどこへ置けばよいですか？

一般的にはWebサイトの公開ルートへ配置し、ツールに表示されたlinkタグをhead要素へ追加します。フレームワークを使う場合は、そのフレームワークのpublicディレクトリ等へ配置してください。

画像はサーバーにアップロードされますか？

いいえ。画像の読み込み、SVGの確認、リサイズ、ICO・PNG・SVG・ZIPの生成はすべてブラウザ内で行われます。