favicon(ファビコン)の設定方法｜サイズとlinkタグ、検索結果に出す条件

ブラウザのタブを並べたときや、スマートフォンで検索したときに、サイト名の横に出る小さなアイコンが自社のロゴになっていないことがあります。ロゴを新しくしたのに、検索結果のアイコンだけが前のままのこともあります。

サイト名の横に出るアイコンがファビコン(favicon)で、どこにどのアイコンが出るかを決めるのは、head に書く link タグと画像の大きさ・形式です。この記事では、ファビコンの設定で書くタグ、表示する場所ごとのサイズと形式、Google 検索の結果にファビコンを出す条件と確かめ方を解説します。株式会社メリルが運営する4つのサイトで、ファビコンをどう置いているかも例として示しました。

記事を読めば、タブ・スマートフォンのホーム画面・検索結果に出るアイコンを、自分で設定して確かめられます。ホームページの head に link タグを書き、正方形で48×48pxより大きい ICO か PNG を指定すれば、検索結果まで含めたファビコンの設定がそろいます。

favicon(ファビコン)の設定はheadのlinkタグでファイルを指定する

ファビコンはページやサイトを表すアイコンで、ブラウザはタブなどでページを示すときに使います。どの画像をファビコンにするかは、ページの head に書く link タグで指定します。

ファビコンの設定で押さえることは、以下の3つです。

• ファビコンの画像をサーバーに置き、headにlinkタグを書く
• 大きさや形式の違うアイコンはsizesとtypeを付けて並べる
• WordPressは管理画面のサイトアイコンで設定する

ファビコンの画像をサーバーに置き、headにlinkタグを書く

ファビコンのいちばん短い設定は、画像のファイルをサーバーに置き、head に link タグを1行書く形です。link タグの rel 属性を icon にし、href 属性に画像の URL を書きます。

<link rel="icon" href="/favicon.ico">

href には、/favicon.ico のようにドメインを省いたパスも、https://example.com/favicon.ico のような完全な URL も書けます。Google 検索のファビコンは、CDN(コンテンツ配信ネットワーク)のように、サイトとは別の場所に置いた画像でもかまいません。

rel の値は、古くからの書き方の shortcut icon でも同じ扱いで、Google 検索も読み取ります。

link タグが無いページでは、ブラウザがサイトのいちばん上の階層(ルート)にある /favicon.ico を取りに行くことがあります。ただし、Google 検索がファビコンの情報を読み取るのは link タグです。ファイルをいちばん上に置いた場合でも、link タグは書いておきましょう。

大きさや形式の違うアイコンはsizesとtypeを付けて並べる

大きさや形式の違うアイコンを用意したときは、link タグを複数並べ、sizes 属性に大きさを、type 属性に形式を書きます。ブラウザは並んだアイコンの中から、type・media・sizes の属性をもとに、いちばん合うアイコンを選ぶ決まりです。

