質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

89.86%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,148
makoto-n

makoto-n

score 387

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

<link rel="icon" sizes="32x32" href="images/favicon/favicon-32.png">


  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Google I/O 2016">


  <link rel="shortcut icon" href="images/favicon/favicon-72.png">
  <link rel="apple-touch-icon" href="images/touch/homescreen48.png">
  <link rel="apple-touch-icon" sizes="72x72" href="images/touch/homescreen72.png">
  <link rel="apple-touch-icon" sizes="96x96" href="images/touch/homescreen96.png">
  <link rel="apple-touch-icon" sizes="144x144" href="images/touch/homescreen144.png">
  <link rel="apple-touch-icon" sizes="192x192" href="images/touch/homescreen192.png">


  <meta name="msapplication-TileImage" content="images/touch/homescreen144.png">
  <meta name="msapplication-TileColor" content="#ECEFF1">
  <meta name="msapplication-tap-highlight" content="no">


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

「Microsoft – Official Home Page」と 

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


「World Wide Web Consortium (W3C)」では 

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


とicoを設定しています。

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

また、 

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


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2 件

link

checkベストアンサー

+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/03 01:20 編集

    ありがとうございます。

    .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">
    などでメタ情報に記載する必要もありませんか？

    キャンセル

  • 2016/08/03 01:51 編集

    >　.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

    キャンセル

  • 2016/08/03 05:30

    ありがとうございます。

    キャンセル

  • 2016/08/03 19:25

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

    キャンセル

link

+2

表示させるブラウザなどに依存するのでどちらも必要といえば必要ですかね。
icoがMIMEにないので・・・という話を昔聞いた気がします。

?v2とは何でしょうか？

別のURL扱いにして、キャッシュを使わせないようにしています。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/02 21:33

    > 別のURL扱いにして、キャッシュを使わせないようにしています。
    ふむふむ、そんな手があったとは。

    icoについては他の回答もまってみますね！
    ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 89.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る