favicon.icoについて

デザインはへぼいですが、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内に指定をするのがいいと思うのですが、カテゴリ表示はあんまりしないので無視しますw
 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を入れること)

Track Back [1]

Track Back URL

4n2nジャンクsがチョッピリ使いやすくなりました!

使いやすくなった点1 favicon設置 初めてfaviconという名前を.. 続きを読む

Comments [3]

いいものはっけーん!
難しすぎてできませんー!ざんねーん;;
時間のある時ためしてみまっす!

余計なお世話かもしれませんが~、「n」の部分にはアンチエイリアスを
かけた方がバランスよく見えると思うのですよ~。


つまりこう!(`・ω・´) → http://www.h-a-g-a.net/nnistar.gif

おーさんきゅー
早速いただいたモナ:)

コメントする

公開されません

(いくつかのHTMLタグ(a, strong, ul, ol, liなど)が使えます)