アイコン（ファビコン）を指定してブラウザのアドレスバーなどに表示させる方法

はじめに

自分のサイトにアイコンを表示させたいと思ったことはありませんか？

実はあのブラウザのアドレスバーなどに小さく表示されるアイコンのことをファビコン（Favicon）といいます。

今回はファビコンをHTMLで指定して自身のサイトのブラウザのアドレスバーなどに表示させる方法をご紹介いたします。

記述はたった一文で簡単です。

headタグ内に

<link rel="icon" type="image/vnd.microsoft.icon" href="自身が作成したアイコンのURL">

link要素で指定するだけでいいのです。

typeには.ico形式であるimage/vnd.microsoft.iconの他に、

.gif形式であるimage/gif、.png形式であるimage/pngを使用することができます。

ファビコンで使用する画像は、.ico形式で作成するのが一般的ですが、近年では.gif形式、.png形式に対応したブラウザも増えてきているようです。

その他このlink要素に使用できる属性にアイコンのサイズを調整するsizes属性がありますが、詳しくはこちらの参考サイトもご覧になってください。