« 本を買うときの複雑な心境 | トップページ | そろそろ長時間メンテ開始、か…… »

2006/06/07

faviconのブラウザ毎のサポート状況

ブラウザのお気に入り(ブックマーク)欄や、アドレス欄に表示されている小さなアイコン。サイトによっては、独自なものが表示されますが、あれはfavicon(FAVorite ICON)と呼ばれ、それぞれのサイト(ブログ)管理者が用意しているもの。
ブラウザが、サイト上のアイコンファイル(favicon.ico(別の名前でもよい))を読み込んでキャッシュし、表示しているものです。
確か、IEが独自規格として始めたものを、他のブラウザでも取り入れた、とどこかで読んだような気がします。

実はこのサイトでも、以前からさりげに設置してあります

KOROPPYさんのところ経由で、takoさんの『初めてのココログ・カスタマイズ: 第32回:自分専用のfavicon(ファビコン)を付けてみよう』という記事を拝見し、そういえばよくわからないまま設置したら表示されたから、そのままほったらかしていたなぁ、と思い、ちょっと調べてみました。

ブラウザ毎のサポート状況(私が使用しているもののみですが)

設置方法ホーム(ルート)上
favicon.ico(*1)
<link>による指定(*2)
<head>~</head>内
<link>による指定(*2)
<head>~</head>外
IE6 SP1×
Sleipnir 2.3x×(*3)×(*3)
Firefox 1.5.x
(*1) http://myblog.tea-nifty.com/favicon.ico のように、サイトのホーム(ドメインのルートディレクトリ)直下に、favicon.icoの名前でアイコンファイルを置くことを示します。
(*2) <link rel="SHORTCUT ICON" href="http://myblog.tea-nifty.com/blog/myicon.ico" /> のようなタグを設置し、hrefで指定した場所にアイコンファイルを置くことを示します。
(*3) こちらによると、負荷を考慮して現状では未サポートとのこと。

というわけで、少なくともこれら全てに対応しようと思うと、『ホーム(ルートディレクトリ)にfavicon.icoという名前でアイコンを設置する』ということになるでしょう。
Firefox に限れば、<head>~</head>外にも link タグを設置できるので、ページ毎にアイコンを変更する、ということも可能だとは思われます……が、 link タグを<head>~</head>領域外に設置するのは本来の仕様外のはず。
ココログプロ等、テンプレートをいじれる場合には、<head>~</head>内に link タグを設置できるので、こちらは正当な手段でページ(またはブログ)毎のアイコン指定も可能です。この場合は、ブラウザは IE6、Firefox で OK、Sleipnir は NG(linkタグは無視されるので(置かれていれば)ホームのアイコンが表示されることになります)。

ちなみに、ブラウザ側の表示(faviconのキャッシュ)更新は、IE6の場合、

  1. 該当サイトを表示する。
  2. 該当サイトのブックマーク(お気に入り)を新規に作成する(既存のものが有る場合でも、上書きする)。
  3. IE6を再起動する。
とするのが一番確実そうです。
2.の、お気に入りを上書きするのがミソ、らしい

Sleipnirだと、ツール(T)→個人情報の削除(D)で、削除するデータ(D)のFaviconのキャッシュをチェックして、[OK]を押してキャッシュを削除した後、サイトを再表示するのが確実でしょうか。
個別に削除したいなら、デフォルト C:\Program Files\Fenrir & Co\Sleipnir\settings 下の favicon というフォルダを探して、その下の該当するアイコンファイル(サイト名.ico)を削除後、Sleipnir を再起動、ですかね。

