今でこそ一般的になってきたFavicon(ファビコン)ですが、意外と設置していないサイトも多く見かけます。
ファビコンを設置するだけですごく見栄えが良くなるので、まだ設置していない人は今すぐやってみましょう。

ファビコンって何？

Webブラウザを開いている時に、複数のタブを使ってサイトを閲覧しませんか？調べものをしている時なんかは、タブでいっぱいになってしまったりしますよね。
そのタブに設置されたアイコンの事をファビコンと言います。

早速ファビコンを作成してみる

現在、推奨されている画像サイズは沢山あるのですが、48x48px、32x32px、16x16pxの3つで十分なんじゃないかと思っています。
全部の端末に合わせて作成したら20個以上とかになってしまうようですので、今回はシンプルに3つで作成します。

PNG画像を用意します

まずは上記3つの画像を用意しましょう。jpgやgifなどにも対応しているコンバーターが多いのですが、PNGが一番劣化しにくくていいんじゃないかと思います。

ファビコン作成ツールを使用する

以下のURLでファビコンを作成します。
16×16用画像ファイルを選択、32×32用画像ファイルを選択、48×48用画像ファイルを選択、から先ほど作成した画像をアップロードします。
最後にfavicon.ico作成ボタンを押します。※faviconの拡張子は「ico」になります。

https://ao-system.net/favicon/

こちらでfavicon.icoファイルの準備ができました。

ファビコンをサーバーにアップロードする

先ほど作成したfavicon.icoファイルを任意の場所にアップロードしましょう。
私はfaviconファイルはルートに置くことがおおいので、サーバーのルートにfaciconをアップロードします。

ファビコンの設置方法

ヘッダー内（～）に、faviconの位置を指定します。
私はルートにfaviconを置いたので、ルートで指定してみます。

html

IE用やらAndroid用やら色々書き方があるようですが、基本的には上述で問題ないでしょう。
※IE,Firefox,Chrome,Android端末で確認済み

それではタブを確認してみましょう。

上記の設定が終わったら実際にブラウザで確認してみましょう。
このようにタブの中にアイコンが入っていたらOKです。

faviconの設置方法　まとめ

いかがだったでしょうか？思った以上に簡単じゃなかったですか？そうなんです。faviconの設置なんてすごく簡単なんです。
まだ設置をしてない人はお早目に設置しましょう。