1.ファビコン（favicon）って何？

こんにちはleonです。

よく他の方のサイトを見ていてURLの左側にロゴが表示されていることがありますよね。

このロゴはファビコンという名称で、URLの左側に表示されるだけではなく、お気に入り登録した際にもサイトの左側にロゴ表示されるのでサイトのオリジナリティを主張してくれる便利なアイコンです。

今回は当サイトでもファビコンを表示させてみようと思います。

このファビコンの設置にはプラグイン『Favicon Rotator』を使えば簡単にセッティングが可能です。

2.ファビコンのロゴはicoファイルへ変更が必要

ロゴは当サイトの名前にもなっている『Active 4』の『４』をモチーフに事前に作成しておいたのですがjpgやgifファイルのままではファビコンの登録ができません。

icoという聞き慣れないファイルへ変換しないといけないのですが、変更方法をネットで探すとicoファイルへ変換してくれる便利サイトがありました。

それがこちら　↓

favicon.icoを作ろう！

サイトに行くと『ファイルを選択』アイコンがありますので、準備したロゴファイルを選択します。

『favicon作成』をクリックすると画面の右側に実際のプレビューが表示されなす。

作成されたファビコンが問題ないようなら『ダウンロード』をクリックしてください。

icoファイルが作成されました。

3.Favicon RotatorでicoファイルをWordPressへ登録する。

Favicon RotatorはWordPressのプラグインより検索をかけると表示されますのでインストールをしておきましょう。

インストール方法がわからない方は下記の記事の『1.WordPressのプラグインのインストール方法と有効化』を参照してみてください。

【参考記事】

[0052] Google AnalyticsでWordPressのサイトを簡単にトラッキング設定する方法

インストール後は『外観メニュ』の中に『Favicon』が追加されていますので選択してください。

『Add Icon』をクリックするとicoファイルを選択する画面が開きます。

『ファイルを選択』をクリックします。

作成したファビコンが追加されますので『Add Browser Icon』をクリックします。

『変更を保存』をクリック。

サイトを表示してみるとurlの左側にファビコンが設置されました。

leonはこう思った。ファビコンの元になるアイコンをデザインするのは難しい。

今回、ファビコンを設置する為に元になるアイコン作成に時間がかかりました。

オリジナリティーのあるファビコンにしようと複雑な模様のアイコンを作成したのですが、いざicoファイルへ変換してみると小さ過ぎて潰れたファビコンが出来上がってしまうことも何回もありました。

結果的にはシンプルにブログ名から『４』という数字をモチーフにしました。

他の方から見れば、たいした事の無いファビコンかもしれませんが個人的には気に入っています。

アイコン作成とは逆にファビコン自体の設置はプラグインを使うことによって本当に数分でできたので、拍子抜けしてしまいました。

こんなに簡単に設置できるなら、もっと早くからやっておけば良かったです。

『自分のサイトにもファビコンを作成したい』だけど、設置方法がわからない人の助けになれば幸いです。