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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<link rel="shortcut icon" href="サイトアイコン画像のURL">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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