WEB上で見かける、ハイセンスなアイツ。

 

そう、通称「ファビコン」。彼がいると、一気にサイトイメージや信頼感が高まります。
彼は、ブックマークに登録された時にも、その姿を現します。

 

 

彼がいないと、、、

 

 

、、、ちょっと残念です。

 

でも、待っていても、彼はやってきてはくれません。
誠実な日々を送っていても、神様がご褒美に連れて来てはくれません。
Google先生がいつか連れてきてくれるわけでもありません。
じゃあ、どうしたら”彼”はやってきてくれるのでしょうか？
簡単なことです。自分で連れてくればいいのです。

『でも、どうやって？』

そう、”彼” すなわち『ファビコンを設定しよう！』と思いたって調べてみると、表示させたいデバイスごとに、それぞれうまく表示させる設定が必要だということを知り、大きな壁を感じてしまうのです。

人によって使用しているデバイスは様々。
いろいろな対策をしないといけないように思えますが、「世界のWordPress」さんには、今や解決方法は存在するものです。

 

今回はWordPressプラグイン【RealFaviconGenerator】を使って、これらデバイスごとのファビコン表示を簡単に設定する方法をお伝えします。

このプラグインでは実際にどのように表示されるのかプレビューを確認しながら、一度にまとめて設定できるので、ぜひ取り入れてください。

 

注）新しいプラグインをインストールするなど、何か変更を加える前には、現状のサイトバックアップをしておくことを強くおすすめします。

バックアップの必要性と方法はこちら 

 

では、ファビコン設定を始めましょう！

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

まずは、ファビコンにしたい画像を用意します。
気をつけたいのが、ここでは「背景を透明にした画像」を用意してください。

 

ファイルの拡張子は「.png」や「.gif」。
例えば「.jpg」では、背景に色を入れていないつもりでも、白い背景がついて保存されてしまっています。

 

ピンと来ない方のために例を挙げましょう。
下記2つの画像は一見、両方とも背景が白い画像に見えますね。

 拡張子png／jpg

これらを右クリック→「名前を付けて画像を保存」をしてみると、違いが分かります。
（Windows環境での操作方法です）
壁紙が白色じゃないデスクトップに並べてみると、、！

 

 

左が「.png」、右が「.jpg」です。違いが分かりましたね！
WEB上では、「.png」画像の後ろにある白い背景が透けて見えるから、同じように見えていたわけです。

 

今回はこのように背景を透明に出来る「.png」または「.gif」画像を使用します。
画像は正方形にして、サイズは横×縦を「260px × 260px」以上にして書き出して下さい。

 

私はPhotoshopを使用していますが、背景を透明にして「.png」や「.gif」形式で保存するだけの用途であれば、フリーソフトもたくさんあるようなので探してみてください。

画像の用意が出来れば、あとの設定は簡単です。

 

RealFaviconGeneratorの設定

まずプラグインをインストールします。
管理画面「プラグイン」→「新規追加」で『Favicon by RealFaviconGenerator』で検索するとヒットするので、作者が「Philippe Bernard」であることを確認してインストール・有効化します。

 

 

すると左カラム「外観」の中に「Favicon」の項目が現れるので選択。

 

 

「Select from the Media Library」をクリックし、用意した画像をアップロード。
最後に「Generate favicon」をクリックすると、画面が切り替わり、読み込みが始まります。

 

 

 

 

その後現れる画面で、プレビューを見ながら設定していきます。

 

Favicon for iOS – Web Clip

ここでは、iPhoneやiPadなどのiOSデバイスで、ホーム画面にブックマークを追加したときの表示を設定します。デフォルトのままだと、画像の背景が透明なので、真っ黒になっています。

 

 

ここから、

（1）下のラジオボタンを選択

（2）背景色を設定

※参照→HTMLカラーコード
ページ下部の「HTMLカラーピッカー」で色を選択し、「#○○○○○○」をコピーして使用してください。

（3）スライダーを動かして、外枠からの画像までの余白を設定

 

 

いい感じになりました！

 

Favicon for Android Chrome

Android OSデバイスで、ホーム画面にブックマークを追加したときの表示を設定します。
こちらもデフォルトのままだとアイコンのデザインがよく見えません。

 

 

iOS同様に設定していきます。

 

（1）下のラジオボタンを選択

（2）背景色を設定

（3）スライダーを動かして、外枠からの画像までの余白を設定

（4）アイコンの下に表示されるタイトルを設定

 

 

 

（5）「Switcher」ボタンを押して、

（6）タスク切替え時のタイトルバーの色を設定

 

 

Androidデバイス用にも、同じようなアイコンを設定できました！

 

Favicon for Windows 8 – Tile

こちらもデフォルトのままだと、、、

 

 

うーん、デザインがイマイチ。
背景色を変えてみます。

 

 

うん、これでもいいんですが、せっかくなので、、、

 

 

こうしてみました。
下のラジオボタンを選択すると、画像が白に反転します。

 

Favicon Generator Options

ここでは、圧縮設定などを変更できるのですが、基本的にそのままでOK。
一番右側にある「App name」だけ、設定しておきましょう。
タブを選択し、下のラジオボタンを選択。タイトルを設定します。

 

 

ここで入力したタイトルが、

「iOSで、ホーム画面にブックマークが追加された時のタイトル表示」と、

「Windows 8で、タイルにブックマークが作成された時のタイトル表示」になります。

（Androidは先ほど個別に設定したものが使われるようです）

 

上のラジオボタンを選択した場合は、サイトタイトルがそのまま表示されます。
サイトタイトルが短く、アイコンの下に綺麗に収まりそうであれば、変更の必要はありません。

 

最後に一番下の「Generate your Favicons and HTML code」をクリックすると、処理画面に切り替わります。

 

 

処理が終わると自動的に管理画面に戻ってきます。
完成したそれぞれのデバイス表示を確認することが出来ます。

 

 クリックで拡大

 

いいかんじです！変更したい場合は、もう一度「Select from the Media Library」から同様の手順で差し替えが可能です。

 

今開いているブラウザでの表示も切り替わっていることが確認できます。

 

 

スマートフォンなど、手持ちの他のデバイスでも確認しておくと安心ですね。

以上です。お疲れ様でした！