favicon.icoについて (nni's blog)

デザインはへぼいですが、favicon.icoを作りましたのでその顛末でもメモしておきます。
ブログサービスを利用している場合はfavicon表示できるかわかりませんが...
　

favicon.icoというのは、タブブラウザを使ってる方ならわかると思うのですが、ブラウザのURL欄・タブ部分に表示されるアイコンのことです。IEの場合はお気に入り登録をしていると、URL欄の一番先頭にeマークの代わりに表示されます。
うちのOperaだとこんな感じです。左から　　ここ　　Google　　everything is goneさん　　・・・・・　と並んでます。

　
　
私が参考にしたのは以下の記事です。
・「お気に入り」アイコンを指定するには？
・favicon.icoの解説と注意
　
　
作った方法を参考までに。
　
1. 素材系のWeb pageから、素材を拾ってくる
2. グラフィックエディタなどで、必要な範囲を切り出すなどして適当に整形(サイズは気にしなくてよい)
3. FavIcon from Pics　こちらでfavicon.icoに変換
4. アイコン作成ツール(私は KH IconStudio)にて、修正など
　そのとき、このアイコンファイルには16x16と32x32の2種類があることに注意。通常は16x16側が表示されるので、そちらを直せばOKです。ただし、デスクトップにリンク貼り付け等をすると32x32が表示されるようなので、そちらも同様に修正したほうがよいですね。
　
　
　うちの16x16です。修正する時には　イメージ-パレット-最適化　をしてからやると楽。
　外枠の黄色と、nの文字が自分で直したとこです。

　
　
　32x32側も一応　めんどくさくてnの文字入れていません(爆

　
　
5. トップページにupload　うちはMovableTypeなので、index.phpがあるところと /archives においています。
　本当はカテゴリのサブディレクトリにも置くか、テンプレートhtml内に指定をするのがいいと思うのですが、カテゴリ表示はあんまりしないので無視しますｗ
　html内でfavicon.icoの場所を指定するには
　<link rel="SHORTCUT ICON" href="http://なんとか/favicon.ico">
　とすればよいので、ブログサービスを利用している場合、テンプレートがいじれればいけるかもしれません。(livedoor blogとか)
　
# 時間があればlivedoorでやってみます
　
　
(追記 9/17 00:25)
livedoor blogではできるみたいですね。exciteはたぶんダメっぽい。
ただし、自分のところに.icoファイルをuploadすることができないので、どこか外部のweb spaceにファイルを置く必要があります。
　
設定は、ブログの設定/管理から「ブログの説明」のところに
<link rel="SHORTCUT ICON" href="http://なんとか/favicon.ico">
と書けばOKです。
　
私のテストサイトで、表示されているのが確認できますのでどぞ　nni's blog livedoorテスト
　
　
(追記 9/17 01:26)
あすかろんさんからコメントいただいたので、FC2でやってみました。
問題なくできますねぇ。
なおかつ、.icoをuploadすることができるので、このblogサービス内だけで完結します。
1. ツール-ファイルアップロード　で favicon.ico をuploadします。
2. 「表示」というところからファイルのURLが取れるので、右クリ-ショートカットのコピーでURLを取ります。
3. プラグインの設定-プロフィールの「HTML編集」　最下行に以下のように追加
<link rel="SHORTCUT ICON" href="http://blog24.fc2.com/n/nnistar/file/favicon.ico">
　　(このアドレスは私の場合で、当然 2. で取ったURLを入れること)