WEBサイトのシンボルマーク:ファビコン(favicon)

ファビコン(favicon)とは、WEBサイトのシンボルマークです。
独自のファビコンを設定しておくと、サイトがとても目立ちます。
~ 目次 ~
- ファビコンとは?
- ファビコンの作成方法
ファビコンとは?
ブラウザに表示させると、タブの左端などに小さなマークが表示されるWEBサイトがあります。

この小さなマークがファビコン(favicon)です。
ブックマークにも表示されます。

ブックマークでカテゴリー別に複数のサイトをまとめてると、ファビコンがあるサイトは抜群に目立ちます。
ファビコンの作成方法
で、このファビコンの簡単な作成方法の解説です。
まずは、イラストレータでもフォトショでも何でもいいですが、サイトのシンボルになるようなマークを作成します。
ファビコンはとても小さく表示されるので、シンプルで見やすいマークにしてください。
ゴチャゴチャしたものだと、とても見づらくなります。
サンプルとして以下のようなマークを作成しました。

サイズは「16×16px」「32×32px」の2種類、画像形式はPNGフィルを用意します。
以下のサイトにて、このPNGファイルをICOファイルに変換します。
*半透過マルチアイコンfavicon.icoを作ろう!


アイコンダウンロードのボタンを押すと、「favicon.ico」というファイルがはき出されます。
これをサイトに実装します。
該当ページのheadタグ内に以下のコードを入れて、ファビコンファイルと共にサーバにアップします。
<link rel="shortcut icon" href="favicon.ico">
ファビコンが実装されました!

*サンプルページに実装しています。ご参照ください。
うまく表示されない方は、ブラウザを更新したり、キャッシュを削除してみてください。