ワードプレスのサイトアイコン（ファビコン）の必要性・設定方法

公開日:2023/08/28 更新日:2023/09/29

ブラウザでサイトを見るときに、タブにサイト名と一緒に表示されているアイコンのことを「サイトアイコン」と言います。それぞれのサイトによってアイコンは異なるため、「あのサイトはこのアイコン」と印象に残っている方もいるのではないでしょうか。サイトアイコンはサイトの運営において大切な役割を果たすため、設定するのがおすすめです。

当記事では、ワードプレスでサイトアイコンを設定するメリットや設定方法、またサイトアイコン自体の作り方などを解説します。サイトアイコンの設定方法がわからないという方は、ぜひお役立てください。

1.ワードプレスのサイトアイコン（ファビコン）とは？

サイトアイコンとは、Webサイトのアイコン画像のことを指しています。「ファビコン」ともいわれ、設定するとサイトを開いた際に、ブラウザのタブにサイト名と合わせて表示されるようになります。「お気に入り」やブックマークの他、スマートフォンのホーム画面などでも、サイト名と合わせて表示される仕組みです。

サイトアイコンの設定は必須ではありませんが、独自のアイコンを用いて表示させると、サイトのオリジナル性やイメージ作りに役立ちます。

2.ワードプレスでサイトアイコンを設定するメリット

サイトアイコンの設定により、SEOに直接影響が及ぶことはありません。しかし、設定すると検索結果での視認性の向上やサイトのクリック率、ブランディングに役立ちます。うまく活用すると、サイトにとってプラスの効果を得られる方法です。

ここでは、サイトアイコンの設定で得られる3つのメリットを紹介します。

2-1.ユーザーの記憶に残りやすくなる

独自のサイトアイコンを設定していない場合は、ワードプレスのデフォルト画像が代替アイコンとして自動的に表示される仕組みです。代替アイコンのままでもサイトの運営に問題はありませんが、ユーザーに与える印象が異なります。

たとえば、独自のサイトアイコンはユーザーの記憶に残りやすい特徴があるため、過去に利用したサイトであると気づかせるきっかけにできます。

また、検索結果の表示画面ではそれぞれのサイトのページタイトルは、同じカラーで表示される形式です。一方、サイトアイコンはサイトごとに設定したものが表示されます。人はものを認識するときに「読む」よりも「見る」ことを優先的に行います。他サイトと異なる独自のサイトアイコンを設定すると、ユーザーの目を引くことが可能です。注目を集めるとページタイトルが読まれる確率が高まり、クリック率のアップにつなげられます。

2-2.サイトを識別しやすくなる

独自のサイトアイコンを設定すると他サイトと識別しやすくなるため、ユーザーの利便性が向上します。

パソコンで複数のサイトを開いているときでも、タブに表示されたアイコンだけですぐに見分けられるので、サイトを探す手間の軽減が可能です。同様に、たくさんのアイコンが並ぶスマートフォンのホーム画面でも、サイト名を確認する手間を省いて見分けられます。

画像は文字に比べ一瞬で多くの情報を伝えられ、うまく活用すると認知度も高められる方法です。一度利用したユーザーの印象に残ると、さまざまなサイトアイコンが並ぶ中でも目を引くため、リピート率を高められます。

2-3.サイトのブランディングにつながる

ブランディングとは、提供する商品・サービスの認知度や価値を高める取り組みです。独自のサイトアイコンを設定することにより他サイトとの差別化ができ、ブランディングに役立ちます。

サイトアイコンはサイト全体のデザインの一部分に含まれるため、イメージ作りにも活用できます。たとえば、自分のサイトのイメージカラーや商品・サービスを連想させるサイトアイコンを設定すると、ブランディングに効果的です。

認知度の向上にともない、新規ユーザーの獲得やリピート率の高まりが期待できます。

3.ワードプレスのサイトアイコンの設定方法3つ

