「faviconってなに?」「自分のサイトにも付けたいけど、どうやるの?」──そんな疑問をお持ちのWordPressユーザーは多いのではないでしょうか。
favicon(ファビコン)とは、ブラウザのタブやブックマークなどに表示される小さなアイコンのこと。サイトの「顔」として印象を左右する大事な要素です。
この記事では、WordPressでfaviconを設定する方法や注意点、トラブル時の対処法まで初心者にもわかりやすく解説していきます。画像付きで具体例も紹介するので、ぜひ最後までご覧ください。
1. WordPressでfaviconを設定する方法と注意点
1-1. faviconとは?役割とメリット
faviconとは「favorite icon」の略で、ブラウザのタブやブックマークバー、スマートフォンのホーム画面などに表示される小さな画像のことです。
(サイト名の左ヨコに出てきます↓)

主なメリットは以下の通りです:
- サイトの信頼感・ブランドイメージが高まる
- 他サイトと区別がつきやすくなる
- ユーザーの記憶に残りやすい
1-2. WordPressで設定する主な方法
WordPressでは、以下の2つの方法でfavicon(サイトアイコン)を設定できます:
- カスタマイザーから設定する(推奨)
- サイトのheadタグにHTMLで手動記述する(中級者以上向け)
初心者にはカスタマイザー経由の設定が簡単で確実です。
2. faviconとは?WordPressでの作り方と設定手順
2-1. favicon画像の最適サイズと形式
推奨されるfaviconの画像仕様は以下の通り:
項目 | 推奨値 |
---|---|
サイズ | 512×512px |
形式 | PNG(透過対応)、JPEG、ICO |
容量 | 100KB以内推奨 |
画像はできるだけシンプルで視認性の高いものを用意しましょう。
2-2. 管理画面から設定する手順
- WordPress管理画面にログイン
- 「外観」→「カスタマイズ」→「サイト基本情報」へ移動
- 「サイトアイコン」欄の「画像を選択」から作成済みfaviconをアップロード
- トリミングが必要な場合は調整
- 「公開」をクリックして保存
これでfaviconが反映されます。
3. 初心者でも簡単!WordPressでサイトアイコン設定
3-1. カスタマイザーでの操作方法
上記で紹介した通り、WordPressのカスタマイザーでは直感的にfaviconを設定できます。
【ポイント】
- アップロード後、すぐにプレビューで確認できる
- サイズの調整やトリミングも可能
- 複数のアイコン形式を用意する必要がない
3-2. プラグインを使わない設定法
基本的にはカスタマイザーを使えばプラグイン不要ですが、旧テーマや独自テーマを使っていてカスタマイザーに「サイトアイコン」の項目がない場合は、HTMLに以下を記述します:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
このファイルはFTPでアップロードする必要があるため、初心者にはやや難易度が高いです。
4. WordPressのfaviconが反映されない時の対処法
4-1. キャッシュクリアで解決するケース
faviconが反映されない原因の多くはキャッシュです。
【対応方法】
- ブラウザのキャッシュを削除
- キャッシュ系プラグイン(例:LiteSpeed Cache)を一時停止
- サーバー側のキャッシュクリア
4-2. ブラウザやサーバーの影響もチェック
一部のブラウザでは反映に時間がかかることもあります。また、SSL設定やCDN(Cloudflareなど)の影響で古いfaviconが表示される場合もあります。
5. WordPressのfavicon設定ガイド【画像付き解説】
5-1. 設定例と反映までの流れ
実際の設定手順を図解します:
- カスタマイザーにアクセス
- サイトアイコン欄から画像を選択
- トリミングとプレビュー確認
- 保存して公開
設定完了後、反映されるまで数分~数時間かかることもあるので焦らず待ちましょう。
5-2. よくある失敗と注意点
- サイズが小さすぎる(→512px以上を推奨)
- PNGの透過処理ミス(背景が白くなる)
- 古いfaviconファイルが残っている(→削除して再アップ)
まとめ
faviconはサイトの第一印象を決める重要な要素です。WordPressではカスタマイザーを使うことで、初心者でも簡単に設定できます。
画像サイズや形式に注意しつつ、設定後はキャッシュクリアなどの対応も忘れずに。正しく設定すれば、ブランド力や信頼性が高まります。
サイトの印象アップに、ぜひfaviconの設定を取り入れてみてください。