ファビコンジェネレーター
画像を1枚アップロードするだけで、あらゆるサイズのファビコンをダウンロード — 16〜512pxのPNGとHTMLのlinkタグ付き。処理はすべてブラウザ内で完結します。
1,159回閲覧
画像を読み込めませんでした — PNG/JPG/WebPをお試しください
2026年に必要なサイズ
デバイスや利用シーンごとに求められるファビコンのサイズは異なります。ファビコンは1つのファイルではなく、複数ファイルからなる「ファミリー」だからです。ブラウザのタブでは16×16pxや32×32pxという極小サイズのPNGが使われます。iOSの「ホーム画面に追加」機能では180×180pxのapple-touch-iconが使われます。Androidやインストール済みのPWAは、ホーム画面やスプラッシュ画面用の画像として、Webアプリマニフェストから192×192pxと512×512pxのアイコンを取得します。1枚のソース画像だけでこれらすべてに直接対応することはできません — 512pxのロゴを16pxのタブにそのまま押し込めば細部がほぼ失われますし、16pxのアイコンを512pxに引き伸ばせばぼやけてブロック状に見えてしまいます。そのため正しいアプローチは、1つの高解像度のソース画像を、あるサイズから別のサイズへ拡大縮小するのではなく、それぞれの目標サイズごとに個別にレンダリングし、サイズごとにピクセルを新しく描き直すことです。
このツールが行うのはまさにそれです。ソース画像をブラウザ内のHTML canvasに読み込み、16、32、48、180、192、512ピクセルという6つの標準サイズすべてに、それぞれ元画像から直接描き直してリサイズします。そのうえで、対応するPNGファイルと、サイトの<head>に貼り付ける<link>タグを提供します。アップロードは一切発生しません — リサイズ処理はお使いの端末上でCanvas APIを使って行われます。
最小サイズを起点に設計する
16pxでは非常に多くの細部が失われるため、ファビコンのデザインは最大サイズではなく最小サイズを起点に逆算して考える必要があります。フルのロゴタイプではなく、シンボルマークだけを切り出しましょう — 文字は24px前後を下回ると読めない染みのようになってしまいます。ブラウザはライト/ダークのテーマを切り替えるため、明るいタブバーと暗いタブバーの両方に対して強いコントラストを保ってください。最小サイズでは半透明の端のピクセルがノイズのように見えることがあるため、透明背景よりも単色の背景の方が概して見やすくなります。多くのブランドが、フルのロゴが16pxのテストに耐えられないという理由から、1文字やイニシャル、記号だけのシンプルな「アプリアイコン」版を専用に用意しています。
インストール可能なサイトにおいて192pxと512pxのアイコンを結びつけるマニフェストファイルについても理解しておくと役立ちます。Webアプリマニフェスト(manifest.json)はこの2つのサイズをURLで参照しており、AndroidやデスクトップのPWAインストーラーが、ホーム画面やアプリ切り替え画面用にどのアイコンを取得すべきかを判断できるようにしています。マニフェストのアイコンを省略したサイトでも機能自体は完全に動作します — ブラウザタブやiOSのホーム画面用アイコンは独立して機能します — ただし、インストールの提案自体は汎用アイコンにフォールバックしたり、そもそもインストールを提案しなくなったりする可能性があります。
よくある質問
.icoファイルはまだ必要ですか?
めったに必要ありません。現代のブラウザはすべて、linkタグのsizes属性で宣言されたPNGファビコンに対応しています。サイトのルートに/favicon.icoを残しておくことが役立つのは、その固定された旧来のパスを直接要求する非常に古いユーザーエージェントやツールに対してだけです。
どんな画像をアップロードすればいいですか?
正方形の画像が理想で、できれば512px以上、シンボルを中央に配置し周囲に十分な余白を持たせたPNG、あるいはSVGから書き出したラスター画像が望ましいです。正方形でない画像は、何も引き伸ばされないよう、リサイズ前に中央を基準に正方形へ切り抜かれます。
16pxにするとアイコンがぼやけて濁って見えるのはなぜですか?
16ピクセルという物理的な大きさでは、細部を表現することができません — 細い線やグラデーション、小さな文字はにじんで判別できなくなります。ソースとなるマークをシンプル化する、コントラストを上げる、あるいはフルのロゴが最小のタブアイコンに耐えられない場合は専用の小サイズ版をデザインすることを検討してください。
192pxと512pxのアイコンの違いは何ですか?
どちらもAndroidやPWAのマニフェストに使われます。192pxは通常密度のホーム画面アイコンに使われ、512pxは高密度画面や、PWAの読み込み中に表示されるスプラッシュ画面に使われます — Androidは状況に応じて適切な方を選択します。
すべてのサイズを追加すべきですか、それとも数種類だけで十分ですか?
現代的なサイトであれば、32pxと180pxのapple-touch-iconを用意するだけで、訪問者の大部分をカバーできます。192px/512pxのマニフェストアイコンは、サイトがPWAとしてインストール可能な場合にのみ追加してください。16pxと48pxのサイズは、主にレガシーな環境向けです。
関連ツール
問題を報告
ファビコンジェネレーター
コメント
まだコメントはありません — 最初のコメントを書いてみましょう！