WordPressでファビコンを設定する5ステップ

自分のブログやサイトを開いたとき、ブラウザのタブに地球マークや何もないアイコンが出ていると、ちょっと味気ないなと感じませんか。私も最初にWordPressを触ったとき、どこでファビコンを設定するのか分からず、そのまま放置していて「なんだか自分のサイトだけ完成していない気がする…」とモヤモヤしていました。

この記事の結論を先に一言でまとめると、「画像をひとつ用意して、WordPressのサイトアイコン機能から設定すれば、ほとんどのサイトはそれだけでOK」です。

WordPressのファビコン設定を始める前に知っておきたいこと

そもそもファビコンとは？WordPressでの呼び方と役割

ファビコンは、ブラウザのタブやお気に入り、スマホのホーム画面などに表示される、小さなサイト専用のアイコンのことです。WordPressの管理画面では「サイトアイコン」と呼ばれていることが多く、テーマやバージョンによっては設定メニューに「サイトアイコン」という項目が用意されています。

どこに表示されるとどんなメリットがあるのか、ざっくりまとめるとこんな感じです。

表示される場所	どんなところか	ユーザーにとってのメリット
ブラウザのタブ	ページタイトルの横に出る小さなアイコン	タブをたくさん開いていても、自分のサイトを見つけやすい
ブックマークやお気に入り	登録したサイト名の左側のマーク	一覧の中で目立ち、また見に来てもらいやすくなる
スマホのホーム画面	ホームに追加したときに出るショートカットアイコン	アプリのような見た目になり、タップしてもらいやすい

小さな画像ですが、「パッと見でどのサイトか分かる」という役割はかなり大きいです。特に、複数のWordPressサイトを運営している人は、管理画面のタブをたくさん開いたときに、ファビコンがあるだけで作業のしやすさが全然違ってきます。

ファビコンを設定するメリット3つ

ファビコンをわざわざ設定するのは少し面倒に感じるかもしれませんが、実はメリットがはっきりしています。ポイントは次の3つです。

私も、自分のブログにオリジナルのファビコンを付けたとき、SNSから来てくれた読者に「タブを見て、あの黄色のアイコンのサイトだとすぐ分かった」と言われたことがあります。たったひとつの小さな画像ですが、読者の頭の中で「このサイトはあのアイコンのところ」というイメージがしっかり残りやすくなるんですよね。

WordPressファビコン画像を作る前に決めておきたいこと

いざファビコンを作ろうとすると、「何を描けばいいんだろう」と手が止まりがちです。細かいデザインを考え始めるとキリがないので、最初は次のくらいのことだけ決めておくと気楽です。

いきなりカッコいいロゴマークを作る必要はありません。単色の背景に頭文字を1文字だけ大きく置くだけでも、デフォルトのままよりかなり印象が良くなりますし、あとからじっくり作り替えることもできます。まずは「最低限、自分のサイトだと分かる目印を付ける」という感覚で十分です。

WordPressでファビコンを設定する4つの方法

もっとも簡単なファビコン設定手順（サイトアイコン）

多くのWordPressサイトでいちばん使いやすいのが、管理画面から「サイトアイコン」としてファビコンを設定する方法です。テーマにあまり依存せず、WordPressの標準機能の範囲で完結するのが嬉しいポイントです。

おおまかな流れは次のようなイメージです。

環境によっては、「設定」ではなく「外観」側にだけサイトアイコンの項目がある場合もありますが、考え方は同じです。画像さえ用意しておけば、あとは指示通りにアップロードして保存するだけで、タブやブックマークにファビコンが表示されるようになります。

このやり方は、次のような人に向いています。

• HTMLやCSSには触れたくない
• なるべくプラグインを増やしたくない
• シンプルで壊れにくい方法でファビコンを設定したい

テーマカスタマイズ画面からのファビコン設定

クラシックなタイプのWordPressテーマでは、「外観」→「カスタマイズ」からファビコンを設定するパターンもよくあります。昔からある手順なので、テーマの解説記事でこの方法が紹介されていることも多いです。

よくある流れは次の通りです。

• 左メニューの「外観」→「カスタマイズ」をクリックする
• 「サイト基本情報」や「サイト情報」「一般設定」などの項目を開く
• その中にある「サイトアイコン」「サイトのアイコン」といった項目を探す
• 画像をアップロードし、サイズや切り抜きを確認しながら設定する

カスタマイズ画面では、サイト全体のデザインをプレビューしながら作業できるので、「このロゴと同じテイストのアイコンにしたい」といった調整もしやすいです。テーマによっては、ロゴ画像とサイトアイコンを同じ画面でまとめて設定できるものもあります。

ブロックテーマでのファビコン・サイトアイコン設定

