faviconとは？必要なサイズ・形式とWebサイトへの設定方法

faviconは用途別サイズを用意し、HTML設定、キャッシュ、表示状態を順番に確認します。

faviconはブラウザのタブだけに置く小さな画像ではありません。検索結果、ブックマーク、スマートフォンのホーム画面、PWAなど、表示場所ごとに必要なファイルと設定が異なります。用途を分けて用意すると、端末による表示漏れを減らせます。

結論：favicon、Apple Touch Icon、PWAアイコンを分けて用意する

一般的なWebサイトでは、互換用のfavicon.ico、ブラウザ向けPNG、iPhone・iPad向けApple Touch Iconを用意すると対応範囲を広げられます。ホーム画面へインストールできるPWAでは、さらに192px・512pxのアイコンとWeb App Manifestが必要です。すべてを1枚だけで済ませるより、同じデザインから用途別サイズを書き出す方が管理しやすくなります。

1. Webアイコンの役割とサイズ

種類	主な用途	用意する例
favicon.ico	ブラウザや従来環境との互換	16・32・48pxを内包
PNG favicon	ブラウザのタブ・ブックマーク	32×32、48×48など
Apple Touch Icon	iPhone・iPadのホーム画面	180×180
PWAアイコン	インストール後のホーム画面・アプリ一覧	192×192、512×512

Google検索結果のfaviconについては、正方形で最低8×8px、さまざまな表示面に対応するため48×48pxより大きい画像が推奨されています。検索結果に必ず表示される保証はなく、ホームページとfavicon画像をGoogleがクロールできること、URLを頻繁に変えないことも必要です。

2. 小さくしても見分けられるデザインにする

元画像がきれいでも、16pxまで縮小すると細い文字や複雑な模様は潰れます。ロゴ全体をそのまま入れるのではなく、頭文字やシンボルだけを使い、背景との明暗差を確保します。透明背景は表示するブラウザのテーマによって見え方が変わるため、白背景と暗い背景の両方で確認すると安心です。

見やすいデザイン

1文字または単純なシンボル
太い線と明確な輪郭
背景と前景の差が大きい配色
端に少し余白を残す

潰れやすいデザイン

長いサイト名を小さく配置
細い線や淡いグラデーション
写真を縮めただけの画像
重要な部分が端に寄っている

3. サイトへ設定する方法

静的HTML・独自CMS

アイコン画像を公開ディレクトリへ置き、ホームページのhead要素からlinkタグで指定します。相対パスでも絶対URLでも設定できますが、デプロイ先で実際に画像URLを開けるか確認してください。

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Next.js App Router

Next.jsでは、App Routerのファイル規約に沿ってfavicon.ico、icon、apple-iconなどをappディレクトリへ配置できます。手動で設定する場合はmetadataのiconsを使います。ファイル規約と手動設定を重ねて同じアイコンを重複指定しないようにします。

WordPress

管理画面の「サイトアイコン」から設定できるテーマでは、その機能を優先します。テーマファイルへ直接linkタグを書くと、テーマ更新や変更で消える可能性があります。設定後はトップページのHTMLと画像URLを確認します。

faviconとWebアイコンを作成する

4. faviconが表示されないときの確認順

画像URLを直接開く

404、アクセス制限、大文字・小文字の違いがないか確認します。

head内の指定を確認する

rel、href、sizes、typeが実ファイルと一致しているか確認します。

キャッシュを切り分ける

シークレットウィンドウや別ブラウザで確認し、古いアイコンの保持を切り分けます。

クロール可能か確認する

検索結果用では、ホームページと画像がrobots.txtなどで遮断されていないか確認します。

ブラウザで新しいアイコンが表示されても、Google検索結果への反映には再クロールと処理の時間が必要です。Googleの案内では数日から数週間かかる場合があるため、変更直後に表示されないことだけで設定失敗とは判断できません。

5. 作成・公開前のチェックリスト

正方形の元画像を使い、16pxでもシンボルを見分けられる
favicon、Apple Touch Icon、PWA用を用途別に書き出した
manifest内の画像パスと実ファイル名が一致している
maskableアイコンの重要部分を中央寄りに置いた
アイコンURLを直接開け、クロールを遮断していない
白・黒背景、PC・スマートフォンで表示を確認した

まとめ

faviconは、ブラウザ用だけでなく検索結果、iOS、PWAまで用途を分けて準備すると表示の抜けを減らせます。元画像を大きな正方形で作り、用途別サイズへ書き出し、設置後は画像URL・linkタグ・manifest・キャッシュの順に確認しましょう。小さな表示でもサイトを識別できる、単純でコントラストの高いデザインが向いています。