メインコンテンツへスキップ
🧰ToolBox
🌐

ファビコン作成・生成ツール

テキスト・絵文字・画像からfavicon.ico・PNG・Apple Touch Icon・Maskable IconをブラウザだけでWEBManifestごと無料作成。登録不要・ファイル送信なし。

画像をアップロード

端末内で処理・送信なし

クリックまたはドラッグで画像をアップロード

PNG / JPG / WebP / AVIF / HEIC対応　または Ctrl+V で貼り付け

背景設定

0%

枠線・装飾

プレビュー用のサイト情報

実際のサイズ

64px

32px

16px

背景での見え方

ライト
ダーク

サイトを公開してすぐ「ブラウザのタブにアイコンが出ない」と気になった経験がある方は多いと思います。 ファビコンはたった1枚設定するだけですが、ICO・PNG・Apple Touch Icon・Maskable Iconと 用途ごとにファイルが異なり、意外と手間がかかります。このツールで一括作成してください。

ファビコンとは

ファビコン（favicon）はブラウザのタブ・アドレスバー・ブックマーク・ Google検索結果に表示されるサイトの小さなアイコンです。 「favorites icon」の略で、サイトの認識性・ブランディングに直結します。

推奨ファビコンサイズ一覧

ファイルサイズ用途
favicon.ico16・32・48px入りブラウザタブ・旧ブラウザ全般（必須）
favicon-32x32.png32×32px通常ブラウザタブ（推奨）
apple-touch-icon.png180×180pxiPhoneホーム画面追加（必須）
favicon-192x192.png192×192pxPWA・Androidホーム画面
favicon-512x512.png512×512pxPWAスプラッシュ・Webアプリ
favicon-192x192-maskable.png192×192px（maskable）Android適応型アイコン（推奨）
favicon-512x512-maskable.png512×512px（maskable）Android適応型アイコン大サイズ

ICO・PNG・SVGの違い

favicon.ico

複数サイズを1ファイルに格納できるコンテナ形式。すべてのブラウザで動作し、サイトルートに置くだけで自動認識される最も互換性の高い形式。

PNG

Apple Touch IconやPWAアイコンに使用。透明背景に対応。サイズ別に個別ファイルが必要。

SVG（ベクター）

Chrome・Firefox・Edgeが対応し、拡大しても劣化しない。ダークモード切り替えも内部CSSで可能だが、Safari非対応のため必ずICO/PNGフォールバックが必要。

16pxでも見やすくするデザインのコツ

  • 1〜2文字のシンプルなテキストやアイコンが最適（細かいロゴは潰れる）
  • 背景色と文字色のコントラストを高くする（明度差を確保）
  • 細い線・小さな文字は16pxで消える — 太めのウェイトを使う
  • ライトモード・ダークモード両方で確認する
  • 余白を詰めてアイコンを大きく見せる（padding は 0〜10%程度）

Google検索にファビコンが表示される条件

  • robots.txtやCSPでGooglebot・Googlebot-Imageがfavicon.icoにアクセスできること
  • サイトルートに favicon.ico が存在するか、有効な<link rel="icon">があること
  • アイコンが正方形でサイトを象徴する画像であること（文字・数字のみも可）
  • Googleに認識されるまで数日〜数週間かかることがある
  • サブディレクトリごとにGoogle検索用ファビコンを変えることはできない

よくある質問

ファビコンの推奨サイズは？

favicon.ico（16/32/48px）+ apple-touch-icon.png（180px）+ favicon-192x192.png・512x512.png（PWA）+ Maskable版（192/512px）のセットが現代的なWebサイトの推奨構成です。

ファビコンを変更しても更新されないのはなぜ？

ブラウザがファビコンをキャッシュしているためです。Ctrl+Shift+R（Win）/ Cmd+Shift+R（Mac）で強制リロードしてください。他のユーザーには即時反映されません。

iPhoneのホーム画面用アイコンは別に必要？

はい。<link rel="apple-touch-icon">で指定する180×180pxのPNGが必要です。このツールのZIPダウンロードにapple-touch-icon.pngが含まれます。

Next.jsではfavicon.icoをどこに配置する？

app/favicon.ico に置くだけで自動認識されます（App Router）。app/icon.png・app/apple-icon.png も同様です。

WordPressではどう設定する？

「外観 → カスタマイズ → サイト基本情報 → サイトアイコン」から512×512px以上のPNGをアップロードするのが最も簡単です。