WordPressでファビコンを設定しよう！設定方法3種類

WordPressでサイトを運営している人の中には、ファビコンが何かわからない人もいるのではないでしょうか。ファビコンは細かい設定ではあるもののサイトブランドに大きく影響する可能性があるほど重要なものです。また、ファビコンは方法次第では簡単に導入することができます。非常に費用対効果が高いものなので積極的に導入するべきでしょう。この記事では、ファビコンを設定するメリットをご説明し、また実際にファビコンを設定する方法を3種類ご紹介します。

ファビコンって何のこと？

ファビコンは「favorite icon」の略称で、インターネットを閲覧するときに使う「Internet Explorer」や「Google Chrome」などのブラウザのお気に入り画面やタブ、アドレスバー、ブックマークなどに表示される小さなアイコンのことを指します。インターネットブラウザの上に小さなイラストや写真が並んでいるのを見たことがある人も多いでしょう。また、スマホでお気に入りサイトにホーム画面から直接飛べるようにする「ホーム画面に追加」機能を使う際も、設定したファビコンがスマホアプリのようにアイコンとしてスマホに並びます。ファビコンはサイトのロゴマーク的な存在と言えるでしょう。ちなみに、WordPressではサイトアイコンという呼ばれ方もします。

ファビコンがある場合のメリット

ファビコンはサイト運営を行う上では、あってもなくても影響がないため見逃してしまいがちな部分です。その一方、ファビコンを設定するだけでさまざまなメリットを獲得することができます。

・サイトの信頼感がアップする
ファビコンがあるだけで、「ロゴマークを競っているしっかりしたサイトなんだな」という認識を持たれ、サイト内のコンテンツやサイト自体の信頼感がアップします。ひいては運営する企業の製品やサービスの信頼性向上にもつながるでしょう。

・スマホの「ホームに追加」された時の見た目が大きく異なる
ファビコンを設定したサイトについて、スマホの「ホームに追加」、つまりアプリのようにホーム画面から直接サイトに入れるように設定すると、スマホのホーム画面にはファビコンが表示されます。一方、ファビコンを設定していない場合は、サイトのトップページなど一部を切り取ったような画面になるのです。これではユーザーから見ても見栄えが悪く、やはりサイトの信頼性を損ねる可能性があります。見栄えが悪いばかりにホーム画面から削除する人も出てくるかもしれません。これは大きな機会損失です。

・自分のサイトを憶えてもらうことができる
ブラウザのタブやスマホのホーム画面に表示されるファビコンはサイトの看板のような存在です。さらに言えば、じっくり見られるものではないとはいえ常に画面上には表示されているため、ユーザーの記憶に残りやすいのです。実店舗でも看板がお店の目印になるように、ファビコンがあればユーザーも何かのタイミングでそのWEBサイトを思い出しやすくなるでしょう。記憶に残ってもらえればその分ユーザーがサイトに訪れる機会も増え、PVや売上の向上をも見込むことができます。

ファビコンがない場合のデメリット

さまざまなメリットを持つファビコンは、設定しないことで大きなデメリットを被ってしまう可能性もあります。

・手を掛けていない印象を与えてしまう
今や大半の企業サイトが各々のファビコンを設定している時代です。個人サイトでも、力の入っているものであれば多くがファビコンを設定しサイトブランディングの強化に努めています。一方、ファビコンを設定しない場合、ブラウザタブやブックマークなどに表示されるアイコンは白紙の右上部分を少し折ったような何とも味気ないものになります。この地味なアイコンが、華やかなファビコンが並ぶ中で悪目立ちしてしまうのです。ユーザーもファビコンという名前は知らなくとも、「ロゴを使っていないサイトなんだな」という程度の認識はします。いったんそのように捉えられてしまうと、手を掛けていないサイトだという印象になってしまいサイトの内容やコンテンツの信頼性にも影響してきます。製品やサービスを販売するECサイトの場合、このサイトで購入して大丈夫なのだろうか、騙されはしないだろうかと不安を抱かせてしまう可能性さえあるでしょう。

