当webページを製作中、上のタブのマークが気になりだしたのですが、はて？どうやって変更すればよいのか？？
という事で早速調べてみたのですが、答えに行きつくまでにめちゃ時間かかったので！！備忘録に取っておくことにしました。

何も設定していない時はこんな感じで地球の表示だったので、これを自分のアイコンにしたいと考えました。
ひとまず、名称が分からないので「webページの上のタブのところにロゴを表示する方法は？」で検索してみました。
すると、ヘッダーにロゴを表示する方法が出てきますが、なかなか欲しい情報をヒットできません・・・。
違うのよ～！タブのところのアイコンなん！どうやって検索すれば出てくるんだろうか～と右往左往して、やっと名称が判明しました・・・！「ファビコン」というようです。

ファビコンとは、「favorite icon（フェイバリット　アイコン）」の略称とのことです。
・・・う～ん、知らないと出てきませんね。

画像を用意して、拡張子を「.ico」にするとファビコンとして利用できます。
※.pngとかでもブラウザによっては対応しているそうですが、ここは手堅く.icoにすべきですね。
ファイル名は「favicon.ico」にしてしまった方が分かりやすそうです。

画像サイズは「16px × 16px」で、めっちゃ小さいです。
手持ちのpng等をファビコンサイズに変換してくれる画像編集ツールがwebにありますので、そちらを利用すると簡単です。
という訳で、しずくのイラストをファビコンに変換しました。

ちっちゃい！視認性悪いですね！こう考えると、ロゴやアイコンははっきりした色味で作成すると良いのだと感じました。

ファビコンは、サーバ内に「favicon.ico」を保存しておくと、データ読み込み時にファビコンとして認識してくれるそうです。便利ですね、どうなっているのでしょうか！？
HTMLファイルに記載しておくとより確実という話なので、何かあっても良いように書いておくことにしました。

<link rel="shortcut icon" href="/images/favicon.ico">

上記が当webページに入力したコードになります。rel属性に「shortcut icon」を指定、href属性にファイルの在処を指定します。このコードはheadタグ内に記載します。

タブのアイコンが変更できました！