ファビコン生成ツール｜16px〜192px
画像からファビコン（16px〜192px）を一括生成します。ブラウザで処理、サーバー送信なし。
ここに画像をドロップ
クリックで選択
※ ブラウザ上で処理されます — 画像は送信されません。
ファビコン生成ツール｜16px〜192pxとは
画像をアップロードするだけでWebサイト用ファビコンを複数サイズで一括生成できる無料オンラインツールです。16px〜512pxまでの各サイズのPNGを個別にダウンロードでき、ico PNG アイコン作成からApple Touch Icon・Android・PWA対応まで網羅します。ブラウザ上で処理されるため画像がサーバーに送信されません。
使い方
- 1正方形の画像（ロゴ・アイコン）をアップロードします。512px以上のPNGが最適です。
- 2生成するサイズを選択します（デフォルトは全サイズ選択済み）。
- 3「ファビコンを生成」ボタンをクリックします。
- 4各サイズのダウンロードボタンからPNGファイルをダウンロードします。
メリット・特徴
- ブラウザ上で処理されるため画像がサーバーに一切送信されない
- 16px〜512pxまで最大8サイズを一括生成
- Apple Touch Icon（180px）・Android（192px）・PWA（512px）に完全対応
- 各サイズを個別にダウンロードでき必要なサイズだけ取得可能
- PNG・JPEG・WebP・SVGなど主要な画像形式をアップロード可能
- 登録・インストール不要で即座に利用可能
ファビコンとは？必要なサイズと用途
ファビコン（favicon）はブラウザのタブ・ブックマーク・ホーム画面ショートカットに表示される小さなアイコンです。Webサイトのブランド認知と信頼感に直結する重要な要素で、設定を怠ると全ページのリクエストで404エラーが発生します。
ブラウザタブ・ブックマーク用（16px・32px）
PCのブラウザタブに表示される最も基本的なファビコンです。16pxは通常解像度、32pxはRetinaディスプレイやHiDPI環境向けです。この2サイズはすべてのWebサイトで必須です。HTMLには <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> のように記述します。
iOS「ホーム画面に追加」用（180px）
iPhoneやiPadでWebサイトをホーム画面に追加したときに表示されるアイコンです。<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> で指定します。iOSが自動で角丸を付けるため、元画像に角丸処理は不要です。透明背景は黒で塗りつぶされるため、必ず背景色付きの画像を使ってください。
Android・PWA用（192px・512px）
Android Chromeのホーム画面ショートカットには192px、PWA（プログレッシブWebアプリ）のスプラッシュ画面には512pxが必要です。site.webmanifestファイルにアイコンを登録することでAndroidとPWA環境に対応できます。PWA化を検討しているサイトは512pxも必ず用意してください。
ファビコンのHTML設置方法
ファビコンは複数の方法でWebページに設定します。<head>セクション内に適切なlinkタグを追加し、各プラットフォームに対応したファイルを用意することが重要です。
基本HTMLの記述
<head>内に以下を追加します。<link rel="icon" type="image/x-icon" href="/favicon.ico">（レガシー対応）、<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">、<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">、<link rel="manifest" href="/site.webmanifest">（Android対応）。それぞれの目的に応じて必要な記述を組み合わせてください。
ファイルの配置場所
favicon.icoとapple-touch-icon.pngはドメインのルート（example.com/favicon.ico）に配置することを強く推奨します。ブラウザはHTMLの記述なしに/favicon.icoを自動で探しに行くため、ルートに置いておくだけで多くのブラウザで表示されます。その他のファイルはサブフォルダに置いてもHTMLのパスが合っていれば問題ありません。
WordPressとNext.jsでの設定
WordPressは「外観→カスタマイズ→サイト基本情報→サイトアイコン」から設定できます。512px以上の正方形画像をアップロードするだけで各サイズが自動生成されます。Next.js（App Router）はapp/ディレクトリにfavicon.icoを置くだけで自動認識されます。Astro・Hugoはpublic/またはstatic/フォルダに配置します。
ファビコンデザインのベストプラクティス
16×16pxは256ピクセルしかありません。ブランドロゴを小さくしただけでは判読不能になることが多く、ファビコン専用のデザインが必要なケースもあります。
シンプルに作る
複雑なロゴやテキストは16pxで潰れてしまいます。ロゴの頭文字1文字・シンプルなシェイプ・ブランドの象徴的なアイコンマークに絞ることを推奨します。確定前に必ず16px×16pxの実寸でテストしてください。高コントラスト配色（明るい背景に濃いアイコン、または逆）が視認性を高めます。
元画像の要件
最低512×512px以上の正方形PNG画像から始めてください。SVGをソースにする場合はPNGに変換してから使います。細い線・グラデーション・小さなテキストは小サイズで消えやすいため避けましょう。iOS用（apple-touch-icon）は透明背景を使わず、ブランドカラーの背景を持つ画像を用意してください。
ダークモード対応
SVG形式のファビコンはモダンブラウザ（Chrome 80+・Firefox 84+）で対応しており、CSSの@media (prefers-color-scheme: dark)を使ってダークモードとライトモードで異なる配色を表示できます。<link rel="icon" href="/favicon.svg" type="image/svg+xml">でSVGを指定し、<link rel="icon" href="/favicon.ico" sizes="any">でレガシーブラウザ向けフォールバックを追加するのがベストプラクティスです。
よくある質問（FAQ）
- favicon.icoは生成できますか？
- このツールはPNG形式で出力します。ICO形式が必要な場合は、生成した16px・32pxのPNGをICO変換ツールで変換してください。モダンブラウザはPNG形式のファビコンを直接サポートしているため、多くのケースでICOは不要です。
- 最適な元画像サイズは？
- 512×512px以上の正方形PNG画像を使うと高品質なファビコンが生成できます。512pxから16pxへのダウンスケールはきれいに仕上がります。非正方形の画像は正方形にトリミングされます。
- どのサイズを選べばいいですか？
- 最低限必要なのは16px・32px（ブラウザタブ）・180px（iOS）・192px（Android）です。PWA対応サイトは512pxも必須です。すべてのサイズを選択しておくと将来の要件変更にも対応できます。
- Apple TouchアイコンとAndroidアイコンの違いは？
- 180pxはiOSの「ホーム画面に追加」用（apple-touch-icon）、192pxはAndroid ChromeのWebアプリショートカット用です。どちらも重要なので両方生成することを推奨します。
- ファビコンが反映されない場合は？
- ブラウザはファビコンをキャッシュします。Ctrl+Shift+R（Mac：Cmd+Shift+R）でハードリフレッシュしてください。それでも反映されない場合はHTMLのlinkタグに?v=2などのクエリパラメータを追加してキャッシュを回避してください。
- 透明背景の画像をファビコンにしてもいいですか？
- ブラウザタブ用（16px・32px）は透明背景でも問題ありません。ただしiOS用（apple-touch-icon）は透明背景が黒で塗りつぶされるため、ブランドカラーを背景に持つ画像を使うことを強く推奨します。
不具合や動作がおかしい点を見つけたら教えてください。
不具合報告はこちら →