サイトアイコンを設定する方法は3つあり、それぞれ複雑な操作や工程は不要です。ここでは、サイトアイコンを設定する3つの方法と手順を紹介します。

なお、「WordPress 4.3」よりも古いバージョンを利用していると「3-1.　サイトの基本情報から設定する」の方法が活用できません。「3-2.　テーマファイルを編集する」もしくは「3-3.　プラグインを使う」の、いずれかの方法で設定してください。

3-1.サイトの基本情報から設定する

ワードプレスのテーマカスタマイザーを利用すると、サイトの基本情報から簡単に設定できます。

1	管理画面の「外観」から「カスタマイズ」を選択し開く
2	「サイト基本情報」のメニュー下部にある「サイトアイコンを選択」を押下
3	下記のどちらかを選択サイトアイコンに設定する画像を新たにアップロードメディアライブラリにある画像から選ぶ
4	画像を選び「画像を選択」を押下長方形の画像を選ぶと画像の切り抜き画面が表示されます。必要に応じて切り抜き、もしくは切り抜きが不要の場合は「切り抜かない」を選択してください。
5	「公開」を押下し、設定を完了させる

3-2.テーマファイルを編集する

テーマファイルを編集し設定することも可能です。サイトアイコン画像は、事前にFTPソフトなどを使用してアップロードしましょう。

なお、実際にテーマファイルを編集する際は、事前にバックアップを取ることが大切です。誤った部分を編集するとサイトが表示されなくなるなど、トラブルが発生する恐れがあります。万が一のトラブルに備えた上で、編集を進めてください。

1	管理画面の「外観」から「テーマファイルエディター」を選択し開く
2	右側にテーマファイルが表示されるため「ヘッダー（header.php）」を選択し、編集画面を開く
3	表示されたソースコードの<head>〜</head>内に、下記のコードを挿入する `<link rel="shortcut icon" href="サイトアイコン画像のURL">`
4	コード挿入後に「ファイルを更新」を押下し、設定を完了させる

3-3.プラグインを使う

テーマファイルの編集を避けたい場合や「WordPress 4.3」よりも古いバージョンを利用している場合は、プラグインを使う方法もあります。

ここでは「Favicon Rotator」と呼ばれるプラグインを使用する方法を、2つの工程に分けて紹介します。

（1）プラグインをワードプレスにインストールしましょう。

1	管理画面の「プラグイン」から「新規追加」を選択し開く
2	右上に検索窓が表示されるため『Favicon Rotator』を入力して検索後「今すぐインストール」を押下
3	インストール完了後「有効化」を押下する

（2）プラグインを有効化した後、サイトアイコンを表示させる工程に進みます。

1	管理画面の「外観」から「Favicon」を選択し開く
2	「Add Icon」を押下後、下記のどちらかを選択サイトアイコンに設定する画像を新たにアップロードメディアライブラリにある画像から選ぶ
3	サイトアイコンとして表示したい画像の「表示」を押下
4	「Add Browser Icon」を押下後「Save Changes」を続いて押下し、設定を完了させる

4.ワードプレスのサイトアイコンが表示されないときの原因と対処法

設定したサイトアイコンは、Googleによってクロール後インデックスされなければなりません。Googleがサイトアイコンの有無や変更を認識した後に、設定が反映される仕組みです。

早い場合は設定完了から数時間で反映されますが、1日以上時間を要するケースもあります。2日ほど待っても設定が反映されない場合は、下記3つが原因となっている可能性があります。それぞれ対処法も併せ紹介するため、参考にしてください。

4-1.古いサイトアイコンのキャッシュが残っている

古いキャッシュが残っていると、新たに設定したサイトアイコンが表示されない場合があります。キャッシュとは、過去に訪問したサイトのアクセス履歴をブラウザに保存する機能です。次回サイトにアクセスする際に、表示速度を速めるシステムとなっています。

