タブにアイコンをつけよう!簡単にできるfavicon作成と設置の仕方

 

こんにちは、ジュンペイです。

「タブにアイコンを表示させるのってどうやるんやろ?」
そう思ってやってみると簡単すぎて驚きました!

 

色々なサイトでアイコンが使われているので、
それを見て自分のブログでもやってみたいと思いますよね。

今回はFavicon RotatorというWPプラグインを使って、
タブにアイコンを表示させます。

このアイコンはファビコンというもので、
通常の画像とは形式が異なります。

なので、表示させる画像を専用の形式に変えて表示させる必要があります。

と言っても、やってみると思ったより簡単で、
すぐにできるので、これからその手順を詳しく解説していきますね。

 

ファビコン画像の作成

では、初めにファビコン画像を作成していきます。

画像にはいくつかサイズがありますが、
ちゃんと表示させる為にも、
32×32でファビコン画像を作成していきます。

※表示させる画像はPNG , GIF , JPG(JPEG)などの形式で、
あらかじめ用意しておく必要があります。

今回はこちらの画像を使います。

 

 

ではこの画像をファビコン形式の画像に変換します。

形式変換する場合、
ファビコンを生成する事が出来る「favion.icoを作ろう」というサイトがありますので、
そちらで形式変換していきます。

こちらから       ↓

 

続いて、サイトに行くと「ファイルを選択」から表示させる画像を選択します。
この時、画像のサイズは32×32にしておきましょう。

 

では、画像がどのように表示されるかプレビューで確認出来たら、
「ダウンロード」をクリックして保存しましょう。
※保存先には「favicon.ico」と言う名前で保存されます。

ダウンロードが出来たら、
次はWPプラグインFavicon Rotatorをインストールしていきます。

Favicon Rotatorプラグインのインストール

ではまずWPのプラグイン検索で、
Favicon Rotatorを検索してください。

 

 

インストールが完了したら→「有効化」をクリックし、
「外観」「Favicon」

そしたら「Browser Icon」「Add Icon」をクリックします。

「ファイルを選択」から画像を選択していきます。

同じように、「Touch Icon」でも画像を選択していきます。

アップロードが完了したら、「変更を保存」をクリックします。

 

 

 

 

変更を保存して、確認してみると、
このようにちゃんとタブにファビコンが表示されるようになります。

 

これで、タブにアイコン(ファビコン)を表示させることができました。
変わる部分としては小さいですが、
これが意外と効果あるんですよね。

やっぱり、ネットをつかって色々なページを見る時って、
タブでサイトを認識したり、
逆に登録しておいた数ある中からサイトを選ぶ時も分かりやすくて良いです。

それに、他とのサイトと比べるときにも差別化になるので、
覚えてもらいやすくなる可能性もあります。

なので、オリジナルのアイコンを作って、
表示させましょう!

 

では「タブにアイコンをつけよう!簡単にできるfavicon作成と設置の仕方」についでした。

このエントリーをはてなブックマークに追加


コメントを残す