ファビコンジェネレーター
ブラウザは複数のアイコンサイズを期待します: 古典的な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に変換し、その後ファビコンを生成します。