山田どうそんです。
ファビコン画像は普通、「.icon」という拡張子でファビコン画像として作成する必要があります。
でも、Favicon by RealFaviconGeneratorを使えば普通の画像をファビコン画像として作成して自分のサイトにファビコンを設定してくれます。
さらに、このプラグインは、一度にiOSやAndroid、Windows8や10用のアイコンとしても生成してくれますのでファビコンを設定する人はこちらのプラグインを利用するといいでしょう。
プラグインの特徴
- ファビコン画像を生成して自分のサイトにファビコンを設置できる
- iOS、Android、Windows8や10などその他いろいろなデバイス用のファビコンを一度に生成してくれる
- ファビコンの細かい設定ができる
- ファビコンの画像圧縮ができる
プラグインのダウンロード
プラグインのダウンロードは下記のリンク先からもできますしWordPress内で「Favicon by RealFaviconGenerator」と検索してもダウンロードが可能です。現在のバージョンは「1.3.8」。
[appbox wordpress favicon-by-realfavicongenerator]プラグインの使い方
管理画面の場所
「外観」＞「Favicon」から設定ができます。
プラグインの設定
ファビコンは、ブラウザのタブの横に表示されるアイコンです。
インディクラウドの横に「iC」という画像がありますよね。これのことです。
自分のサイトをブランディングしたいのであれば、必ず設定しておきたいのがファビコンです。
「Favicon」をクリックすると次のような画面が表示されます。
最低でも、70×70px以上。推奨は、260×260pxの画像を用意してアップロードします。
「Select from the Media Library」をクリックしてファビコンに設定したい画像をアップロードします。
ここで注意したいのは、なるべく背景を透過処理したPNG形式の画像にしたほうがいいということです。
じゃないと、背景が白くなって透明のアイコンとして表示されなくなります。
画像をアップロードして「Generate favicon」をクリックしてください。
すると、次のようにiOSでの表示やAndroidでの表示などをチェックすることができ、調整することができます。
画像の調整をする
一部主要な部分の調整についてだけ解説します。
一番下にある「Favicon Generator Options」で画像の圧縮などが可能です。
「Compression」画像の圧縮
こちらを選択すると画像を何％圧縮するか選択することができます。数値が高いほど圧縮率が高くなります。
「Scaling algorithm」ドット画像の選択
こちらで、ドット画像の表示形式を選択できます。なるべくデフォルト設定にしておくのがいいでしょう。
Favicon for Android CromeのApp nameを忘れずに設定する
次の赤枠の部分、「App name」を空欄にしているとファビコンが生成されないので、忘れずに名前をつけるようにしましょう。
自動生成する
その他にも細かい設定があるので、後は任意でお好みの設定をしてください。
設定が完了したら画面一番下にある「Generate your Favicons and HTML code」をクリックします。
すると、次のようにファビコンが設定されます。
使ってみた感想のまとめ
ブラウザ用のファビコンをただ設定したいという人は、他にもいろいろなプラグインがありますが、同時にiOSやAndroid用も生成してくれるので、ファビコンのプラグインとしてはこのプラグインが一番おすすめです。
どんなふうに表示されるかを確認しながら設定ができるのがいいですね。
