スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



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

ファビコン(favicon)とは、WEBサイトのシンボルマークです。
独自のファビコンを設定しておくと、サイトがとても目立ちます。

~ 目次 ~

  1. ファビコンとは?
  2. ファビコンの作成方法

ファビコンとは?

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

ブラウザのタブにファビコンが表示

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

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

ブックマークにファビコンが表示

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

ファビコンの作成方法

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

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

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

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

試製ファビコン
*文字はファビコンの「ファ(Fa)」で、背景は透明にしています。

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

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

ファビコン作成手順1
ファビコン作成手順2

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

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

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

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

ファビコン実装画像

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

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