よくある質問

favicon の疑問に、率直にお答えします

開発者が実際に直面すること — キャッシュ、2026年に重要なファイル、SVG とダークモード、そして Google 検索が favicon をどう扱うか。

favicon が更新されないのはなぜですか?

これは最も多い favicon の問題で、ほぼ必ずキャッシュが原因です。ブラウザは favicon を他のほとんどのアセットよりも強く保持します。次の順序で対処してください。まずスーパーリロード(Ctrl+Shift+R / Cmd+Shift+R)。それでもだめなら、favicon のキャッシュはタブ単位であることが多いので、タブを完全に閉じて新しく開きます。作業中は /favicon.ico?v=2 のような使い捨てのバージョンのクエリを追加し、ブラウザに「新しい」ファイルを取得させます。Google 検索は別のコピーを保持し、独自の時間軸で更新します。数日から数週間かかります。

2026年でも favicon.ico は必要ですか?

はい。SVG を用意していても、ブラウザや Googlebot はいまもサイトのルートから /favicon.ico を自動的に要求し、一部の古いクライアントはこれに依存しています。ごく小さなファイルなので、信頼できる基盤としてマルチサイズの .ico(16/32/48)を残しておきましょう。

実際に必要なサイズはどれですか?

多くのジェネレーターが出力するよりもずっと少なくて済みます。現在の完全なセットは、マルチサイズの favicon.ico(16/32/48)、icon.svg 1つ、180×180 の apple-touch-icon.png、そしてウェブアプリマニフェストから参照する 192+512 の PNG です。かつての 70×70/150×150 の Windows タイルや、その間を埋める何十もの PNG はもう使われていません。

favicon と apple-touch-icon の違いは何ですか?

favicon(.ico/SVG/PNG)は、タブやブックマークに表示される小さなアイコンです。apple-touch-icon は、ユーザーがサイトをホーム画面に追加したときに iOS が使う 180×180 の PNG で、OS によって大きく角丸で表示されます。iOS はその用途で SVG の favicon を読み込まないため、専用の PNG が必要です。

SVG の favicon は使えますか?すべてのブラウザが対応していますか?

現在のデスクトップおよびモバイルのブラウザはすべて SVG の favicon を表示します。それらには SVG を配信し、古いブラウザや Google 検索でもアイコンが表示されるように favicon.ico を残しておきます。2つのファイルで両方の利点を得られます。

ダークモード対応の favicon はどう作りますか?

対応できるのは SVG だけです。SVG 内に @media (prefers-color-scheme: dark) のルールを入れて、ブラウザのテーマに合わせて塗りが変わるようにします。暗いロゴが暗いタブバーで消えてしまう場合に役立ちます。ICO と PNG は固定のビットマップで、切り替えはできません。完全な例は上級者向けのヒントにあります。

Google の検索で間違った favicon が、あるいは何も表示されないのはなぜですか?

Google には明確なルールがあります。favicon は安定した URL に置かれ、48×48 の倍数(48、96、144…)の正方形で、サイトと同じホスト上にあり、Google がインデックスできるページに置かれている必要があります。また、アイコンをページとは別にキャッシュするため、変更が反映されるまで数日から数週間かかることがあります。何も表示されない場合は、/favicon.ico が Googlebot に対して 200 を返すこと、そしてページが robots や noindex でブロックされていないことを確認してください。

favicon の背景は透明にすべきですか?

たいていはそうすべきです。透明な PNG/SVG は、明るいタブバーでも暗いタブバーでもきれいに収まります。生成される .ico には、アルファを描画できない一部の古いブラウザ向けに、不透明のフォールバックが含まれます。ロゴが明るい色の場合は、白いタブバーで消えてしまわないよう、背後に小さな不透明の図形を置くことを検討してください。

favicon がぼやけて、または不鮮明に見えます。なぜですか?

16×16 では細部が失われます。ワードマークや細い線、グラデーションは潰れてしまいます。太い1つの文字や記号を使い、高いコントラストと十分な余白を確保してください。ロゴに小さな文字が含まれる場合は、favicon では文字を省き、マークだけを残しましょう。

サーバーのログに favicon.ico の 404 が出ています。問題ですか?

favicon がないというだけのことです。ブラウザは /favicon.ico を自動的に要求するため、ファイルが存在しないと 404 が繰り返し記録されます。ルートにファイルを追加すれば止まります。

favicon は SEO に影響しますか?

ランキング要因としては影響しません。ただし Google 検索はモバイルで結果の横に favicon を表示するため、はっきりと識別しやすいアイコンはクリック率を高めます。ランキングの向上ではなく、間接的なメリットです。

画像はどこかにアップロードされますか?

いいえ。このジェネレーターは Canvas API を使ってすべてブラウザ内で動作し、画像がサーバーに触れることはありません。だからこそ、非公開の作品でも、さらにはオフラインでも使えます。

← ジェネレーターに戻る