ファビコン:icoとfavicon.ico?v2について

「Google I/O 2016」の設定によるとICOを記述していないのですが、

html
1  <link rel="icon" sizes="32x32" href="images/favicon/favicon-32.png">
2
3  
4  <meta name="apple-mobile-web-app-capable" content="yes">
5  <meta name="apple-mobile-web-app-status-bar-style" content="black">
6  <meta name="apple-mobile-web-app-title" content="Google I/O 2016">
7
8  
9  <link rel="shortcut icon" href="images/favicon/favicon-72.png">
10  <link rel="apple-touch-icon" href="images/touch/homescreen48.png">
11  <link rel="apple-touch-icon" sizes="72x72" href="images/touch/homescreen72.png">
12  <link rel="apple-touch-icon" sizes="96x96" href="images/touch/homescreen96.png">
13  <link rel="apple-touch-icon" sizes="144x144" href="images/touch/homescreen144.png">
14  <link rel="apple-touch-icon" sizes="192x192" href="images/touch/homescreen192.png">
15
16  
17  <meta name="msapplication-TileImage" content="images/touch/homescreen144.png">
18  <meta name="msapplication-TileColor" content="#ECEFF1">
19  <meta name="msapplication-tap-highlight" content="no">

ちなみにこちらが「manifest.json」

「Microsoft – Official Home Page」と

html
1<link rel="shortcut icon" href="//www.microsoft.com/favicon.ico?v2" />

「World Wide Web Consortium (W3C)」では

html
1<link rel="shortcut icon" href="/2008/site/images/favicon.ico" type="image/x-icon" />

とicoを設定しています。

どちらを参考にするべきでしょうか？
htmlのフォーマットを作る過程で行き詰りました。

また、

html
1<link rel="shortcut icon" href="//www.microsoft.com/favicon.ico?v2" />

の?v2とは何でしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

・どちらを参考にするべきでしょうか？

ファイル名の決まりは特にない。また、ファイル形式の決まりもなく、ウェブブラウザが認識する形式であればどのような形式を用いても良い。ただし、Internet Explorerは10以下ではICO形式しか認識しない。wikipedia

標準化の状況なども書かれていましたので一読されてみては？

・ ?v2とは何でしょうか？

ブラウザにはファイルをキャッシュする機能があって、「//www.microsoft.com/favicon.ico」を一度参照するとURLとセットでこのファイルを手元に保存します。
再度同じファイルへのアクセスがあった場合に、幾つかの条件を満たせばネットの向こうまでとりに行かず、手元のファイルを参照するわけです。
ただ、ページ提供者が画像を変更した場合でも、キャッシュを保存している人は古いファイルを何時までも表示してしまうことがあります。
そこで、キャッシュはURLに対応して記録されているので「//www.microsoft.com/favicon.ico?abc」としてやれば(このURLに対応するキャッシュがない限り)必ず新しいファイルを取得してくれるというわけです。
その後更にファイルを更新した場合は、この値も変更する必要が発生します。
※「?」の後ろの値はphpやjavascriptなどで意図的に参照しない限り、通常のアクセスに於いては無視されます。

投稿2016/08/02 15:05

編集2016/08/02 15:08

hirohiro

総合スコア2068

makoto-n

2016/08/02 16:21 編集

ありがとうございます。 .icoはルートディレクトリに置いて、ウェブクリックアイコンはそれぞれの形式で相対パスの指定が良いのでしょうか？上記ソースでicoが見つからないのはそのためですか？この見解はあっていますか？ちなみに <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico"> <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico"> などでメタ情報に記載する必要もありませんか？

hirohiro

2016/08/02 17:03 編集

>　.icoはルートディレクトリに置いて、 (wikipedia)faviconのはじまりは、ウェブブラウザであるMicrosoft Internet Explorer 5によってはじめて搭載された独自の（非HTML標準の）機能であった。ユーザーが任意のWebサイトをお気に入り登録するときに、ウェブブラウザは該当Webサイトのディレクトリから favicon.ico ファイルの存在を調べ..... いにしえのブラウザまで対象にするのでなければ不要だと思います >　上記ソースでicoが見つからないのはそのためですか？ (wikipedia)ファイル形式の決まりもなく、ウェブブラウザが認識する形式であればどのような形式を用いても良い。Internet Explorerは10以下ではICO形式しか認識しない。最初のソースに.icoが無いのは、.pngが変わりに使われているためでしょう。 IE10以前も対象にするなら、ファイル形式は.icoにしたほうが良いでしょう。 >　などでメタ情報に記載する必要もありませんか？ (wikipedia)HTML/XHTML内でfaviconを指定するには head 要素の中で link 要素を次のように用いる。単独でも効果はあるが、両方指定するのが望ましいとされる。むしろこのlinkタグを記載するのがスタンダードなのではないでしょうか？ icoファイルを画像を認識させるために、サーバ側でMIMETYPEの設定が必要な場合があるようです。※未登録でもファイルを.ico以外にすれば表示されると思います(IE10以前はあきらめることになります）サーバに設定する場合の参考記事 http://d.hatena.ne.jp/solitary_shell/20101125/1290652106

makoto-n

2016/08/02 20:30

ありがとうございます。

makoto-n

2016/08/03 10:25

改めて読み直してやっと理解しました。ｗありがとうございました。

行動規範の内容に同意します