・サイトが印象に残らない
ファビコンがないと悪印象を持たれる可能性がある一方、サイト自体はユーザーの記憶に残りにくくなります。なぜなら、ファビコンが設定されていないサイトは、全て紙を折り曲げたような同じアイコンになるためです。オリジナリティのある看板を持たないと、他の手のかかっていないサイトと十把一絡げに捉えられてしまうため印象に残りづらくなります。後々、ユーザーにとってそのWEBサイトが有益となる機会になっても、思い出してもらうことが難しくなるでしょう。これは事業目的でWEBサイトを運営する場合、特に大きな機会損失になり得ます。

【設定方法】1.ファビコン用画像を用意する

ファビコンを設定するには、当然ですがファビコン用の画像を用意する必要があります。用意する画像のポイントは3つです。

・512×512ピクセルの正方形
ファビコンで使われる画像は全て正方形です。また、WordPressでは512×512ピクセルのサイズの画像が推奨されていますので、できる限り該当サイズの画像を用意するようにしましょう。画像の加工は、Photoshopなどの画像作成ソフトやオンラインツールで行うことができます。

・デザインがシンプル
ブラウザのタブを見て分かるように、実際にパソコン上に表示されるファビコンは16×16ピクセルや32×32ピクセルなど非常に小さいサイズです。Google Chromeトップ画面のサイト履歴やスマホのホーム画面ではもう少し大きく表示されますが、それでも小さな画像になることには変わりありません。画像が小さいにもかかわらずデザインが込み入ったものだと、表示されたときにゴチャゴチャしてしまい何が描かれているのか分からなくなります。せっかく凝ったデザインを考えても、意図を汲んでもらえず徒労に終わってしまう可能性が高いのです。ですから、ファビコンに使う画像はTwitterやFacebookのように、シンプルかつ独自性の高いデザインが良いでしょう。

・背景があるものを選ぶ
iOSなど、使用しているOSや端末によってはファビコンの透明な部分が黒く塗りつぶされてしまう可能性があります。もし黒色のマークや文字をファビコンにしていた場合、黒が重なって全体が真っ黒なファビコンになってしまう危険性があるのです。これでは手抜きサイトと思われても仕方ありません。どの端末でもしっかりとファビコンを表示できるように、背景のある画像を選ぶか作成するようにしましょう。

【設定方法】2.プラグインで実装する方法

テーマファイルを編集（コーディング）せずにファビコンを設定する方法はいくつかあり、その1つがプラグインの活用です。たとえば、「All In One Favicon」というプラグインを使うことで手軽にファビコンを導入することができます。本来、ファビコン用の画像ファイルは変換ソフトを使用して「.ico」という拡張子にする必要があります。その他の拡張子でも設定する事は可能なのですが、Internet Explorerなど特定のブラウザでは正しく表示されない可能性があるのです。一方、「All In One Favicon」を使えばgifやpngなどのファイルを自動的に変換してくれるので手間がかかりません。また、できる限り触れるべきでないWordPressのコアファイルを変更する必要がなくなる点も大きなメリットです。

「All In One Favicon」は使い方も簡単です。インストールして有効化すると管理画面（ダッシュボード）の「設定」から「All in one Favicon」で設定画面に入ることができます。「ico」「png」「gif」「apple touch icon」と4つの拡張子を選択する欄がありますので、用意した画像ファイルと合う場所を選んで読み込むだけで導入は完了します。なお、jpgファイルは使用できませんので注意が必要です。

【設定方法】3. テーマカスタマイザー機能を利用

ファビコンの実装は、テーマ編集で行うことも可能です。まず、作成した画像ファイルをWebサイトのあるサーバーのルートディレクトリにアップロードしてください。次に、テーマファイルのヘッダーにファビコンの画像ファイルを記述します。手順は、まず管理画面（ダッシュボード）から「外観」→「テーマ編集」をクリックします。そして、画面右の項目から「ヘッダー(header.php)」を選び、「」というコードをコピー＆ペーストしてください。これで画像がファビコンとしてWordPressに実装されます。

