お気に入りのアイコン：favicon

ブラウザのお気に入り(ブックマーク)の中には、サイト名の前に他のサイトとは違うアイコンが表示されていることがあります。
あなたのお気に入りにもきっと一つくらいあるんじゃないでしょうか？

実は、このアイコンのことをfaviconと呼びます。（※fabiconではありません！）
favorite iconつまりfaviconです。これを自サイト内に設置しておけば、お気に入りに追加したときに表示されます。

また、このアイコンは上のディレクトリに設置しておけば、下のページをお気に入りに追加したときにも適用されます。
試しに、このページをお気に入りにいれてみてください。

chotokkyu.comのＣをあしらったアイコンが表示されたと思います。
それでは、このfaviconの作り方を見ていきましょう。

favicon作成方法

まずfaviconの元になる画像を画像エディタなどを使って作ります。最終的には16×16ドットになるので、正方形、できれば256×256などで作成しておいた方がよいでしょう。

画像作成ツールはフォトショップなどのソフトでもよいですが、フリーソフトでも多くあります。『フリー　画像エディタ』などで検索してみてください。ちなみに私は、JTRIMという画像編集ソフトをよく使っていますが、画像編集向けなので絵を書くには不向きです。これを機に自分のお気に入り画像作成ツールを探してくださいね。

ここでは、とにかく正方形の画像を作ってください！

できましたか？それでは、次にその画像をfaviconに変換します。簡単に変換をしてくれるサイトがあります。
http://www.chami.com/html-kit/services/favicon/
こちらのページで今作った画像をアップロードすれば、favicon変換したデータの入った圧縮ファイルがダウンロードできます。

それを解凍すると、favicon.icoが出てくると思います。.icoはアイコンの拡張子です。
このfavicon.icoをサーバーにアップします。できれば、一番上のディレクトリにアップしてください。そうしておけば、下のページでもアイコンが適用されるんでしたね。

さて、サーバーにアップしておくだけでも読み取ってくれる場合もありますが、確実にブラウザに認識させるために次のような一文をとの間に入れておいてください。
<link rel="shortcut icon" href="favicon.icoまでのパス">

以上であなたのサイトのfaviconの設置が完了しました！
これでお気に入りの中で際立って見えるので、あなたのサイトが見つけやすくなりますよ。