favicon(ファビコン)の作り方

あけましておめでとうございます。
明けてから結構経っちゃいましたが、本年もアドテクニカをよろしくお願いします。

新年になって、アドテクニカのホームページにfaviconを付けました。
ブラウザのアドレス欄の左側にくっついてるアイコンです。


今回はその作り方から設置方法までをご紹介。

1.まずは、アイコンとなる画像を作成します。

サイズは横16px × 縦16px 。　（32×32とかでも良いですが、16が無難）

保存形式はicoファイル形式です。gifやjpgではダメ！


2.作成し終わったら、サイトのルートにicoファイル置きましょう。

サイトのルート以外に置くとIEで表示されなかったりするらしいです。（未確認）


3.htmlファイルのHEAD要素内に、

<link rel="shortcut icon" href="あなたのサイトURL/favicon.ico" />

と記述。


4.htmlファイルと、作成したicoファイルをアップロード。


と、以上でfaviconの設置完了です。簡単でしょ。


注意点
・icoファイルは、Windows icon形式で無ければIEが表示してくれない。@icon変換とか使えば良いみたい。
・設置してもIEで表示されない。　IEのキャッシュファイルと、履歴も消しましょう。あとはお気に入りに入れてみたり
　お気に入りからアクセスしてみたり。そうしてればそのうち出るようになります。


番外編
アイコン作るのがめんどくさいって人は下記のサービスを使えば画像からアイコンファイルを簡単に作成できます。
しかもicoファイル形式で書き出してくれちゃったりします。
便利な世の中ですね。インターネットって素晴らしいなぁ。

Favicon Japan!
日本語です。

FavIcon from Pics
英語です。

FavIcon Generator
英語です。32pxと48pxのも作れます。
ってことはつまりfavicon用じゃなくてパソコン用のアイコンファイルが自動で作れちゃうってことか。

favicon.cc
ドット絵で1pxずつ描きたい人はこちら。英語です。



そういえば、Googleのfaviconも今年に入ってから変わりましたね。
前の方が好きでしたけど。