Firefoxは……再表示で読込み直すのかな?誰か調べて(^^;。

【2006.06.07追記】
どうも、IE6・Sleipnirだと、予めお気に入りに登録(ブックマーク)しておかないと、アドレス欄等にもアイコンが反映されないようですね。

【覚書】
Favicon Japanの方だと 、PNG画像等がうまくアイコンに変換されない(ファイル名と拡張子は変わっても中身がそのままで変わっていない)場合がある模様。
その場合、同じ元画像をFavIcon from Picsの方で変換するとうまくいく……かもしれない。

« 本を買うときの複雑な心境 | トップページ | そろそろ長時間メンテ開始、か…… »

ウェブログ・ココログ関連」カテゴリの記事

覚書」カテゴリの記事

コメント

こんにちは。
ホームの直下にアイコンを移動したところ、IEでもきちんと表示することが出来ました。
情報ありがとうございました!

風柳さん こんにちわ。
記事を読んでやっと成功しました(≧∇≦)/
実は例のサイトでFaviconを作ってルートにアップしたものの なんぼ待っても表示されへんかったんで「ダメだ、こりゃ~」と諦めかけていたんですが、こちらの記事を読んでやっと成功しました。
実はtakoさん所の記事でSleipnirの場合(因みにウチは2.40β1)Faviconキャッシュを削除して・・・とあったんでsleipnirのfaviconのキャッシュ格納フォルダを当たってみたんだけど自分のサイトのモノがない(今考えれば当たり前で自分のblogはブックマークしてないんであるはずがない。ここで”ブックマーク”してる所だけFaviconファイルがあると気づけば解決だったんですが、そこが素人の悲しさ・・・)為に削除攻撃は効かず・・・
そこに風柳さんのコメントをいただいたので早速Faviconを作りに行きました。英語サイトだったけど、作ること自体は簡単にいきまして、DL*解凍後、ルートにアップ、”明日なる夢”を再表示。さて、表示されない~!!
( T∇T)‥…(((σ ガチョーーーン
FireFoxは?表示される。エクスプローラで確認。表示・・・される。って事はIEにも対応してるはず・・・なのに表示されない・・・なじぇ?
で、ここの記事をよんで、SleipnirのエンジンはIE6だよな~って事は ここのIE用の方法をとれば・・・
で成功しました~
:*.;".*・;・^;・:\(*^▽^*)/:・;^・;・*.";.*: ワーイ♪
どうも有難うございました~本当にお世話になりました!
これからも宜しくお願いします。
あ、それから一緒にサイトで表示されていたアニメーションバージョンのfaviconを表示する事は出来ないんですか?

hibikiさん、どうもです。

うまく表示できるようになったようでよかったです。
そうですね、IE系の場合はブックマークしている場合だけ表示されるみたいですので、その旨、明記しておいたほうが良さそうですね。

アニメーションGIF版のアイコンは、残念ですがIE系は未サポートのようです。

Firefox は対応していますので、件のサイト()からダウンロードしてきた圧縮ファイルに含まれているanimated_favicon1.gif を、例えば
http://hibiki-tora.cocolog-nifty.com/blog/
にアップロードしておき、

<link rel="icon" type="image/gif" href="http://hibiki-tora.cocolog-nifty.com/blog/animated_favicon1.gif" />

のようなタグを適当なところに書いておけば、Firefox ならそちらを参照してアニメーション表示してくれます。
(type指定は無くても可。また、rel="SHORTCUT ICON"のままでも、拡張子を ico にすれば大丈夫、かな?)

ルートに普通のアイコンファイル(favicon.ico)の方を置いておけば、アニメーションGIF未対応のブラウザの場合はそちらを参照するのではないかと思います。

KOROPPYさん、どうもです。
うまくいったみたいですね。
ハートのアイコン、サイトの雰囲気にもぴったりですね。お気に入りの中でも目立っています(^^)。

風柳さん~こんばんわ!
あれ?あれ??風柳さんに教えていただいたとおりアップして サブタイトルにタグ貼ったのに なぜかウチのFireFoxではアニメーションしてくださらない~
なじぇなじぇ??
いや、とりあえず普通のFaviconは表示できたのでOKなんですが、何故アニメはダメなんかなぁ?って思って。また暇な時にでもご教授くださいませm( _ _ )m

hibikiさん、どうもです。

サイト拝見しましたところ、
<link rel="shortcut icon" href="http://hibiki-tora.cocolog-nifty.com/favicon.ico">
の方も残っていますね。
こちらが後になっているため、優先されているのでは?と推測。

ホーム(ルートディレクトリ)に置いたfavicon.icoは何もタグが無くても(他の指定がなければ)自動で読み込まれますので、この行を消してお試し下さい。

!!!!!
一発で治りました!
ありがとうございます!
PCはPC8801の頃から触ってますが、プログラム関係は英語アレルギーのためBasicで挫折しましたので・・・HTMLやCSS等も日本語なら~
これからも素人質問で”こんなんも知らんのか~”と思われる事もあるかもしれませんが、宜しくです。
少しは勉強しなくっちゃ~
どこか勉強できるサイトご存知ないですか?

hibikiさん、どうもです。
うまくいったようで良かったです。

88時代からですか。私が初めてPCに触れたのも1982年頃なので、PC暦は同じくらいでしょうか(私の場合、その間で触っていなかった期間も長いのですが)。

私もかなり重度な英語アレルギーではあるのですが、プログラム関係は自分で作ったものが動く、という物作りの楽しみがあるためか、なんとかなっています。
何らかの興味という動機づけさえあれば、後はとっかかりと慣れ、ですかね。
#JavaScriptもこの2月に覚えはじめたばかりなんですが、思った以上にいろいろ出来るのではまってしまったというか(笑)

HTMLやCSSについては、私はよく『HTMLクイックリファレンス』(http://www.htmq.com/)を参考にしています。勉強できるサイトか?といわれると微妙なのですが。
でも、既にhibikiさんもなさっているように、ブログのカスタマイズをいろいろやっているうちに、自然と勉強になっているのではないでしょうか?

そうですね~好きこそモノの上手なれって言いますからね。頑張りまっす!JAVAScriptもできればプログラムも出来るんですよね~出来たらいいなぁ。
そうそう、風柳さんと話して昔のPC時代を思い出して少し記事にしてみました。ずいぶん昔の事なんで間違いや思い違いもあると思いますが、また暇な時にでも見に来てくださいね。

風柳さん、はじめまして。秋津羽と申します。
facetさんのサイトから時々こちらのサイトを拝見させていただいてました。
私はココログでなくブログ人を使っているのですが、風柳さんの記事を見て自分もfaviconを設置したくなり(笑)設置しました。大変参考になりました。ありがとうございました。
ココログでは、風柳さんやfacetさん等、JavaScript等を公開なさっている方が多く、ココログユーザーが羨ましいです~また、ご訪問させていただきます。

秋津羽さん、はじめまして。

参考になったようで良かったです。
サイト拝見しましたが、RichardのRですか。格好いいデザインですね。

私の場合は自作なんですが……デザインセンスが無い上、16x16のサイズ制限は厳しすぎて……公開されているので良いものを探そうかなぁ……。

| JavaScript等を公開なさっている方が多く、ココログユーザーが羨ましいです

いやぁ、もともとのブログの機能がどうも××なだけに、かえってカスタマイズ心をくすぐられるという人が多いのかも知れません。私もそのひとりですが(笑)。

それでは、今後ともよろしくお願いします。

初めまして。
Faviconの表示がうまくいかなくて悩んでいたところ、こちらの記事に行き当たりました。
お陰さまで、うまく表示できるようになりました。
ありがとうございますm(_ _)m

お世話になります。 ここの情報を見て対応させて頂いております。

http://www.html-kit.com/favicon/ で作成し、
ルートにおいてるのですが、お気に入り登録もしても、どうもうまく表示されません。

他にうまくいかないケースの情報お持ちの方はいないでしょうか?

http://2020hindsight.cocolog-nifty.com/blog/

すみません。 色々やってると、表示できました。
なぜなのかわかってませんが・・・

はじめまして。
私は、takoさんのブログを見て、こちらにたどりつきました。
http://www.html-kit.com/favicon/-/browserpreview-0/で画像を.icoに変換し、takoさんの手順通りにやったのですが、自分のPCでは表示されるのに、他のPCでは表示されません。
ブログのサブタイトルには、
<link rel="shortcut icon" href="http://gen358.cocolog-nifty.com/favicon.ico">
このタグを貼り付けてあるのですが、何故なんでしょうか。
反映するまで時間がかかるのでしょうか。
もし宜しければご教授下さいませ。

| 他のPCでは表示されません。

"他のPC"で使用されているのがIE以外の場合は、よくわかりません。
IEの場合には、履歴をクリアすることで反映されるかもしれません(IE7の場合、「ツール(T)」→「インターネット オプション(O)」→「全般」タブの「閲覧の履歴」の「削除(D)」→「履歴の削除(H)」(および、念のため「ファイルの削除(F)」)を実施後、ブラウザを再起動してから、当該サイトを表示)。

どうもIEの場合、一度サイトを訪れたときに favicon.ico が存在しなかったら(もしくは古いfavicon.icoがあったら)それを記憶してしまい、履歴に残っている間は再度読み込みに行かないため、途中で(サーバ側に)favicon.ico を設置(変更)したとしても即時には反映されない(そのうち時間が経つと、履歴が消されるため、いつの間にか反映される)、ということのようです。

■参考
favicon(ファビコン)に少しはまる(IE7で表示されなかった訳)
http://shimax.cocolog-nifty.com/search/2007/07/faviconie7_4243.html

どうやら、サーバ側の設定などによりクライアント(IE)にfavicon.icoの変更を積極的に伝える術はなさげで、即時反映してもらおうと思ったら、手動で履歴をクリアしてもらうしかなさそうです。

風柳様、さっそくありがとうございました。
「ファイルの削除(F)」はしましたが、「履歴の削除(H)」はしていませんでした。ちなみに私のPCはXPのSP3で、IE7です。
別のPCでIE6でも表示されませんでしたが、お気に入りに上書き保存をしたら表示されました。しかし、表示される時とされない時があるようです。今度は、「履歴の削除(H)」も試してみようと思います。
そして、今日ブログ仲間からお気に入りに追加したら表示された(IE7)というメールが届きました。
ご親切にありがとうございました。

IEの場合、faviconがどうやったら更新されるのか、なかなかわからないですよね。
知らない間に更新されていた、ということも多いようです。

素直に、設置する側(サーバ側)が更新したら、それがすぐに自動で反映されればよいのですけれど……。
#負荷対策なんでしょうけれどね……せめて[Ctrl]+[F5]のタイミングで読み込みにいけばよいと思うのですが。

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: faviconのブラウザ毎のサポート状況:

» Faviconを 変更しました~よろしければ上書きしてねん (≧∇≦)/ ハハハ [明日なる夢]
←RSSリーダーに登録するには ここをクリックしてね!! 題名のとおりなんですが「Favicon」を変更しまし [続きを読む]

« 本を買うときの複雑な心境 | トップページ | そろそろ長時間メンテ開始、か…… »

戻るリンク追加

カレンダー

2025年1月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

ココログカレンダーPlus(旧2)

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

コメントリストツリー化

無料ブログはココログ