Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。

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

family_computer

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

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

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

タブ表示

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

お気に入り内の表示

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

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

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

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

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

利用ファイル形式

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

ファビコン用の画像を作成する

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

DeGraeve.com

DeGraeve.com

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

favicon.icoを作ろう!

favicon.ico作成ソフト

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

WordPressでのタグ設定方法

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