ブロックテーマの場合、ヘッダーに配置した「サイトロゴ」ブロックをベースにしてファビコンを設定することがあります。画面構成がクラシックテーマと少し違うので、最初は戸惑いやすいポイントです。

代表的な流れは次のようなイメージです。

• 左メニューの「外観」→「エディター」を開く
• 編集したいテンプレート、もしくはヘッダーのテンプレートパーツを選ぶ
• ヘッダー内にある「サイトロゴ」ブロックをクリックして画像を設定する
• テーマによっては、「サイトロゴをサイトアイコンにも使う」といった設定項目が用意されている

ブロックテーマによって細かい操作は変わりますが、考え方としては「ロゴの画像を決めて、それをファビコンにも使う」というパターンが多いです。ロゴとファビコンが同じモチーフになるので、サイト全体の雰囲気にまとまりが出やすくなります。

header.phpにタグを追加してファビコンを設定する方法

少し上級者向けになりますが、テーマファイルを編集して、ファビコン画像を直接指定する方法もあります。静的なHTMLサイトから引っ越してきた人や、もともとコードを書くのに慣れている人には馴染みのあるやり方かもしれません。

ざっくりした流れは次のようなものです。

• まずファビコン用の画像をメディアライブラリにアップロードする
• その画像のURLを控えておく
• 子テーマのheader.phpを開き、headタグ内にファビコン用のlinkタグを追加する
• 保存して、ブラウザを更新して表示を確認する

ここで注意したいのは、親テーマのheader.phpを直接編集してしまうと、テーマのアップデートのタイミングで上書きされてしまう可能性があることです。作業する場合は子テーマを用意し、念のためバックアップも取ってから行うことをおすすめします。

また、書き方を間違えると画面が真っ白になってしまうこともあるので、「どうしてもこの方法で管理したい」という理由がなければ、原則としてWordPressのサイトアイコン機能を使うほうが安心です。

ファビコン画像の作り方とおすすめ設定サイズ

WordPressのファビコンに向いているサイズと形式

ファビコンは表示されるサイズがかなり小さいので、細かい線や文字を詰め込みすぎると読めなくなってしまいます。そこで、WordPressで使うファビコン画像は、次のような条件を目安にすると扱いやすいです。

項目	目安・おすすめ
画像サイズ	縦横512ピクセル以上の正方形
縦横比	1:1（正方形）
ファイル形式	PNGがおすすめ、必要に応じてICOも用意
背景	単色か、シンプルなグラデーション
デザインの複雑さ	小さなマーク1つ、または頭文字1〜2文字

WordPress側で自動的にリサイズされるため、元の画像はある程度大きめに作っておいたほうが、最終的にきれいに表示されます。背景透過のPNGを使うと、丸い表示や角丸でも自然に見えやすくなります。

Canvaなどのツールで簡単にファビコンを作る流れ

デザインソフトを持っていなくても、Canvaのようなオンラインツールを使えば、WordPress用のファビコンは十分きれいに作れます。私が普段よくやっている作り方は、次のようなイメージです。

コツは、とにかく「詰め込みすぎないこと」です。ヘッダーロゴに使っている画像をそのまま縮小すると、細かい文字や線が潰れてしまうことが多いので、「ファビコン専用の簡単バージョン」を作るつもりで割り切ると、見やすくなります。

無料アイコン素材を使うときの注意点

ゼロからデザインするのが苦手な場合は、無料のアイコン素材サイトを使ってファビコンを作る方法もあります。ただし、素材サイトごとに利用規約や商用利用の条件が違うので、WordPressのファビコンとして使う前に、いくつかチェックしておきたいポイントがあります。

項目	確認したいポイント
商用利用の可否	収益化しているブログや企業サイトで使えるかどうか
クレジット表記	サイトのフッターなどに出典を明記する必要があるか
ロゴ・商標への利用	ロゴマークや商標として使うことが許可されているか
再配布の扱い	素材そのものを配布してはいけないなどの制限がないか

とくに、将来的に商標登録の可能性がある企業サイトやサービスのロゴとして使う場合は、「ロゴとして利用OKかどうか」を必ず確認しておきたいところです。ブログ用のアイコンだからといって油断せず、規約だけは一度目を通しておくと安心です。

WordPressで設定したファビコンが表示されないときの確認項目

まずはここをチェックしたい基本設定

最初に確認したいのは、そもそもWordPress側での設定が正しくできているかどうかです。「当たり前のことじゃないか」と思うかもしれませんが、意外と見落としがちなポイントがいくつかあります。

状況別に、よくある原因を整理すると次のようになります。

起きている症状	よくある原因	チェックする場所
まったくファビコンが表示されない	サイトアイコンの設定自体がされていない	WordPressの設定画面、または外観カスタマイズ
一部のページだけ古いアイコンのまま	キャッシュプラグインやブラウザのキャッシュが残っている	キャッシュプラグインの管理画面、ブラウザ設定
特定のブラウザだけ表示が違う	ブラウザごとのキャッシュや拡張機能の影響	別ブラウザやシークレットウィンドウでの表示