以前のサイトアイコンのデータを、ブラウザがキャッシュとして残していることが原因の可能性があるため、キャッシュデータの削除が必要です。キャッシュデータの削除方法はブラウザによって異なります。ここでは、Google Chromのキャッシュ削除方法を紹介します。

1	ブラウザ右上の三点アイコン「…」から「その他のツール」を開く
2	「閲覧履歴を消去」を押下し「キャッシュされた画像とファイル」にチェックを入れる
3	「データを削除」して完了させる

キャッシュデータ削除後は、一度ブラウザを終了させましょう。再起動後、サイトアイコンが設定通りに反映されているか確認してください。

4-2.画像の形式・サイズなどに問題がある

作成した画像そのものが、サイトアイコンとして表示するのに適していない可能性があります。

ファイル形式が「PNG」や「JPG」になっている
画像サイズが大きすぎる、もしくは小さすぎる

サイトによってはPNGやJPGでは適切に表示されないため、ファイル形式を「ICO（.ico）」に変更し、再度設定してみてください。ファイル形式を変更しても設定が反映されない場合は、画像サイズに問題はないか確認しましょう。

4-3.画像のURLが間違っている

サイトアイコンを表示させるには、画像URLを適切に設定する必要があります。設定時に異なるURLを挿入したり、URLが途中で途切れていたりすると、画像が読み込まれずサイトアイコン表示の妨げになります。正しい画像URLに修正し、設定が反映されるか確認してください。

5.ワードプレスのサイトアイコンの作り方

ワードプレスのサイトアイコンは、最適なサイズやファイル形式を事前に把握し作成しましょう。最適な形式で作成すると、その後の設定がスムーズにできます。

サイズ：512ピクセル×512ピクセルの正方形
・ファイル形式：「PNG」や「JPG」に加えて「ICO」も用意

サイトアイコンは、512ピクセル×512ピクセルで作成することが推奨されています。解像度が低すぎると、画像サイズを変更した際に画質の悪化を招くので注意してください。

ファイル形式はPNGやJPGだけでは適切に表示されないケースがあります。ICOも併せて事前に用意すると安心です。

以下ではサイトアイコンの作り方4つを紹介します。

5-1.自作する

サイトアイコンは、下記ソフトや写真を使って自作できます。

ペイントソフトや画像編集ソフトを使う
撮影した写真を使う

Windows標準搭載のペイントソフトを使うとイラスト作成が可能です。液晶タブレットを活用すると設定や機能を生かして、より理想に近いイラストが作成できます。

無料の画像編集ソフトを使用するのもおすすめです。イラストを作成するだけではなく、撮影した写真をサイトアイコン用に編集できます。自作すると自分好みのデザインを反映させやすく、外部への依頼費用もかけずに作成可能です。

5-2.Canvaを利用する

Canvaは、Web上でサイトアイコンが作れる無料のデザイン作成ツールです。

インストール不要
パソコンもしくはスマートフォンで作業可能
サイトアイコンの他、チラシ・名刺なども作成可能

使用できる素材はイラストや写真・画像、フレームや動画など、さまざまな種類があります。ユーザーはCanvaの豊富な素材を使用し、組み合わせたり加工したりしてオリジナルのサイトアイコンの作成が可能です。

デザイナーが手掛けたテンプレートもあるので、デザインが苦手な人でも気軽に作成できます。一部有料機能もありますが基本的には費用をかけず作成できるため、趣味サイトやブログに用いるのに最適です。

5-3.アイコン素材サイトを利用する

素材サイトを利用すると、サイトアイコンに使用する画像を揃えられます。フリー素材サイトであれば、費用もかかりません。

オリジナリティを高めるのは難しくなりますが、加工可能な素材であれば、同じ素材でも違った印象に作り出せます。ただし、加工を禁止している素材サイトもあるため注意してください。禁止事項を把握せずに好きなように使用すると、著作権侵害などに該当する恐れがあります。まずは利用規約・ガイドラインを確認し、適切に利用することが大切です。