ファビコン（Favicon）の作成方法

ファビコン（favicon）とは、ブラウザーなどで「お気に入り」の登録した際に表示されたり、ブラウザーのタブの部分に表示される16×16 の小さなアイコンのことです。
　
ただの小さなアイコンと軽く考えては行いません。
このファビコンを設定しておくことで得られるメリットがたくさんあります。
　　
ここでは、そんなファビコンのメリットや作成・設定方法などを整理させて頂きます。
　

（１）ファビコンの表示例

ファビコンを設定しておくと、ブラウザーなどで下記のように表示されます。
　
img_favicon01
　

（２）ファビコンを設定するメリット

上記のようにファビコンが表示されることにより、いろいろな効果が得られます！
　
その一例は下記のようなものが上げられます。

ロゴなどを覚えてもらいやすくなる。
再来訪してもらいやすくなる。
しっかりしたサイトとして認識される。
ブランディングができる。
売上がアップする！（かもしれない）

（３）ファビコン作成方法

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

当然ですが、ファビコンとして表示させたい画像を作成する必要があります。
その画像の作成時の注意点は、、、「正方形」で作成すること
画像ファイルであればOK！「PNG , GIF , JPG」の形式で作成しましょう^^

2. ファイル形式を変換する

ファビコンファイル（.ico）ファイルへの変換は、Photoshop（Photoshop）などのソフトを持っていれば、機能を追加するとできる方法もありますが、Photoshop（フォトショップ）を持っていない人も多いかと思いますので、持ってなくても作成できる方法を紹介致します。
　
その方法は、変換サイトを利用する方法で、下記のサイトが便利です。

http://ao-system.net/favicon/
　
ファイル名は任意の名称で問題ないですが、私の場合は「favicon.ico」などで作成するようにしています。

3. ファビコンファイルをアップロードする

上記サイトで作成し、ダウンロードしたファビコンのファイルを、サーバ上にアップロードします。
サーバ上のどの位置にアップロードするかは、ご自身で管理しやすい場所で良いかと思いますが、私の場合はトップページと同じ階層にまたは「img」フォルダなどを作成してそこにアップするようにしています。
　

4. タグの設定

ファビコンを表示させたいページのタグ内に、下記の様なタグを設置する必要があります。

<link rel="shortcut icon" href="「favicon.ico」ファイルへのパス">

※「favicon.ico」ファイルへのパスは、絶対パスでも相対パスでも問題ありません。