ファビコン設定方法！無料作成ツールの上手な使い方

ファビコンとは、Favorite icon(フェイバリット・アイコン）の略で、ブラウザの「URL」「タブ」「お気に入り」に表示される、小さなアイコンのことです。

独自ファビコンを設定すると、ブックマークされた際に、オリジナルのアイコンが表示されるようになります。

また、デスクトップ上でのショートカットアイコンや、Windows7＋IE9の機能でピン留めアイコン「24px × 24px」としても使われます。

上記のようにタブメニューの先頭にファビコンが表示されます。ウェブサイトの識別に非常に役立ちます。

ブックマーク（お気に入り）内にファビコンがあると無いとでは存在感が違いますよね。

作成ファビコンサイズについて

ファビコンは、基本的には「16px × 16px」で作成すれば問題ありません。

デスクトップのショートカットに利用されることを意識する方は、「32px × 32px」のファビコンも作っておいてもいいでしょう。

なお、ファビコンは複数サイズのアイコンを1ファイルに収められる「ICO」形式で作成するので、「16px × 16px」「32px × 32px」の二つを設定可能です。

favicon画像は「GIF」「PNG」でも表示可能ですが、マルチアイコンにも出来る「ICO」形式を利用するのが一般的です。

ファビコン作成専用ツールで画像を作成します。作成した画像は、「ICO」と「GIF」「PNG」のどちらかで保存しておきましょう。※正方形で作成します。

ファビコンにしたい画像を「参照」→「upload image」することによって簡単に「16px × 16px」のファビコンを作成できます。※加工も可能。

「16px × 16px」、「32px × 32px」、「48px × 48px」の3種類のファビコンを作成できます。※加工不可。

作成したファビコンファイル（favicon.ico）をサーバー上のルートフォルダ（最上位のディレクトリ）にアップロードします。※任意のディレクトリにアップロードしても構いませんが、基本はルートフォルダに設置しましょう。

ファイルをhttp://ドメイン名/favicon.ico のURLでアクセスできる位置にアップロード。

ルートファルダにファイルを置いた場合は、HTML側に何も記述しなくても、ファビコンが表示できます。

HTMLの<head>～</head>内に、link要素を記述することで、ルートファルダ以外の、任意の位置にあるファビコンも認識可能です。※ページ毎に別のファビコンを指定することも可能です。

<head>
<title>ホームページのタイトル</title>
<link rel="shortcut icon" href="favicon.ico">
</head>

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />