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

サイト制作

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

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

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

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.アイコン素材サイトを利用する

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

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

5-4.オリジナルロゴを依頼する

サイトアイコンをビジネス用のサイトに設定する場合や、他サイトとの差別化を特に意識する場合は、デザイナー・イラストレーターへの作成依頼がおすすめです。オリジナリティに加え、クオリティの高いサイトアイコンを作成してもらえます。

たとえば、スキルマーケットの「ココナラ」を利用すると、オリジナルのイラストやロゴ・アイコン画像作成の依頼が可能です。デザイナーそれぞれが公開している作品サンプルを確認できるため、依頼先を選びやすい特徴があります。

依頼の際はかっこいい系統か可愛い系統かなど、具体的なデザインのイメージを伝えられると、理想的なサイトアイコンを作成してもらいやすくなります。デザイナーへの作成依頼は、本格的なサイトアイコンを得たい人に特におすすめです。

6.ワードプレスのサイトアイコンを作るときのポイント

サイトアイコンは、オリジナリティを出すことが大切です。他サイトと比較したときに目を引くデザインか、スペースを有効活用したデザインか意識しましょう。

下記ポイントを取り入れると、より魅力的なサイトアイコンの作成ができます。

6-1.シンプルで分かりやすいデザインにする

サイトアイコンは、ブラウザのタブやブックマークした際に小さく表示されます。装飾が多い複雑なデザインを用いると、何を表現しているか何が描かれているか、分かりにくくなるため注意が必要です。

下記を意識して、シンプルで分かりやすいデザインを目指しましょう。

  • パーツを少なくする
  • 一つひとつの要素を大きくする
  • テーマカラーを利用する
  • 明瞭なモチーフを取り入れる

瞬間的にデザインを認識できるサイトアイコンにすると、小さな表示でもユーザーの記憶に残りやすくなります。

6-2.余白部分は透過させる

余白部分を透過させると、サイトアイコンの完成度を高められます。特に四角形以外の形状であれば、余計な余白を透過することで印象的になり、サイトアイコンを際立たせられます。透過する際は、ファイル形式をPNGにして保存してください。

また、透過すると下記メリットも得られます。

  • 背景色が透明であるため、加工しやすくバリエーションが作りやすい
  • 他の画像との組み合わせが容易になる

なお、デザインによっては余白を表示させたままのほうが良いケースもあります。サイト全体との相性なども考慮し、余白を透過させるか検討してください。

6-3.PNG.形式で保存する

PNG.形式は余白を透過できることに加えて、画像データとしてさまざまなメリットが得られる、おすすめの保存方法です。

  • 多くのソフトでファイルの表示・編集が可能
  • 圧縮時にデータが失われない
  • 鮮明な画像を保存できる

PNGは特許を取得していないファイル形式のため、特定のソフトを用意せずに表示・編集などの取り扱いができます。

圧縮時にデータを失わないのも、メリットの1つです。非可逆圧縮により一部データが失われるJPGと比較すると、保存や転送がしやすい特徴があります。

また、保存の際は「PNG-8」ではなく「PNG-24」を選択すると、より鮮明な画像に仕上がります。「PNG-24」は色数が1,670万色と多く、デザインされた画像の保存に最適です。画像サイズを変更しても画質の悪化を防げます。

6-4.画像に余白を作る

スマートフォンでショートカットを作ると、アプリのように角が丸くなったサイトアイコンが表示されます。画像の四隅まで利用したデザインは、角が削られて理想と反する見た目になる可能性があるため、注意してください。

事前に余白を作ると見た目が崩れることを防げます。編集の際はスマートフォンでどのように表示されるのか、実際に確認しながらデザインを調整すると、理想に近いサイトアイコンが作成できます。

まとめ

ワードプレスのサイトアイコンとは、「ファビコン」とも呼ばれ、サイトを開いたときのタブにサイト名と一緒に表示されるアイコンのことです。設定するとユーザーの記憶に残りやすく他のサイトと識別してもらえるといったメリットがあります。

設定方法はワードプレスであれば基本情報から設定したり、テーマファイルやプラグインを使用したりなどで設定ができます。サイトアイコンの作成方法も費用やデザインに応じてさまざまあるため、自作するなら画像編集ソフトやCanva、プロに任せるならココナラなどがよいでしょう。

無料のSEOツール「CANALY」を使うと何ができるの?製品デモオンラインセミナー 初心者でも使いこなせるSEO一元管理ツールCANALY

RANKING

TOTAL
WEEKLY
無料のSEOツール「CANALY」を使うと何ができるの?製品デモオンラインセミナー
上部へ戻る
CANALY

300分かかる競合分析が1分で可能に無料で分析してみる

  • 分かりやすい操作で簡単に分析
  • SEOに必要な機能がAll in One
  • ずっと無料で使い続けられる
CANALYを無料で試す
CANALY