このメディアの記事のページ(https://blog-soudan.com/owned-media/ogp-settings/)のソースを、Chromium のページのソースの表示で開いた画面(2026年10月31日)。

<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">

sizes 属性に書くのは、画面上の見た目の大きさではなく、画像そのものの縦横のピクセル数です。SVG のように拡大・縮小できる画像は、sizes に any と書いて表せます。

sizes に書く大きさは、実際のファイルにある大きさと同じでなければなりません。同じくらい合うアイコンが複数あるときは、後に書いた link タグのアイコンが使われます。

WordPressは管理画面のサイトアイコンで設定する

WordPress のサイトは、テーマのファイルに link タグを書かなくても、管理画面の「サイトアイコン」でファビコンを設定できます。サイトアイコンに使う画像は縦横512px以上の正方形で、形式は PNG がすすめられています。

WordPress 6.5 以降でサイトアイコンを設定する手順は、以下のとおりです。

1. 縦横512px以上の正方形の画像を用意し、メディアライブラリにアップロードする
2. 管理画面の「設定」から「一般」を開く
3. サイトアイコンの項目で、アップロードした画像を選ぶ
4. 設定を保存する

WordPress 4.3〜6.4 では、サイトアイコンの設定は「外観」→「カスタマイズ」→「サイト基本情報」にあります。

ファビコンのサイズと形式は表示する場所ごとに決める

ファビコンは、ブラウザのタブだけでなく、検索結果やスマートフォンのホーム画面にも出ます。場所ごとに読まれるタグと、求められる大きさ・形式は、以下の表のとおりです。

表示する場所	指定の仕方	大きさ	形式
ブラウザのタブなど	link rel="icon"	ブラウザが sizes を見て選ぶ	PNG・ICO・SVG など(ブラウザによる)
Google 検索の結果	ホームページの link タグ	正方形で8×8px以上(48×48pxより大きいものをすすめる)	BMP・GIF・ICO・PNG・JPEG・PPM・TIFF
iPhone・iPad のホーム画面	link rel="apple-touch-icon"	iPhone の高解像度の画面は180×180px	PNG
アプリとして追加したときのホーム画面など	manifest の icons	192×192px と 512×512px(Chromium)	PNG など
WordPress のサイトアイコン	管理画面で設定	縦横512px以上の正方形	PNG をすすめる

サイズと形式を決めるときの考え方は、以下の5つです。

• 元の画像は512×512pxの正方形で作る
• ICOは1つのファイルに複数の大きさを入れられる
• SVGを使うときはICOかPNGも指定しておく
• iPhoneのホーム画面用にapple-touch-iconを置く
• アプリとして追加したときのアイコンはmanifestで渡す

元の画像は512×512pxの正方形で作る

ファビコンの元の画像は、縦横512pxの正方形で1枚作っておくと、ほかの大きさを縮小で作れます。512×512px は、WordPress のサイトアイコンの下限で、Chromium でアプリとして追加するときに求められる大きいほうのアイコンの大きさでもあります。

Google 検索のファビコンも、縦横の比が1:1の正方形でなければなりません。横長のロゴを正方形に収めると文字が小さくなり、16×16px などに縮めたときに読みにくくなります。

ロゴから元の画像を作る手順は、以下のとおりです。

1. ロゴのうち、マークや頭文字など、正方形に収まる部分を選ぶ
2. 選んだ部分を縦横512pxの正方形の画像にする
3. 512pxの画像から、使う大きさ(180px・48px・32px・16pxなど)を書き出す
4. 書き出した画像を実際の大きさで表示し、形を見分けられるかを確かめる

ICOは1つのファイルに複数の大きさを入れられる

ICO の形式は、1つのファイルの中に、大きさの違う画像を複数入れられます。PNG は1つのファイルに1つの大きさなので、大きさごとにファイルと link タグを分けて書きます。

メリルが運営する4つのサイトの favicon.ico には、どれも16×16px・32×32px・48×48px の3つの画像が入っていました。ICO のファイル1つと link タグ1行で、3つの大きさをまとめて渡せる作りです。

Google 検索は、ICO と PNG のどちらの形式のファビコンにも対応しています。検索結果用にすすめられている48×48pxより大きい画像は、PNG の icon の link タグか、180×180px の apple-touch-icon で渡せます。

SVGを使うときはICOかPNGも指定しておく

SVG のファビコンは、1つのファイルを大きさの違う画面に合わせて表示できます。link タグには、形式を示す type="image/svg+xml" を書きます。

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Google 検索が対応するファビコンの形式は、BMP・GIF・ICO・PNG・JPEG・PPM・TIFF の7つです。SVG はこの7つに入っていないため、SVG をタブ用に使う場合でも、ホームページには ICO か PNG の link タグを並べて書いておきます。

iPhoneのホーム画面用にapple-touch-iconを置く

iPhone や iPad でページをホーム画面に追加したときのアイコンは、rel="apple-touch-icon" の link タグで指定します。画像の形式は PNG です。

<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

sizes の値は、iPhone の高解像度の画面向けなら180x180です。link タグが無いページでは、サイトのいちばん上にある apple-touch-icon.png という名前のファイルが探されます。

apple-touch-icon の link タグは、Google 検索がファビコンを探すときに読み取る rel の1つです。180×180px の PNG を置いておくと、ホーム画面のアイコンと、検索結果用の48×48pxより大きい画像を1つのファイルで用意できます。

アプリとして追加したときのアイコンはmanifestで渡す

パソコンやスマートフォンのブラウザでサイトをアプリとして追加したときのアイコンは、ウェブアプリ マニフェスト(manifest)という JSON のファイルで渡します。manifest の icons には、画像ごとに URL・大きさ・形式を書きます。

{
  "name": "サイト名",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Chromium でアプリとして追加できるようにするには、192×192px と 512×512px のアイコンが1つずつ必要です。2つの大きさだけを用意した場合は、Chrome が端末に合わせてアイコンを拡大・縮小します。

manifest のファイルは、すべてのページの head に <link rel="manifest" href="/manifest.webmanifest"> の1行で指定します。manifest の画像が読み込めているかを確かめる場所は、Chrome のデベロッパー ツールのアプリケーション(Application)パネルにあるマニフェスト(Manifest)の画面です。

Google検索の結果にファビコンを出す5つの条件

Google 検索の結果では、サイト名の横にファビコンが表示されることがあります。検索結果にファビコンを出すために守る条件は、以下の5つです。

• ホームページのheadにファビコンのlinkタグを書く
• 正方形で48×48pxより大きい画像を用意する
• ファビコンはホスト名ごとに1つでサブディレクトリには付けられない
• GooglebotとGooglebot-Imageがクロールできるようにする
• ファビコンのURLを頻繁に変えない

ホームページのheadにファビコンのlinkタグを書く

Google 検索のファビコンを決めるのは、ホームページ(サイトのトップ)の head にある link タグです。ここでいうホームページは、https://example.com/ のような、ホスト名のいちばん上のページを指します。

Google 検索がファビコンとして読み取る rel の値は、以下の4つです。

• icon
• shortcut icon(icon の古い書き方)
• apple-touch-icon(iOS 向けのアイコン)
• apple-touch-icon-precomposed(古い iOS 向けのアイコン)

正方形で48×48pxより大きい画像を用意する

検索結果のファビコンは、縦横の比が1:1の正方形で、8×8px以上の画像でなければなりません。8×8px は最小の大きさで、さまざまな画面できれいに見せるには、48×48pxより大きい画像がすすめられています。

ファビコンに使うのは、検索結果を見た人が一目でサイトを見分けられる、サイトのブランドを表す絵です。わいせつな表現やヘイト表現にあたるシンボルを含むファビコンは表示されず、既定のアイコンに置き換えられます。

ファビコンはホスト名ごとに1つでサブディレクトリには付けられない

Google 検索のファビコンは1つのサイトにつき1つで、サイトはホスト名で分けられます。example.com と news.example.com のようにホスト名が違えば、それぞれに別のファビコンを付けられます。

example.com/news/ のようなサブディレクトリには、別のファビコンを付けられません。example.com のファビコンが、トップとサブディレクトリの両方の検索結果に使われます。

サブディレクトリにオウンドメディアを置いた場合、検索結果のアイコンになるのは、ホスト名のトップ(会社サイトのトップなど)のファビコンです。メディアのページでタブのアイコンを変えても、検索結果のアイコンは会社サイトのトップのアイコンのままになります。

» サブドメインかサブディレクトリかはSEOより運用で選ぶ｜置き方と設定の手順

GooglebotとGooglebot-Imageがクロールできるようにする

検索結果にファビコンを出すには、Googlebot がホームページを、Googlebot-Image がファビコンのファイルをクロールできる必要があります。ホームページから、ファビコンを指定したページへ転送している場合は、Googlebot が転送をたどれることも条件です。

robots.txt でファビコンを置いたフォルダへのクロールを止めていると、Googlebot-Image はファビコンのファイルを読み取れません。robots.txt に Disallow の行がある場合は、ファビコンのファイルの場所が含まれていないかを確かめましょう。

» robots.txtの書き方｜記述例と置く場所・確かめ方、noindexとの違い

ファビコンのURLを頻繁に変えない

検索結果に出すファビコンの URL は、固定しておく必要があります。ファビコンを差し替えるたびにファイル名を変える運用は、URL が頻繁に変わるので向いていません。

ロゴを新しくしたときは、URL を同じにしたまま、ファイルの中身だけを入れ替える方法が使えます。新しいファビコンが検索結果に出るのは、Google がホームページを再クロールして、新しい情報を処理した後です。

メリルの4サイトでファビコンの置き方を比べた

ファビコンの link タグは、1行で済ませることも、大きさや用途ごとに何行も並べることもできます。株式会社メリルは2026年10月30日に、運営する4つのサイトのトップの HTML と、head で指定しているアイコンのファイルを取得し、ファビコンの置き方を比べました。

4つのサイトのファビコンの置き方は、以下の表のとおりです。

サイト	作り	ファビコンの link タグ	指定しているファイル
ブログ相談ドットコム(blog-soudan.com)	WordPress	6行	ICO・PNG 2つ・apple-touch-icon・manifest・mask-icon
bfb-plugin.com	WordPress	6行	ICO・PNG 2つ・apple-touch-icon・manifest・mask-icon
blogrank.jp	WordPress	6行	ICO・PNG 2つ・apple-touch-icon・manifest・mask-icon
meril.co.jp	Astro	2行	ICO・apple-touch-icon

4つのサイトとも、favicon.ico には16×16px・32×32px・48×48px の3つの画像が入っていて、apple-touch-icon は180×180px の PNG でした。指定したファイルはすべて取得でき、画像はどれも正方形です。

4つのサイトの置き方と、このメディアのファビコンの作りは、以下のとおりです。

• WordPressの3サイトは6行のlinkタグで大きさごとにファイルを分けている
• meril.co.jpはICOとapple-touch-iconの2行にしている
• オウンドメディア相談室はSVG・PNG・apple-touch-iconの3行にしている

WordPressの3サイトは6行のlinkタグで大きさごとにファイルを分けている

WordPress で作った3つのサイトは、同じ並びの6行の link タグでファビコンを指定していました。6行の rel の値と、指定しているファイルは以下の表のとおりです。

rel の値	ファイルの形式	大きさ
apple-touch-icon	PNG	180×180px(sizes に記入)
icon	PNG	32×32px(sizes に記入)
icon	PNG	16×16px(sizes に記入)
manifest	JSON	アプリとして追加したときのアイコンの一覧
mask-icon	SVG	拡大・縮小できる画像
shortcut icon	ICO	16×16px・32×32px・48×48px

PNG は大きさごとにファイルを分け、sizes 属性に大きさを書く形です。ブログ相談ドットコムの manifest には、192×192px と 512×512px の PNG が入っていました。

6行のうち、検索結果のファビコンの候補になる rel は、apple-touch-icon・icon・shortcut icon の4行です。48×48pxより大きい画像は、180×180px の apple-touch-icon で渡しています。

meril.co.jpはICOとapple-touch-iconの2行にしている

メリルの会社サイト(meril.co.jp)は Astro で作ったサイトで、ファビコンの link タグは次の2行です。

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

16〜48pxの3つの大きさは ICO の1ファイルにまとめ、180×180px の PNG を apple-touch-icon で指定しています。2つのファイルはどちらもサイトのいちばん上に置かれていて、ブラウザや iPhone が link タグの無いときに探す場所と同じです。

2行の作りでも、検索結果のファビコンの条件(正方形・48×48pxより大きい画像・対応する形式)はそろいます。アプリとして追加させる予定が無いサイトなら、ICO と apple-touch-icon の2つから始めると、置くファイルが少なくて済みます。

オウンドメディア相談室はSVG・PNG・apple-touch-iconの3行にしている

このメディア(オウンドメディア相談室)は blog-soudan.com のサブディレクトリにあり、ファビコンの link タグは次の3行です。

<link rel="icon" href="/owned-media/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/owned-media/favicon-48.png" sizes="48x48" type="image/png">
<link rel="apple-touch-icon" href="/owned-media/apple-touch-icon.png">

3行で指定している3つのファイルは、以下の表のとおりです。

ファイル	形式	大きさ	容量
favicon.svg	SVG	一辺64の正方形(viewBox="0 0 64 64")	385バイト
favicon-48.png	PNG	48×48px(角を丸めた外は透明)	1,197バイト
apple-touch-icon.png	PNG	180×180px(角を丸めずに全面を紺で塗る)	3,516バイト

2つの PNG は、favicon.svg を元に書き出して作りました。SVG のタブ用のアイコンに、同じ絵の PNG と apple-touch-icon を並べた作りです。

favicon.svg には、以下の3つの部品を描いています。

• 角を丸めた紺(#053a62)の正方形の背景
• 背景の上に重ねた白い吹き出し
• 吹き出しの中に並べた青い3つの点

Google 検索のファビコンはホスト名ごとに1つなので、このメディアの記事が検索結果に出るときは、ブログ相談ドットコムのトップのファビコンが使われます。このメディアの3つのファイルが使われるのは、ブラウザのタブやホーム画面など、ページを表す画面です。

ファビコンが表示されない・変わらないときの確かめ方

ファビコンを設定したのに表示されないときや、差し替えたのに前のアイコンが出るときは、どこで止まっているかを順に確かめます。確かめる場所は、以下の3つです。

• ページのソースでlinkタグとファイルのURLを確かめる
• タブに前のアイコンが残るときはブラウザのキャッシュを疑う
• 検索結果に出ないときはホームページの登録をリクエストして待つ

ページのソースでlinkタグとファイルのURLを確かめる

最初に、公開したページの HTML に、ファビコンの link タグが出ているかを確かめます。Mac のターミナルで、ページの head からアイコンと manifest の link タグだけを表示するコマンドは、次の1行です。

curl -s https://example.com/ | grep -oiE '<link[^>]*rel="?(icon|shortcut icon|apple-touch-icon|manifest)"?[^>]*>'

ページのソースで確かめる項目は、以下のとおりです。

• rel が icon・shortcut icon・apple-touch-icon のどれかになっているか
• href の URL をブラウザで開くと画像が表示されるか
• sizes に書いた大きさと、実際の画像の大きさが合っているか
• ホームページにも同じ link タグが出ているか

href の URL を開いても画像が表示されないときは、ファイルの置き場所か、href に書いたパスが違っています。

タブに前のアイコンが残るときはブラウザのキャッシュを疑う

ファビコンを差し替えても、ブラウザのタブには前のアイコンが出続けることがあります。ブラウザは、指定されたアイコンが変わっても、表示しているアイコンを必ず更新するとは決まっていません。

新しいアイコンが出るかを確かめる方法は、以下のとおりです。

• ブラウザのシークレット ウィンドウでページを開く
• ふだん使っていない別のブラウザでページを開く
• ブラウザに残っている画像のキャッシュを削除して開き直す

link タグを書いていないページでも、サイトのいちばん上に favicon.ico があると、ブラウザがそのファイルをアイコンに使うことがあります。前のロゴの favicon.ico がいちばん上に残っていないかも、あわせて確かめましょう。

検索結果に出ないときはホームページの登録をリクエストして待つ

検索結果のファビコンが変わるのは、Google がホームページを再クロールして、新しい情報を処理した後です。再クロールの頻度は Google のシステムが決めていて、クロールまでに数日から数週間かかることがあります。

早く読み直させたいときは、サーチコンソールの URL 検査ツールで、ホームページのインデックス登録をリクエストします。リクエストから確かめるまでの流れは、以下のとおりです。

1. URL 検査ツールにホームページの URL を入れる
2. ホームページのインデックス登録をリクエストする
3. 数日から数週間たってから、検索結果のファビコンを確かめる

出典：Google Search Console のURL 検査ツール(オウンドメディア相談室が使っている blog-soudan.com のプロパティ。2026年10月31日の画面)。調べたのはこのメディアの記事の URL です。Google Search Console は Google LLC の商標です。オウンドメディア相談室は、Google が推奨・提携しているものではありません。

すべての条件を守っていても、ファビコンが検索結果に表示されるとは限りません。検索結果のファビコンの扱いについての意見は、Google のファビコンのフィードバック フォームから送れます。

» サーチコンソールのインデックス登録リクエスト手順｜読み込まれたかの確かめ方

faviconの設定はホームページのlinkタグと正方形の画像で決まる

ファビコンがどこにどう出るかは、head に書く link タグと、指定した画像の大きさ・形式で決まります。タブ・ホーム画面・検索結果のそれぞれに合う画像を用意し、検索結果に出すアイコンはホームページの link タグで指定します。

記事の要点は、以下のとおりです。

• ファビコンは head の link タグ(rel="icon")で画像を指定する
• 元の画像は512×512pxの正方形で作り、場所ごとの大きさを書き出す
• 検索結果のファビコンは、正方形で48×48pxより大きい ICO・PNG などをホームページで指定する
• iPhone は180×180px の apple-touch-icon、アプリとして追加するときは manifest の192px と512px で用意する
• 検索結果のファビコンはホスト名ごとに1つで、サブディレクトリのメディアにはトップのものが使われる
• 表示されないときは、link タグ・ファイルの URL・キャッシュ・再クロールの順に確かめる

ファビコンは一度そろえれば、サイトのすべてのページのタブと検索結果に同じアイコンを出せます。まずは自社のホームページのソースを開き、ファビコンの link タグと画像の大きさを確かめましょう。