新着記事
2007年03月05日

ファビコン設置

タブブラウザで複数のwebページを見ることが多くなってくると、ファビコンがあると見分けが付きやすくて便利だと思いました。そこで自分のwebサイト(ホームページと複数のブログ)にもファビコンを設置しました。

webページのファビコンは16×16ピクセルですが、デスクトップ用アイコンにも対応できるように32×32ピクセルで作成してみました。先ずグラフィックソフトでgifかpngのファイルを作ります。もしくはフリー素材サイトで配布しているファビコンを用意するか、ファビコンを作成してくれるwebサービスサイトもあります。
FavIcon from Pics

実はファビコンを設定する機能があるブログのほうで、以前からファビコン1←こんなファビコンを持っています。しかしあまり丁寧に作っていなかったので、あらためて作成することに。

ファビコン2←こんなのも作りましたが、結局表示が一番クリアなファビコン3←これにしました。

作成したgif(またはpng)画像のファイル名を「favicon.ico」と変更し、サーバーにアップロードします。
ホームページの場合は、HTMLファイルの<head>と</head>の間に以下の一行を記述します。
<link rel="shortcut icon" href="favicon.ico">
無料ブログサービスのブログに設置する場合は、HTMLファイルが編集可能なブログならできます。アップロードした画像のディレクトリが別なので、以下のように絶対パス(http://〜から)のアドレスを指定すれば簡単で間違いありません。
<link rel="shortcut icon" href="http://…/…(imageとか)/favicon.ico">
※表示の都合上「http://」のhは全角です。

さて、これでOKのはずですが…

ファビコンはブラウザによっては表示しないこともあります。Firefox2.0とNetscape7.1では32×32ピクセルのファビコンでも問題なく表示。Lunascape4ではファビコンの一部しか表示せず、16×16ピクセルで作り直したほうが良いようです。またInternet Explorer7では全然読み込んでくれません。キャッシュをクリアしてもダメでした。Internet Explorer6の時はファビコンの表示が不安定でしたが、IE7では対応しているらしいのですが。

Lunascape4のキャプチャ画像いったん設置したファビコンを削除して16×16ピクセルのファビコンに変更したら、Lunascape4でもきちんと表示されました。


Firefox2.0では
Firefox2.0のキャプチャ画像

Netscape7.1では
Netscape7.1のキャプチャ画像

Internet Explorer7では
Internet Explorer7のキャプチャ画像

07.03.05_08.jpgブックマーク・お気に入りリストでの表示は、Firefox2.0では何もせずに替わりました。

変更の仕方Internet Explorer7の場合はローカル(パソコン上)にあるファイルを指定することで変更できます。ただし32×32ピクセルのファビコンでないと認識しませんでした。変更の仕方はお気に入りリストのファイル名を右クリック→メニューのプロパティをクリック。アイコンをパソコン上のフォルダを参照して選択します。

ということで、このブログを含めた私のサイトを全部同じファビコンで統一させたいのですが、いったんアップロードしたファビコンを取り替えたりしたものだから、まだ以前のファビコンが表示されるかもしれません(^^;

参考→「アドレス欄やタブに独自アイコンを表示する」〜All About



拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 17:58 | Comment(0) | TrackBack(0) | サイト制作試行錯誤 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
最近のトラックバック

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。