アップロードなし, 100%ローカル, アカウントなし

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

ロゴやアイコンをアップロードして、すべての標準ファビコンサイズをPNGとしてダウンロードします。Apple Touch IconとPWAアイコンを含みます。何も端末を離れません。

ファビコンジェネレーターの仕組み

ファビコンジェネレーターは提供された画像を受け取り、Canvas drawImage APIを使って標準的なファビコンサイズにリサイズします。16x16、32x32、48x48、180x180(Appleタッチアイコン)、192x192(Android Chrome)、512x512(PWAマニフェスト)の6サイズすべてがブラウザで生成されるほか、16x16・32x32・48x48をまとめたレガシー形式のfavicon.icoも1つ生成されます。ソース画像はデバイスの外に出ることはありません。

完全なファビコンセットは、ブラウザタブアイコン、ブックマーク、ホーム画面ショートカット、PWAスプラッシュスクリーンの全範囲をカバーします。高解像度のソース画像(少なくとも512x512ピクセル)を使用することで、ダウンスケールアルゴリズムに最も多くの詳細が提供されます。生成された各ファイルを参照するために必要なHTMLのリンクタグが、ページのhead要素に直接コピーできるスニペットとして表示されます。

ファビコンジェネレーターの使い方をステップごとに解説

  1. ソース画像をアップロードエリアにドロップします。最良の結果を得るには512px以上の正方形画像を使用してください。
  2. 結果パネルで6つの生成されたサイズをプレビューします。
  3. 結果パネルから6つのPNGファイルとfavicon.icoをダウンロードします。
  4. すべてのサイズのリンクタグを示すHTMLスニペットをコピーします。
  5. PNGファイルをサイトのルートに配置し、リンクタグをページのheadに貼り付けます。

よくある使用例

  • 新しいWebサイトを立ち上げる開発者が、デザインツールのサブスクリプションなしにブランドロゴからすべてのファビコンサイズを生成する必要がある場合。
  • ホーム画面のインストールのためにWebアプリマニフェストに必要な192x192と512x512のアイコンを生成するPWA開発者の場合。
  • サイトのアイデンティティを更新し、デフォルトのファビコンをロゴから作成したカスタムアイコンに置き換えるブロガーの場合。
  • オフラインのデザインソフトウェアをインストールするのを待たずに、クライアントプロジェクト用の完全なファビコンセットをすばやく用意するフリーランサーの場合。

よくある質問

ソースとして使用できる画像フォーマットは何ですか?

ブラウザがデコードできるフォーマットであれば入力として機能します:JPEG、PNG、WebP、GIF、SVG。SVGソースの場合、ブラウザはリサイズ前にベクターをCanvasにラスタライズするため、出力PNGはフォーマットに関わらずラスター画像になります。

ブラウザタブでファビコンがぼやけているのはなぜですか?

16x16と32x32のサイズは非常に小さいです。ソース画像に細かい詳細や細い線が含まれている場合、ダウンスケールで残らないことがあります。小さいサイズでは、複雑なイラストよりも明確な形状のシンプルで大胆なデザインの方がはるかに効果的です。

ツールはICOファイルを生成しますか?

はい。6つのPNGに加えて、ツールは16x16、32x32、48x48の画像を1つのファイルにまとめたfavicon.icoも生成します。これは古いWindowsブラウザや一部のクローラーが今でもサイトのルートで探す形式です。最新のブラウザはPNGのリンクだけで問題なく動作するため、両方を公開しても損はなく、それぞれのクライアントが好きな方を選べます。

ソース画像はサーバーで処理されますか?

いいえ。各サイズを生成するCanvas drawImageの呼び出しはブラウザタブで実行されます。ソース画像はローカルディスクから読み込まれ、6つのPNG出力はメモリ内で作成されてダウンロードとして提供されます。ファイルデータはサーバーを経由しません。

Appleタッチアイコンにはどのサイズを使用すべきですか?

iOSおよびiPadOSは、apple-touch-iconリンクタグで参照された180x180ピクセルのPNGを使用します。このサイズは、ユーザーがAppleデバイスのホーム画面にサイトを追加するときに使用されます。ツールは他のサイズとともにこのファイルを生成します。

ソースとして長方形の画像を使用できますか?

はい、ただし出力は正方形のCanvasに収めるためにレターボックスまたはピラーボックスになります。最良の結果を得るには、最初から正方形のソース画像を使用するか、ツールを使用する前にソース画像を正方形にクロップしてください。