ファビコンとは、サイトにアクセスすると下図のようにブラウザ上に表示されるアイコン画像のことだ。ファビコンがあると、ないものに比べて目に留まりやすい。また、どの大手企業サイトにもファビコンがあるように、信頼性の高いサイトという印象をユーザーに与える。
ここでは「Favicon by RealFaviconGenerator」というプラグインを使ったファビコン設定を紹介する。このプラグインは、従来のファビコン設定の手間を省き、さらに iPhone や Windows 8 のアイコン画像まで設定できる。
プラグインの画面はすべて英語だが、図の通りに進めるだけで設定できるので安心してほしい。
また FTP ソフトを使用して手動でファビコンを設置する方法もあるが、初心者の方もすぐに設置できる方法を解説するため、ここでは割愛する。
インストール方法は、『WordPress プラグインのインストールと停止・削除・更新の方法』を参考にしよう。
新しいプラグインをインストールすると、ごく稀に、不具合が発生する可能性がある。そんな時に、すぐに復元できるようにプラグインを操作する時は、「WordPress のバックアップ」を取っておくか、「ローカル環境でテスト」するようにしよう。
１．ファビコン画像を用意する
ファビコンの表示は冒頭で紹介したようにブラウザ上に縮小されて表示される。文字や細かいイラストだと表示がつぶれてしまうので、ブログのイメージに合わせたシンプルなイラスト画像を用意しておこう。
また画像サイズはプラグインが推奨する 260 × 260 ピクセル以上の正方形にしよう。そうするとことで後述する iPhone のアプリ画像と Windows 8 のスタート画面用の画像にも反映される。
ここで気をつけるべきは、画像ファイルは PNG か GIF を用意しよう。通常は、ファビコン専用の画像（ファイルの種類：ico）を用意する必要があるのだが、「Favicon by RealFaviconGenerator」はそれを自動生成してくれる。
２．ファビコン画像を設定する
次に WordPress 管理画面の左メニューにある「外観」にカーソルをあてると「 Favicon」が追加されているのでクリックしよう。するとファビコン画像の設定画面が表示されるので「Select from the Media Library（画像をライブラリから選択する）」をクリックする。
ボタン下の注記には、画像サイズが 260 × 260 ピクセル以上を推奨していることが記載されている。
下図のメディアライブラリ画面が表示されたら用意したファビコン画像をアップロードする。そして画面右下にある「選択」をクリックする。
画像のパスが下図のように自動で入力されたら「Generate favicon（ファビコンを自動生成する）」をクリックしよう。
次の画面が表示されたらファビコンの自動生成の準備が始まるのでしばらく待つ。
下図のファビコン編集画面が表示されるので設定する。
３．ファビコン画像を調整する
この画面上でファビコン画像のパターンが選べたり、ファイルサイズが圧縮できる。すべてを細かく設定する必要はないので内容を絞って解説する。
３−１．Compression（画像を圧縮する）
ここではファビコンの画像サイズの圧縮設定を行う。最近のネット環境で数キロバイト程度のデータ転送量を節約する必要はないので、デフォルトのままで問題ない。
どうしても圧縮が必要なら” Expected compression rate: ◯% “のパーセントの数値を見ながら選択しよう。数値が多い程、圧縮率が高くなる。
３−２．Scaling algorithm（画像のパターンを選択する）
” Scaling algorithm “とは画像の拡大・縮小の表現方法という意味があるが、“ドット絵”という言葉の方がなじみがあるだろう。デフォルトのままをおススメするが、ここでは実際のプレビュー画像も見れるので、あまり難しく考えずに掲載したいファビコン画像を選ぶと良い。
その他はファビコン以外の設定になるので、興味がある方は目を通しておこう。
３−３．その他の設定方法
Favicon by RealFaviconGenerator ではファビコン画像を利用して、iPhone のアプリ画像とWindows 8 のスタート画面にピン留めする画像まで設定することができる。
まず” App name “では、iPohone や Windows 8 の PC 上でショートカットを保存する時の名前をブラウザのタイトルのままにするか、別の名前を設定するかが選べる。サイトタイトルが長いようなら短い名前を用意しておくと親切だ。
続いて画面上部の” Favicon for iOS “では、アプリ画像の拡大・縮小や背景色を設定することができる。画面左のプレビューを見ながら調整しよう。選択項目の一番下にある” Use a dedicated picture “とは、アプリ専用のオリジナル画像を設定したい時に使う。
次に” Favicon for Windows 8 “では、タイル画像の見映えが調整できる。左にあるプレビュー画面を見ながら調整してみよう。選択項目の一番下にある” Use a dedicated picture “とは、Windows 8 専用のオリジナル画像を設定したい時に使う。
Internet Explorer でサイトをスタート画面にピン留めできない場合、Internet Explorer が既存のブラウザに設定されていないのが原因だ。詳しくはマイクロソフトの公式にサイトにある「Internet Explorer を既定のブラウザーにする方法」を読んで設定しよう。
４．ファビコンを自動生成する
設定が完了したら「Generate you Favicons and HTML code（ファビコンを自動生成する）」ボタンをクリックする。
しばらくすると下図の画面に変わり、「Favicon installed!」と表示されたらファビコンの生成は完了だ。
画面中央に「Check you favicon」というボタンがあるが、iOS と Windows 8 に関する画像表示が問題ないかをチェックしたい方はこのツールを活用しよう。
以上がファビコンの設定方法だ。
中村様
初めまして。
ホームページを作るのが全くの初めてで、こちらのサイトの順番通りに
進めています。
一度で出来ず、何度かやり直しながらも大変助かってます。
ありがとうございます。
FAVICONについての質問ですが、最初にAの写真をアップしたのですが、
昨日Bの写真へ変更しました。
WordPressの外観→Faviconの画面上はBが出てますが、目に見えてるFaviconはAです。
また、iPhoneのホーム画面ではBで表示されてます。（Aのときは表示させてませんでした）
ネットで検索してみると、アップされるのに時間がかかる、と言われてるのも見ましたが、本当にこのままにしておいて自然と変わるのでしょうか。
何か手順を忘れてるのでしょうか。
ご回答いただけると助かります。
分かりづらい文章で申し訳ないです。宜しくお願い致します。
かわにしさま、コメントありがとうございます。
おそらくブラウザのキャッシュが原因のように思います。
「キャッシュ（インターネット一時ファイル）の削除方法」をご参考にお試しいただけますでしょうか。
ありがとうございます！
変わりました。
すばやい回答を本当にありがとうございます。
大変助かりました。
これから暑くなりますが、どうぞお元気でいらしてください。
解決して良かったです！
はじめまして。WordPress初心者です。
プラグインを使ってファビコンを設定したいと思い、ピンポイントの記事で助かってます。ありがとうございます！
手順どおりにやったつもりなのですが・・・WordPressの管理画面上ではファビコンがきちんと表示されるのに、なぜかブラウザでURLをたたいてもファビコンが表示されません。
キャッシュクリアしても、普段使ってないブラウザで開いてみてもNGで、ソースにファビコンの記述が追加されてないみたいです。
キャッシュ以外に何か原因が考えられるでしょうか・・・
初歩的なミスかもしれないので、申し訳ないのですが、もしお気づきのところがありましたらご教示ください。
よろしくお願いいたします。
よもぎさん、コメントありがとうございます。
考えられることとして、次のことが挙げられます。
・キャッシュ系のプラグイン（Head Cleaner、W3 Total Cacheなど）が有効になっている
・既存のプラグインとの干渉による不具合の可能性
もしキャッシュ系のプラグインが入っていましたら「無効」にする。
また、RealFaviconGeneratorをアンインストールして、再度インストールして試してみてはいかがでしょうか？
アンインストール後は念のためブラウザのキャッシュも真っさらにしてくださいね。
早速ありがとうございます。
他のプラグインとの干渉・・・というのは思いつきませんでした。
他のプラグインを一旦無効にしてみたり、再インストールも試したのですが・・・
状態は変わらず（ToT)
サーバーなどの問題かもしれませんので、もう少し調べてみます！
本当に早急に回答してくださり、ありがとうございました。
今後不具合があった際に参考にさせていただきます。
よもぎさん、ご返事ありがとうございます。
あと他に考えられることとして、個人の方が配布しているオリジナルテーマをお使いではありませんか？
テーマを変更しても解決しませんでしょうか。
（検証はローカル環境でお願いします）
また同様のケースで困っている方がいらっしゃるかもしれません。
差し支えなければ、テーマやレンタルサーバーなど情報を残していただけますと幸いです。
ご回答くださり、ありがとうございます！
まさに自分でオリジナルのテーマを作って使っていています。
既存のテーマを編集すればよかったのですが・・・色々設定がおかしくなっているのかもしれません。
・・・ですが、テーマをTwentyFifteenに変更してみましたが、ファビコンは変わりませんでした（ToT)
ロリポップのレンタルサーバーを借りて、別で独自ドメインを取得して設定しています。
もしかしてこの辺りの設定が原因でしょうか？
早速のご回答、ありがとうございます。
ファビコンの表示をローカル環境で試してみて、本サーバーで反映されない場合は本サーバーを疑います。
（私はX2サーバーを使用していますが、全く問題なく表示されます）
そのような状況の場合、私なら手動でファビコンを設定する方法に切り替えます。
どうしてもこのプラグインを使用してファビコンを表示したいなら、
現実的ではありませんが、WordPressをゼロからインストールし直して復元する方法もあります。
ちなみに、よもぎさんが本気でビジネスブログを行い、
将来100万PV以上のアクセスを目指すならロリポップなどの格安サーバーはお勧めしません。
理由は『WordPressに最適なおすすめサーバー』をお読みいただけますとご理解いただけるかと思います。
ありがとうございます。ロリポップはあまりビジネス向けではないのですね。
今は趣味レベルのブログなので、今回はプラグインはあきらめて手動で設定する方法で対応しました。今後本気で集客したいと思うようになったら早めにサーバーのお引越しを考えたいと思います。
最後まで丁寧にご回答くださり、本当にありがとうございました！
これからも記事を読んで勉強させていただきます。
いつも分かりやすい記事で助かっております！
参考になります！