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

画像をアップロードして、すべての標準ファビコンサイズをPNGで生成します。

ここに画像をドラッグ&ドロップするか、クリックして選択

正方形の画像が最良の結果を生成します(PNG、JPG、SVG)

ファビコンサイズの説明

16×16 · 標準のブラウザタブのファビコン

32×32 · Retinaタブ、タスクバーショートカット

48×48 · Windowsサイトショートカット

180×180 · Apple Touch Icon(iOSホーム画面)

192×192 · Android Chrome、PWAマニフェストアイコン

512×512 · PWAスプラッシュスクリーン、Google検索

Favicon の小史

Favicon は1999年3月にリリースされた Internet Explorer 5 の Microsoft 機能として誕生しました。Microsoft はサイトのルートに /favicon.ico を探しに行き、お気に入りバーで favorite サイトの横に表示する慣行を導入しました。これが「favicon」(favorite icon)という名前の由来です。最初の選択は Windows の独自 ICO 形式で、複数のビットマップサイズを1つのファイルに含めることができました。他のブラウザはこの慣行をほぼ即座に採用し、文書ヘッダーの <link rel="icon"> タグで指示される PNG favicon もサポートしました。Apple の iPhone(2007年発売)は apple-touch-icon の慣行を追加しました。これは 180×180 の PNG で、ユーザーがサイトを iOS のホーム画面に追加したときに、ネイティブアプリアイコンと同じサイズで表示されます。Progressive Web Apps(PWA、2015年頃に正式化)は manifest.json ファイルとその icons 配列を追加し、192×192(Chrome のインストールプロンプト)と 512×512(PWA スプラッシュスクリーン、Android のホーム画面、Windows スタートメニューへのピン留め)のバリアントを必須にしました。SVG favicon(Firefox 41、2015年からサポート、Chrome 80、2020年2月から、Safari 12.1、2019年から)は、アイコンが単純な形状である場合の現代的な推奨です。1つのファイルがあらゆる画面密度で完璧にスケールします。歴史的な favicon.ico ファイルは Internet Explorer 11 と古いブラウザ向けに依然として必要です。現代のスタックは SVG に加えて ICO のフォールバックと apple-touch-icon の PNG を提供します。

なぜこんなにたくさんのサイズが必要なのか

favicon セットの各サイズは異なるレンダリングコンテキストに対応します。16×16 は標準 DPI のクラシックなブラウザタブ favicon で、ピクセル制約がいかに過酷であるかをデザイナーに教えてきたサイズです。32×32 は高 DPI(Retina)のタブサイズです。多くの現代のブラウザは「標準」画面でもこちらを優先します。16×16 を拡大するよりよく縮小されるからです。48×48 は Windows がタスクバーのショートカットとピン留めサイト用に使用するサイズです。180×180 は apple-touch-icon で、ユーザーがサイトを iOS のホーム画面に追加したときに表示されます。192×192 は Chrome の Web アプリインストールプロンプトと Android のホーム画面の標準アイコンです。512×512 は PWA のスプラッシュスクリーンアイコン、Google 検索結果のサムネイル、Windows スタートメニュータイルのアイコンです。なぜ単一の高解像度ファイルでは不十分か:最小サイズではアイコンが読みやすさを保つために手動で調整された簡素化を必要とすることが多く(複雑なロゴは 16×16 では色のかたまりになる)、プロフェッショナルな favicon デザインは通常2つまたは3つのバリアント、つまり大きいサイズ用の詳細版、中間サイズ用の簡素化版、最小用の「ブランドだけ」版を含みます。このジェネレーターは単一のソースを最近傍またはバイリニアダウンサンプリングで縮小します。これは単純な形状には適していますが、複雑なロゴは最小サイズで手動の修正が必要かもしれません。

ファイルに付随する HTML

ファイルを生成するのは仕事の半分です。残りの半分は、ブラウザにどのコンテキストでどのファイルを使うかを伝える <head> 内のメタタグです。2026年の最小限の有効な favicon スタックは次のとおりです:

<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

ブラウザはデバイスのピクセル密度とサポートするフォーマットに基づいて、最も適切なファイルを選択します。現代のブラウザは存在する場合 SVG を優先し、古いものは PNG サイズにフォールバックし、iOS は apple-touch-icon を使い、PWA インストールはマニフェストを読み取ります。ルートの favicon.ico は明示的な link タグがなくてもデフォルトのフォールバックとして常に自動的に取得されます。すべてのサイトはごく古いブラウザとツールとの後方互換性のために常にこれを持つべきです。

実際に favicon を生成する必要がある場合

16×16 制約を考慮した設計

16×16 favicon は現代のインターフェースデザインで最も要求の厳しい制約です。256ピクセル、つまりアイコンキャンバス全体は、ユーザーが20個の他のタブの中であなたのタブを再発見できるだけの十分なブランドアイデンティティを伝えなければなりません。これを頻繁に行ってきたデザイナーからの実用的な助言:積極的に簡素化する。 16×16 の複雑なロゴは色のかたまりです。認識可能な最小限の形状だけが残るまで詳細を取り除きます。タブ背景に対するコントラストを最大化する。 ブラウザタブは通常薄いグレーまたは濃いグレーです。コントラストの低いアイコンはクロームに溶け込みます。細い線よりも太く充実した形状を好む。 2 px 未満の幅の線は 16 px でグレーにアンチエイリアスされ、見えなくなります。ブラウザで実際のサイズでテストする。 256×256 のデザインツールで良く見えるものが、16×16 では読めないかもしれません。サイトの複数のタブを開いてタブバーを見てください、それが本当のテストです。ダークモードのケースを考える。 白いタブバー用に設計されたアイコンは暗いタブバーで見えないかもしれません。SVG favicon は SVG 内に prefers-color-scheme メディアクエリを含めて自動的にライト/ダークに適応できます。ICO と PNG のフォールバックには両方の背景で機能するものを描きます。

生成されるファイル

プライバシー、ブラウザ内のみで画像処理

favicon を生成するためにアップロードするロゴやブランド画像は機密の場合があります、リリース前のブランディング作業、内部ツールのブランディング、NDA 下のクライアントロゴなど。サーバー側 favicon ジェネレーター(非常に人気のある RealFaviconGenerator など)は、アップロードされた各画像のコピーをインフラに取り込み、そこにログとキャッシュとして残ります。このジェネレーターは Canvas API を介して完全にブラウザで実行されます。画像はブラウザによって読み取られ、組み込みのリサイズパイプラインによって各 favicon サイズにリサイズされ、ダウンロード用にパッケージ化されます、すべてあなたのタブ内で。アップロード中に DevTools の Network タブを確認してください(ページ読み込み後にリクエストは出ません)、または読み込み後にページをオフライン(機内モード)にしてもジェネレーターはローカルファイルでまだ動作します。未発表のブランディング作業、NDA 下のクライアントロゴ、内部ツールのブランディング、または見知らぬ人のハードドライブにコピーされたくない画像に安全です。

関連ツール

画像圧縮ツール

画像を最大80%まで圧縮します。ドラッグ&ドロップ、即時ダウンロード。サーバーアップロードなし。

画像リサイザー

画像を正確なピクセル寸法にリサイズします。ソーシャルメディア、Webなどのプリセット。

画像コンバーター

PNG、JPEG、WebP間で変換します。複数ファイルのバッチ変換を一度に。