RealFaviconGeneratorでWordPressにファビコンを設定する方法

ファビコンとは、サイトにアクセスすると下図のようにブラウザ上に表示されるアイコン画像のことだ。ファビコンがあると、ないものに比べて目に留まりやすい。また、どの大手企業サイトにもファビコンがあるように、信頼性の高いサイトという印象をユーザーに与える。

ここでは「Favicon by RealFaviconGenerator」というプラグインを使ったファビコン設定を紹介する。このプラグインは、従来のファビコン設定の手間を省き、さらに iPhone や Windows 8 のアイコン画像まで設定できる。

プラグインの画面はすべて英語だが、図の通りに進めるだけで設定できるので安心してほしい。

また FTP ソフトを使用して手動でファビコンを設置する方法もあるが、初心者の方もすぐに設置できる方法を解説するため、ここでは割愛する。

１．ファビコン画像を用意する

ファビコンの表示は冒頭で紹介したようにブラウザ上に縮小されて表示される。文字や細かいイラストだと表示がつぶれてしまうので、ブログのイメージに合わせたシンプルなイラスト画像を用意しておこう。

また画像サイズはプラグインが推奨する 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 専用のオリジナル画像を設定したい時に使う。

４．ファビコンを自動生成する

設定が完了したら「Generate you Favicons and HTML code（ファビコンを自動生成する）」ボタンをクリックする。

しばらくすると下図の画面に変わり、「Favicon installed!」と表示されたらファビコンの生成は完了だ。

画面中央に「Check you favicon」というボタンがあるが、iOS と Windows 8 に関する画像表示が問題ないかをチェックしたい方はこのツールを活用しよう。

以上がファビコンの設定方法だ。

wordpress プラグインをより深く理解したい方へ。バズ部のノウハウを全て詰め込みました。