プラグインの利用やテーマ編集に加えて、WordPressにはテーマ自体にファビコンを実装する機能が備わっています。これはデフォルトで設定されている、「Twenty Seventeen」などのテーマにも備わっていますので、WordPressユーザーであれば誰でも利用可能です。手順については、まず管理画面（ダッシュボード）の「外観」から「カスタマイズ」に入ります。サイトのデザインを編集する画面になりますので、画面右のメニューから「サイト基本情報」をクリックしてください。「ロゴ」「サイトタイトル」「キャッチフレーズ」などを設定する項目の下に「サイトアイコン」という項目があります。これがファビコンを設定する場所です。画像を選択というボタンがありますのでこれをクリックし、ファビコンにしたい画像を選択します。画像を正方形に切り抜く画面になりますので、好きな部分で画像を合わせて右下の「画像切り抜き」ボタンを押せばファビコンが仮設定されます。すでにブラウザタブにはファビコンが表示されていますが気を抜いてはいけません。最後にカスタマイズ画面左上の「公開」ボタンを押すことでファビコンが確定します。「公開」を押さずにブラウザボタンや×ボタンで戻ってしまうと編集前の状態に戻ってしまうので気をつけてください。テーマごとに多少の違いはあるものの、概ねこの手順でファビコンを実装することができます。

【テーマカスタマイザー機能を利用する理由】1.コードが読める必要がない

テーマカスタマイザー機能を利用するメリットはいくつかあり、第一に挙げられる点はコードを理解する知識が不要なことです。テーマファイルを編集してファビコンを実装する場合には、HTMLと呼ばれるサイトの構造を示すコードを読み書きできるスキルが求められます。コードの構造は先ほどご説明した「管理画面」→「外観」→「テーマ編集」から確認することができますが、知識のない人にとってはまるで暗号のように感じられ、編集するのに恐怖さえ覚えるかもしれません。実際、下手にいじってしまうとサイトが台無しになってしまう可能性もあります。したがって、HTMLに関する知識を習得し、おそるおそるコーディングを実行することなくファビコンを設定できるのは、テーマカスタマイザーの大きなメリットだと言えるでしょう。

【テーマカスタマイザー機能を利用する理由】2.画像を準備する必要がない

テーマカスタマイザー機能を使用する2つ目のメリットは、ファビコン用の画像を準備する必要がない点です。先述したようにファビコンに使う画像は512×512ピクセルの正方形の画像ファイルに指定されています。これを用意するにはPhotoshopなどの画像編集ソフトが必要です。さらに、ファビコン画像にするには変換ソフトを使用して拡張子を「ico」しなければなりません。しかし、テーマカスタマイザー機能ならこれらの手間を一挙に省くことができます。pngやjpgの画像でもそのまま使うことができますし、正方形に切り抜く機能も搭載されています。複数の変換・編集ソフトを用意して使い方を学ぶ必要がないのは大きな魅力です。

【テーマカスタマイザー機能を利用する理由】3.サイトスピードに影響しない

コーディングをせずともファビコンを実装する方法にプラグインの導入がありますが、その欠点としてWordPressに負荷がかかってしまう点があります。ファビコン用のプラグインに限ったことではありませんが、WordPressはプラグインを利用するほどサイトが重くなり表示するスピードが遅くなってしまうのです。サイトの表示スピードが落ちればユーザビリティも下がり、結果として離脱率の上昇を招くことにもなります。したがって、不要なプラグインはできる限り使わない方が良いのです。その点、テーマカスタマイザー機能はプラグインではなくWordPressに搭載されているツールです。当然サイトスピードに影響もありません。コーディングのようなスキルが不要で、プラグインのようにサイトスピードにも影響しないのがテーマカスタマイザー機能の優れた点なのです。

まとめ

今や、ファビコンの導入はサイトの信頼度を高めるために必須事項と言えるまでになっています。企業サイトであれば、実装してプラスがあるというより、むしろ実装せずにいるとデメリットが大くなるという段階に達しているといっても過言ではないでしょう。