WEBサイトのシンボルマーク：ファビコン（favicon）

ファビコンとは？

ブラウザに表示させると、タブの左端などに小さなマークが表示されるWEBサイトがあります。

この小さなマークがファビコン（favicon）です。

ブックマークにも表示されます。

ブックマークでカテゴリー別に複数のサイトをまとめてると、ファビコンがあるサイトは抜群に目立ちます。

ファビコンの作成方法

で、このファビコンの簡単な作成方法の解説です。

まずは、イラストレータでもフォトショでも何でもいいですが、サイトのシンボルになるようなマークを作成します。

ファビコンはとても小さく表示されるので、シンプルで見やすいマークにしてください。
ゴチャゴチャしたものだと、とても見づらくなります。

サンプルとして以下のようなマークを作成しました。

サイズは「16×16px」「32×32px」の２種類、画像形式はPNGフィルを用意します。

以下のサイトにて、このPNGファイルをICOファイルに変換します。
＊半透過マルチアイコンfavicon.icoを作ろう!

アイコンダウンロードのボタンを押すと、「favicon.ico」というファイルがはき出されます。
これをサイトに実装します。

該当ページのheadタグ内に以下のコードを入れて、ファビコンファイルと共にサーバにアップします。

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

ファビコンが実装されました！

＊サンプルページに実装しています。ご参照ください。

うまく表示されない方は、ブラウザを更新したり、キャッシュを削除してみてください。