こういった基本的な部分をひと通り見直してから、キャッシュやコードの問題を疑っていくと、無駄な作業を減らしやすくなります。

ブラウザやキャッシュプラグインの影響による表示遅れ

ファビコンのやっかいなところは、ブラウザ側がかなり強めにアイコンを保存してしまうことです。WordPressで新しいファビコンを設定しても、ブラウザが以前の画像を覚えていて、しばらく前のアイコンのままに見えてしまうケースがよくあります。

そんなときに試してほしい手順がこちらです。

• 使っているブラウザのキャッシュを削除する、もしくはシークレットウィンドウで開き直す
• キャッシュ系プラグインを入れている場合は、全キャッシュの削除ボタンを実行する
• レンタルサーバー側でキャッシュ機能を有効にしている場合は、一度無効化して確認する

少し時間を置くと自然に新しいアイコンに切り替わることも多いので、あまり短い間隔で何度も画像を差し替えすぎないほうが、かえって状況を把握しやすくなります。「設定は合っているのに、見た目だけ古いものが残っている」という場合は、キャッシュを疑ってみてください。

それでもダメなときに試したい一歩進んだ対処法

基本の設定やキャッシュを見直しても、どうしてもWordPressのファビコンが変わらない場合は、少し踏み込んだ部分も確認してみましょう。

また、画像ファイルの名前を変えてアップロードし直すのもひとつの手です。同じfavicon.pngという名前のままだとブラウザが「前と同じファイルだ」と判断してしまうことがあるので、ファイル名を少し変えてからWordPressのサイトアイコンを設定し直すと、反映されやすくなるケースがあります。

よくある質問（WordPressのファビコン設定Q&A）

複数のWordPressサイトで同じファビコンを使ってもいいですか？

技術的には、複数のWordPressサイトで同じファビコンを使っても問題ありません。ただ、ユーザーから見たときに「どのタブがどのサイトなのか」が分かりにくくなる場合があります。

できれば、次のような工夫をしておくとタブやブックマークで見分けやすくなります。

• 同じモチーフで、サイトごとに背景色だけ変える
• 同じ色で、サイトごとに頭文字の文字だけ変える

まったく別のテーマのブログであれば、ファビコンもそれぞれの雰囲気に合わせて変えておくと、読み手の頭の中でも整理されやすくなります。

スマホとPCで別々のファビコンを設定できますか？

基本的には、WordPressのサイトアイコン設定で指定したファビコンが、PCとスマホのどちらでも使われます。スマホのホーム画面に追加したときなど、表示のされ方が多少変わることはありますが、アイコン自体は共通と思っておいて大丈夫です。

もしスマホ用にアイコンの見え方を調整したい場合は、次のような点を意識するといいですよ。

• スマホのブラウザからホーム画面に追加して、実際の見え方を確認する
• 小さい画面でもはっきり分かるように、なるべくシンプルなデザインにしておく

ふつうのブログやコーポレートサイトであれば、PCとスマホで同じファビコンを共有していても困ることはほとんどありません。まずは共通アイコンで運用してみて、どうしてもこだわりたい場合に個別調整を検討するくらいで十分です。

ファビコンを変更したのに検索結果のアイコンが変わりません

WordPress側でファビコンを変更しても、検索結果に表示されるアイコンがすぐには変わらないことがあります。これは、検索エンジン側がアイコン画像をキャッシュしていて、一定のタイミングでしか更新されないためです。

まずは次のような点を確認してみてください。

• サイト内のすべてのページで、新しいファビコンが表示されているか
• 古い画像ファイルへのリンクが、テーマファイルなどに残っていないか
• インデックスやサイトマップが正常に動いているか

検索結果の表示タイミング自体は検索エンジン側の判断に委ねられているので、「今すぐ変えたい」と思っても、こちらから完全にコントロールすることはできません。ただ、WordPress内での設定が整っていれば、時間の経過とともに新しいファビコンへ切り替わるケースがほとんどです。

まとめ：今日からできるWordPressファビコン設定の最初の一歩

まずはこの3ステップから試してみよう

そして、今日からできる最初の一歩はとてもシンプルです。まず、Canvaなどのツールで「サイトカラーの背景＋頭文字1文字」だけのシンプルなアイコンをひとつ作ってみてください。そのうえで、WordPressの管理画面からサイトアイコン（ファビコン）の設定画面を開き、その画像をアップロードして反映させてみましょう。

たったこれだけの作業ですが、ブラウザのタブやブックマークに自分のサイトらしいアイコンが並ぶと、不思議と運営している本人のやる気も上がります。まだファビコンを設定していなかった方は、このタイミングで一度チャレンジしてみてください。