ファビコンを更新したのにブラウザで反映されません

ブラウザがファビコンを長期間キャッシュするため、ハードリロード（Ctrl+Shift+R）でも消えないことがあります。ファイル名を favicon-v2.ico のように変えるか、URLにクエリパラメータ ?v=2 を付けて強制更新するのが確実です。

ダークモード対応は必要ですか？

必須ではありませんが、SVGなら prefers-color-scheme メディアクエリで簡単に切替えられます。明るい色のロゴをそのまま使うと、Safariのダークモードタブで沈んで見えにくくなるため、コントラストの強い色なら自動切替なしでも問題ありません。

PWA対応のファビコン構成は何が違う？

PWAではホーム画面に追加されるためのアイコンが必要です。site.webmanifest というJSONファイルにアイコン定義を書き、192×192と512×512のPNGを用意します。Lighthouseの「Installable」項目で必要なサイズが不足していないか確認できます。

ファビコンを無料で作成｜PNG/SVG対応のオンラインジェネレーター

公開日: 2026-05-02

ブラウザのタブやブックマーク、スマートフォンのホーム画面に表示される小さなアイコンが「ファビコン」です。サイトの第一印象を左右する地味だけど大事な要素ですが、いざ作ろうとすると「サイズはいくつが必要？」「PNG / SVG / ICO の違いは？」「Apple Touch IconとAndroid Chromeの対応は？」と意外に迷います。本記事では、ファビコンの仕様、必要なサイズ一覧、無料で作成する手順、HTMLタグの設置方法までを丸ごと解説します。

この記事で紹介するツール

ファビコン生成【無料・登録不要】

画像をアップロードしてWebサイト用のファビコンを自動生成。16x16, 32x32, 48x48, 180x180の各サイズに対応しています。

現代のファビコンに必要なサイズ一覧

かつては16×16の.icoファイル1つで十分でしたが、現在はデバイスごとに最適サイズが異なります。最低限、下記の5つを揃えておけば主要環境はカバーできます。

favicon.ico（16×16 + 32×32マルチサイズ）：レガシー対応
favicon-32x32.png：標準ブラウザタブ
favicon-16x16.png：小さなUI領域
apple-touch-icon.png（180×180）：iOSホーム画面
android-chrome-192x192.png / 512×512：Androidホーム画面・PWA

PNG / SVG / ICO の使い分け

PNG（推奨・基本）

主要ブラウザ・OS全部に対応する万能フォーマットです。サイズ別に複数枚用意して、HTMLで <link rel="icon"> で指定します。透明背景にも対応。透過部分はOSによって背景色が違うため、最終確認は実機で行うのが鉄則です。

SVG（次世代・高解像度に強い）

ベクター形式なので、どのサイズに拡大しても劣化しません。ファイルサイズも小さく、ダークモード対応（prefers-color-scheme）も可能です。Safariの一部古いバージョンや古いAndroid標準ブラウザで非対応のため、PNGとセットで指定するのが安全です。

ICO（レガシー・Windows互換）

昔ながらのフォーマットで、Internet ExplorerやWindowsのお気に入り表示で必要になります。新規サイトでも favicon.ico をルートに置いておくと、/favicon.ico への自動リクエストに404を返さずに済みます。16×16と32×32をマルチサイズで1ファイルに含められます。

デザインの基本ルール

16×16でも識別できるように、要素は3つ以下に絞る
線の太さは2px以上（細い線はサムネイルで消える）
コントラストを強く（背景色が白／黒のどちらでも見える配色を）
正円・正方形ベースのモチーフが視認性最高（複雑な形状はNG）
会社ロゴ全体ではなく、頭文字や象徴的なマークだけ抜粋
カラーは2〜3色以内、ブランドカラーを必ず1色含める

HTMLへの設置タグ

生成したファビコン一式は head 内に下記のタグで設置します。Next.jsであれば app/icon.png や app/apple-icon.png を置くだけで自動でlinkタグが挿入されます（App Router）。

rel="icon" + href="/favicon.ico" + sizes="any"（レガシー対応）
rel="icon" + type="image/png" + sizes="32x32" + href="/favicon-32x32.png"
rel="icon" + type="image/png" + sizes="16x16" + href="/favicon-16x16.png"
rel="apple-touch-icon" + sizes="180x180" + href="/apple-touch-icon.png"
rel="manifest" + href="/site.webmanifest"（PWA対応時）

無料でファビコンを作る手順

free-ai-tools.jpのファビコンジェネレーターは、PNG画像1枚をアップロードするだけで、必要なサイズすべてを一括生成します。ブラウザ内処理なのでアップロードした画像が外部に送信されることはありません。

1. 元画像（512×512推奨・正方形・PNG）を準備
2. ツールにアップロード
3. 生成された全サイズ（16/32/180/192/512 + ico）を一括ダウンロード
4. サイトのルート（/public 配下）に配置
5. head に上記のlinkタグを追加
6. ブラウザのキャッシュをクリアして表示確認

よくある質問

Q. ファビコンを更新したのにブラウザで反映されません: A. ブラウザがファビコンを長期間キャッシュするため、ハードリロード（Ctrl+Shift+R）でも消えないことがあります。ファイル名を favicon-v2.ico のように変えるか、URLにクエリパラメータ ?v=2 を付けて強制更新するのが確実です。
Q. ダークモード対応は必要ですか？: A. 必須ではありませんが、SVGなら prefers-color-scheme メディアクエリで簡単に切替えられます。明るい色のロゴをそのまま使うと、Safariのダークモードタブで沈んで見えにくくなるため、コントラストの強い色なら自動切替なしでも問題ありません。
Q. PWA対応のファビコン構成は何が違う？: A. PWAではホーム画面に追加されるためのアイコンが必要です。site.webmanifest というJSONファイルにアイコン定義を書き、192×192と512×512のPNGを用意します。Lighthouseの「Installable」項目で必要なサイズが不足していないか確認できます。