ファビコン生成
ロゴや画像を 16/32/48/64/128 px のファビコンに変換——100% ブラウザ内で完結。
ソース
画像をここにドロップ
またはクリックして選択
オプション
ファビコンとは？
ファビコン（favorite icon の略）は、ブラウザのタブ、ブックマーク、履歴、アドレスバー、モバイルのホーム画面ショートカットなどでサイト名の隣に表示される小さな四角い画像です。一般的なサイズは 16×16 または 32×32 ピクセルですが、Retina や 4K など高 DPI ディスプレイでは鮮明に表示するため 48×48、64×64、さらには 128×128 のアイコンがよく使われます。ファビコンはユーザーがサイトを一目で識別する助けとなり、ブランド認知を強化し、Web プロジェクトのプロフェッショナルな印象を高めます。
歴史的には .ico コンテナが標準でしたが、現代のブラウザは <link rel="icon"> 要素を通じて PNG、GIF、SVG、WebP ファビコンを受け付けます。PNG は透過対応・互換性の広さ・画像編集ソフトやオンラインツールからの生成しやすさから、現在最も人気のある形式です。このファビコン生成ツールは選択したサイズの PNG を出力するため、変換手順なしで HTML に直接参照できます。
どのファビコンサイズが必要？
コンテキストによって必要なファビコンサイズは異なります。通常のデスクトップブラウザのタブには 16×16 アイコンが表示され、高 DPI ノートパソコンでは鮮明さを保つため 32×32 がレンダリングされます。ブラウザのアドレスバーや新しいタブページの「よく訪れるサイト」タイルには 32×32 または 48×48 がよく使われます。ユーザーがサイトを iOS や Android のホーム画面に追加すると、OS はより大きなアイコンを使用します——iOS では通常 180×180、Android では 192×192 / 512×512 です。下表は最も一般的なファビコンサイズとその用途をまとめたものです。
| サイズ | 典型的な用途 |
|---|---|
| 16×16 | 従来型ブラウザタブのファビコン、ブックマークバー |
| 32×32 | 高 DPI デスクトップブラウザの標準ファビコン、アドレスバー |
| 48×48 | Windows タスクバーのピン留め、一部ブラウザの新タブページ |
| 64×64 | デスクトップショートカット、大型ブックマーク表示 |
| 128×128 | Chrome ウェブストア、大型 PWA アイコン、macOS Dock |
ファビコンが1つだけ必要な場合は、32×32 PNG が最も安全なデフォルトです——すべてのモダンブラウザが対応し、標準・高 DPI 両方のディスプレイで鮮明に表示されます。このツールの「全サイズ」オプションを使えば、すべてのコンテキストを網羅する完全なセットをダウンロードできます。
ウェブサイトにファビコンを追加する方法
ファビコンを生成してダウンロードしたら、PNG ファイルをウェブサイトのルートまたは /assets/ ディレクトリにコピーし、各 HTML ページの <head> 内に以下の行を追加します。それぞれの <link rel="icon"> タグが異なるサイズを指し示し、ブラウザは現在のディスプレイに最適なものを選択します。
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-48.png" sizes="48x48" type="image/png">
<link rel="apple-touch-icon" href="/favicon-128.png">最大の互換性を得るため、サイトルートに favicon.ico も残しておくことをお勧めします。古いブラウザやツールは今でもその URL を既定でリクエストします。モダンブラウザは <link> タグで参照された適切なサイズの PNG を使用します。
ファビコン生成が必要な場面
混雑したブラウザタブバーで洗練された識別しやすいサイトにしたい場合、ファビコンは不可欠です。ファビコンの生成は多くの一般的なワークフローで高速かつ効果的なステップです：
- 新サイト公開。 公開前にファビコンを追加し、初日からタブとブックマークがプロフェッショナルに見えるように。
- ブランドリフレッシュ。 画像編集ソフトを開かずに新しいロゴから素早くファビコンを再生成。
- PWA。 インストール可能な PWA とホーム画面ショートカットに必要なアイコンセットを作成。
- オープンソースプロジェクト。 ドキュメントサイトやデモ用のファビコンを作成し識別性を向上。
- クライアント納品物。 ウェブサイト完成物と一緒に完全なファビコンサイズ一式を提供。
- 個人ブログ・ポートフォリオ。 カスタムアイコンで読者のタブバーで目立つ。
ファビコンの生成方法
このツールでファビコンを生成するのは数秒で、すべてブラウザ内で完結します。アップロード不要、登録不要、インストール不要です。以下の手順で進めてください：
- 画像をアップロード。 PNG、JPG、WebP、GIF、BMP ファイルをドラッグ＆ドロップ、またはクリックして選択。正方形の画像が最適です。
- サイズを選択。 単一のファビコンサイズ（16/32/48/64/128 px）を選ぶか、「全サイズ」で完全なセットをダウンロード。
- 生成。 「ファビコンを生成」をクリック。ツールが Canvas API で選択したサイズに再レンダリングし、各結果をプレビュー。
- ダウンロード。 「ファビコンをダウンロード」をクリックして PNG を保存。「全サイズ」の場合は各サイズが順にダウンロードされます。
すべてのステップが JavaScript と Canvas API でローカルに実行されるため、ソース画像がブラウザから外に出ることはありません。ツールは完全にプライベートで高速、機密性の高いブランド素材にも適しています。
このファビコン生成ツールは無料ですか？
はい、完全無料で登録・透かし・制限なし。
出力形式は？
透過対応の PNG。すべてのモダンブラウザが PNG をファビコン形式としてサポートしています。
.ico ファイルも生成できますか？
このツールは PNG を出力します。PNG はすべてのモダンブラウザで機能します。.ico は主に古いブラウザ向けで、/favicon.ico に自動的にフォールバックします。
画像はアップロードされますか？
いいえ、すべてローカル処理です。画像がブラウザから外に出ることはありません。