ファビコンジェネレーター

ブラウザは複数のアイコンサイズを期待します: 古典的な16×16 favicon.ico、32×32タブアイコン、180×180 apple-touch-icon、192×192 PWAアイコン。正方形のロゴをアップロードし、完全なセットをダウンロード——ブランド資産をサーバーに送らずローカル生成。

ファビコンの生成方法

1. 正方形のPNGまたはJPGをアップロードします(512×512以上推奨)。
2. 生成されたサイズをプレビューします。
3. アイコンパックまたは個別ファイルをダウンロードします。
4. HTMLのheadにlinkタグを追加し、ファイルを/publicまたはサイトルートに置きます。

ファビコン設定の例

新しい静的サイト

favicon.icoと32×32 PNGを生成し、layout.htmlに標準のlink rel="icon"タグを追加します。

PWAマニフェスト

manifest.jsonのicons配列向けに192×192と512×512 PNGを書き出します。

リブランディングの差し替え

1つのマスターロゴを置き換え、すべてのサイズを再生成し、タブとホーム画面ショートカットを揃えます。

ファビコンジェネレーターを使うとき

サイトを公開し、標準のアイコンサイズが一度に必要なとき。
ラスタロゴはあるが、複数サイズの.icoファイルがないとき。
ブランド資産をアップロードせずローカル生成が欲しいとき。

HTML linkタグのチェックリスト

PNGサイズにはrel="icon"、iOSにはrel="apple-touch-icon"、任意でPWAにはmanifest.jsonを含めます。予測可能なパスにファイルを置きます(/favicon.icoはまだ古いクローラーの助けになります)。

よくある質問

ソース画像はどのサイズであるべきですか?

少なくとも512×512 pxの正方形。大きいマスターは、小さなロゴを拡大するよりダウンスケールがきれいです。

ICOとPNGファビコンは?

現代ブラウザはPNGを受け付けます。.icoはレガシーWindowsタブ向けに複数サイズをまとめます。

apple-touch-iconのサイズは?

iOSホーム画面ショートカットは180×180 px——最良の結果には透明度なしのPNGを使います。

透明背景は?

PNGタブでは動きます。iOSホームアイコンは白いマットが付くことがあるので、端末で試してください。

SVGソースは?

まず高解像度でSVGをPNGに変換し、その後ファビコンを生成します。