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

  • 〒824-0001
  • 福岡県行橋市行事5丁目3−20
  • TEL : 0930-55-2416

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">

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

ファビコン実装画像

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

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