ブラウザのタブに出る小さなアイコンを、ファビコンと呼びます。
ファビコンが無いと、タブにはブラウザの標準のアイコンが出るだけで、ほかのタブと見分けにくくなります。
この記事では、WordPressでファビコンを設定する方法と、画像1枚からファビコン一式を作る方法、変えたのに反映されないときの直し方を紹介します。
この記事で使うファビコン一式生成は、当サイトと同じMOTOKI合同会社が作った「WEBツール箱」の1つです。
無料で、会員登録なしで使えます。
最終確認日：2026年9月28日
この記事で分かること
- WordPressでファビコンを設定するいちばん簡単な方法
- 元画像の大きさと作り方のコツ
- 画像1枚からfavicon.icoと各サイズのPNGを作る手順
- favicon.icoをどこに置くか
- ファビコンを変えたのに反映されないときの直し方
答え｜WordPressならサイトアイコンに1枚登録するだけ
WordPressには、ファビコンを設定する「サイトアイコン」という機能が最初から入っています。
正方形で512px以上の画像を1枚登録すると、必要な大きさの画像をWordPressが自動で作ります。
プラグインは要りません。
このサイトも、サイトアイコンに512×512pxの画像を1枚登録しているだけです。
ページのHTMLを見ると、WordPressが次の4つの大きさを出していました。
| 大きさ | 出力されるタグ | 使われる場所 |
|---|---|---|
| 32×32px | link rel=”icon” | ブラウザのタブ・ブックマーク |
| 192×192px | link rel=”icon” | Androidのホーム画面など |
| 180×180px | link rel=”apple-touch-icon” | iPhoneのホーム画面 |
| 270×270px | meta name=”msapplication-TileImage” | Windowsのタイル |
自分でHTMLを書き足す必要はありません。
多くのサイトは、これだけで十分です。
手順1｜元の画像を用意する
ファビコンは、タブの中では16pxや32pxまで縮んで表示されます。
大きな画面で見て整っていても、縮めると細い線や小さな文字は潰れてしまいます。
- 正方形で、512px以上の画像にする
- ロゴをそのまま使わず、シンボルの部分か頭文字1〜2文字だけにする
- 上下左右の余白は少なめにする
- 形式はPNGが扱いやすい
このサイトでは、頭文字の「M」だけを丸の中に入れた画像を使っています。
手順2｜WordPressのサイトアイコンに登録する
- 管理画面の「外観」→「カスタマイズ」を開く
- 「サイト基本情報」を開く
- 「サイトアイコン」の「サイトアイコンを選択」を押し、画像を選ぶ
- 切り抜きの画面が出たら範囲を決める
- 「公開」を押す
正方形の画像なら、切り抜きはそのまま進めて構いません。
登録が終わったら、シークレットウィンドウでサイトを開き、タブのアイコンを確かめてください。
ツールでファビコン一式を作る｜icoファイルが要るとき
WordPress以外のサイトや、favicon.icoのファイルそのものが要る場面では、画像からファイル一式を作る必要があります。
ファビコン一式生成を使うと、画像を1枚選ぶだけでまとめて作れます。
- ファビコン一式生成を開く
- 枠をクリックして画像を選ぶ（ドロップでもよい）
- 必要なら背景色と余白を調整する
- できたファイルを「保存」で1つずつ保存する
このサイトのサイトアイコン（512×512px）を読み込ませた結果です。
画像を選んだ時点で、7つのファイルができあがりました。
下段の「実際の大きさ」では、16px・32px・48pxを実寸で並べて見られます。
ここで文字や形が潰れていないかを確かめます。
保存したファイルを開いて、大きさと容量を確かめました（2026年9月28日）。
| ファイル名 | 大きさ | 容量 | 使われる場所 |
|---|---|---|---|
| favicon.ico | 16×16pxと32×32pxの2枚入り | 2,225バイト | ブラウザのタブ（ルートに置く） |
| favicon-16×16.png | 16×16px | 674バイト | ブラウザのタブ |
| favicon-32×32.png | 32×32px | 1,513バイト | ブックマーク・高解像度のタブ |
| favicon-48×48.png | 48×48px | 2,769バイト | Googleの検索結果 |
| apple-touch-icon.png | 180×180px | 11,562バイト | iPhoneのホーム画面 |
| android-chrome-192×192.png | 192×192px | 12,729バイト | Android |
| android-chrome-512×512.png | 512×512px | 18,349バイト | PWA・起動画面 |
いちばん大きな512pxでも20KBに届かないので、表示の速さへの影響は気にしなくてよい大きさです。
あわせて、HTMLの<head>に貼る記述と、site.webmanifestの中身も出力されます。
<link rel="icon" href="/favicon.ico"
sizes="16x16 32x32">
<link rel="apple-touch-icon"
href="/apple-touch-icon.png">
<link rel="manifest"
href="/site.webmanifest">上は出力の一部を、折り返して載せたものです。
実際にはPNGの16pxと32pxの行も含めて5行が出ます。
favicon.icoの行にある「sizes=”16×16 32×32″」は、1つのicoファイルに2つの大きさが入っていることをブラウザーに伝える書き方です。
画像はサーバーに送られず、ブラウザーの中だけで変換されます。
公開前の機密素材を扱う場合は、ページ全体や拡張機能の通信、組織の利用方針も確認してください。
favicon.icoはドメインのいちばん上に置く
ブラウザーは、HTMLに記述が無くても、ドメインのいちばん上にある /favicon.ico を探しに来ます。
HTMLで指定せず自動探索に対応させる場合は、ドメイン直下の/favicon.icoが候補になります。link rel=”icon”でURLを指定すれば、別のパスの画像も使えます。
ブラウザが自動で探す/favicon.icoを用意する場合はドメインのルートです。一方、link rel="icon"で指定する画像は、/wordpress/配下など別の場所にも置けます。
WordPress配下の画像でも、公開HTMLのlink rel=”icon”に正しいURLが出ていれば取得できます。ドメイン直下への配置だけが方法ではありません。
WordPressにはfaviconへのリクエストをサイトアイコンへ転送する機能があります。ただし、そのURLのリクエストがWordPressまで届く構成かどうかによります。サブディレクトリへの設置だけでドメイン直下の転送が保証されるわけではありません。
当社のサイトのルートでも、2026年9月28日時点で /favicon.ico が302でサイトアイコンへ転送されていました。
サイトアイコンを登録しておけば、icoファイルを置かなくても多くの場面で困りません。
MicrosoftのEdgeのIEモードのように、icoの形式でないと表示されない場面については「ファビコンで.icoを設定する方法」で解説しています。
ファビコンを変えたのに反映されないとき
ブラウザーは、ファビコンを長く覚えておく作りになっています。
ページを再読み込みしても、古いアイコンが出続けることがよくあります。
| 確かめる順番 | やること |
|---|---|
| 1 | シークレットウィンドウでサイトを開いて、新しいアイコンが出るか確かめる |
| 2 | 出るなら、自分のブラウザーに古いものが残っているだけなので、時間がたてば入れ替わる |
| 3 | 急ぐときは、ファイル名を変える（例：favicon-2.png）か、URLの後ろに ?v=2 を付ける |
| 4 | キャッシュ系のプラグインやCDNを使っているなら、そちらのキャッシュも消す |
検索結果に出るファビコンは、Googleがサイトを読み直すまで古いままです。
こちらはブラウザーの操作では変わらないので、しばらく待ちます。
ツールの限界
- favicon.icoに入れる16pxと32pxは、どちらも元の画像を縮めて作る
- SVG形式のファビコンは作らない
- ファイルは1つずつ保存する（まとめてZIPにする機能は無い）
- 正方形でない画像は、中央に収めて余白を付けて作る
16pxの見え方にこだわる場合は、16px用に描き直した画像を別に用意するのが確実です。
よくある質問
Q. ファビコンにプラグインは必要ですか？
必要ありません。
WordPressのサイトアイコンの機能で、主な大きさはまかなえます。
Q. 背景が透明な画像でも大丈夫ですか？
タブに出すだけなら透明のままで問題ありません。
ツールでは「透過のまま出力する」を外すと、選んだ背景色で透明の部分を塗りつぶせます。
暗い色のタブでも見やすくしたいときに使います。
Q. サイトアイコンの項目が見当たりません
現行WordPressでは「設定」→「一般」のサイトアイコンも確認します。テーマやバージョンによってはカスタマイザーにも設定があります。
SWELLの場合は、カスタマイズの中の「サイト基本情報」にあります。
SWELLのカスタマイズの全項目は「SWELLのカスタマイズメニュー全項目まとめ」にまとめています。
まとめ
- WordPressでは、サイトアイコンに512px以上の正方形を1枚登録するだけでよい
- 元の画像は、ロゴのシンボルか頭文字だけにして、16pxで潰れないようにする
- icoファイルが要るときはファビコン一式生成で7つのファイルをまとめて作れる
- 自動探索用の/favicon.icoと、link rel=”icon”による明示指定を区別する
- 反映されないときは、まずシークレットウィンドウで確かめる
ほかの項目もまとめて点検するなら、「WordPressサイトを自分で点検する手順」で順番と使い分けを解説しています。
ツールの一覧はWEBツール箱にあります。
