STINGER5でファビコンを設定する方法　プラグインを使わない

ワードプレスで当サイトを作った際に
使用されていただいたテンプレートは

こちらのサイトで配布されています。

http://wp-fun.com/

STINGER5　というテーマです。

このSTINGER　シリーズは３から私も利用されていただいて
非常に使いやすく、検索エンジンにも強いワードプレスのテーマなのですが、

一つ気になっていたのが、
この部分！

いわゆる　ファビコン　という

サイトのロゴマーク的な部分です。

楽天　や　amazon　でいうならこれです。

このファビコンが、STINGER　の場合には、
制作者側で設定したロゴがすでに導入されているために、

他と差別化ができなく

やはりブックマークなどした際にも
このファビコンのアイコンですぐにサイトを判断できる
といったメリットもありますし

このファビコンを設定するだけで、
アクセスが伸びるという実際の検証結果もあるようですので、

今回、独自アイコンを設定してみることにしました。

ファビコンを作成する方法

まず、ファビコンの画像を作成します。

ファビコンは、16px×16px　と非常に小さいアイコンですので、

一般的な画像作成ソフトを使っても良いのですが、

見え方などがぼやけてしまう場合もありますので、

今回はファビコンを作成できるサイトを利用して作成してみました。

http://ww-vision.com/fav/

作成方法は、サイトを見ればすぐにわかりますが、

カラーパレットで色を決めて、

あとはグリッドごとにクリックして
色を変更するだけです。

作成しましたら、右下の

completed の部分をクリックしますと

下図のように、作成したファビコンファイルと
ダウンロードする　というボタンが出てきますので

クリックしますと、ダウンロードできます。

この時点で、右上のＵＲＬバーのところに
今作成したファビコンアイコンの表示されていますので

これを参考に一度ダウンロードした後でも
変更も可能ですので

納得がいくまで作成されてみてください。

STINGER5にファビコン設定する方法

ワードプレスにファビコンを設定するには、
プラグインを利用する方法もありますが、

極力余計なプラグインを入れない方が、
表示速度の遅れの防止にもなりますので、

今回はプラグインは使わない方法で行ってみます。

STINGER5で作成した当サイトのソースを見てみますと
以下の表記がありました。

(link rel=”shortcut icon” href=”http://siawase-no1.net/wp-content/themes/stinger5ver20141227/images/logo.ico” /)
つまり、この部分に現在表示されているファビコンが保存されているということです。

ですので、先ほど作成したファビコンの画像と

現在保存されている画像を上書きして入れ替えたいと思います。

そこでまず、先ほど作成したファビコン画像のネームが

favicon.ico

となっていますので、

そちらを

現在の設定に合わせて、

logo.ico

に名前を変更します。

次に、FFFTPなどのWEB上へアップロードできるソフトを使用して

ワードプレスが導入されているドメインから

wp-content　⇒　themes　⇒　stinger5ver20141227　⇒　images

と開いていくと

imagesフォルダ内に、logo.ico

というアイコンの画像が入っていますので、

そこで、先ほど、リネームした

作成したファビコンのアイコンを上書きアップロードします

これで設定は終わりです。

設定を完了しましたら、

サイトをF5キーなどを使って更新すると

このように作ったアイコンにファビコンが変更されました。

まとめ

ファビコンはちょっとした設定ですが、

最初にも書かせていただいたように

こんな簡単な設定をするだけで、
サイトの印象度が上がり

アクセスアップにもつながるのであれば

やらない手はないと思いますので、

ご参考にされてみてください。

スポンサードリンク