favicon

favicon

[1] favicon (ふぁびこん) は、 Web page をお気に入りに追加した時に表示される小さな絵のことです。 InternetExplorer が最初に実装して、段々広まりました。

仕様書

favicon.ico

[30] 特定の場所にある資源を自動的に取りに行く機能で、その資源の名前が favicon.ico です。 favicon とは favorite (お気に入り) icon の略とされています。 (icon が重なって格好悪い...)

[3] Privacy 上良くないなどの意見があって、 IE 以外は実装していないと思います。

[31] HTML などの著者は、この機能に頼るべきではないと考えられます。 (この機能が働くように /favicon.ico を用意するのは悪いことではないでしょうが、面倒でも一々 >>5 の方法で書いておくのが望ましいと思われます。)

[65] この機能は、普通 favicon あるいは favicon.ico と呼ばれます。link 要素を使う方法 (>>5) も、 (他に適当な呼称がないためもあってか) まとめて favicon と呼ばれています。 書くだけで読まれることはあまりないのですが、 敢えて発音する場合はファビコンと読むことがあり、 そう片仮名で表記している人もいます。

稀に、省略する前の favorite icon と呼ばれることもあります。 また、その日本語訳お気に入りアイコンと呼ばれることもたまにあるようです。

(名無しさん 2006-03-15 15:16:17 +00:00)

/favicon.ico

[2] WinIE は、サーバーの /favicon.ico を、お気に入りに追加したタイミングなどに見に行きます。

/*/favicon.ico

[4] 実装初期の WinIE はルートだけじゃなくて http://foo.invalid/bar/foo/bar の場合 http://foo.invalid/bar/foo/favicon.icohttp://foo.invalid/bar/favicon.icohttp://foo.invalid/favicon.ico を順に見に行ったという話もありますが、確認できません。

  • [26] >>25 には >>4 の話があります。公式情報ですから、昔の WinIE にはあったけど削られたんでしょう。
  • [27] 今でも同じ階層の favicon.ico は見に行くという話がありますが、確認できませんでした。

絵の形式

[7] WinIE は、 16×16 の Windows ico形式でないと使ってくれません。色数とかにも制限があったっけ。

[8] >>7 は Windoze べったりなんで、 WinIE 以外の実装では他の形式が使えたりもします。

rel=mask-icon

[79] mask-icon 参照。

処理

[100] icon の処理を何時の時点で行うべきかについて、 HTML Standard は明確にしていません。

navigate も参照。

[95] 文書文書リンク型iconリンクがない場合、 並列に、次のようにすることができます >>92

  1. [96] 文書HTTPHTTPS で得られたものでなければ、ここで停止します。
  2. [97] 新しい要求を作成し、fetch します。
    要求
    URL
    /favicon.ico文書番地についてURLの解決を行った結果
    クライアント
    文書Window環境設定群オブジェクト
    終点
    image
    同期フラグ
    credentialsモード
    include
    URL credentials利用フラグ
    続きの処理は、 >>98 とします。

[98] fetch により得られた応答応答の処理は、次のようにします >>92

  1. [99] 応答非安全応答を、 icon で指定されたものとみなして処理します。

レンダリング

[80] favicon は、のどこかに表示されるのが一般的です。

[87] 現在の多くの Webブラウザーは、タブに表示します。

[88] 以前はアドレスバーに表示するのが一般的でした。

[89] Webページによっては、状態を簡易的に表示するために favicon を使うことがあります。

[90] 長い時間がかかる処理のある Webアプリケーションは、 処理中と処理完了で favicon を切り替えることがあります。 利用者が他のタブで処理をしていても、favicon が変化していることに気づけます。 敢えて通知を出すほどでもない処理の完了通知に適しています。

[113] 従って、 Web互換性のため、 Webブラウザーlink 要素で指定される faviconURL が変化した時、それに追随する必要があります。

[114] busy indicator と共用になっている場合など、 常時表示されるわけではない場合もあります。


[93] ブックマークの項目、 履歴画面、 インターネットショートカットホーム画面に追加のような機能で表示されることもあります。 最終訪問時の faviconキャッシュを表示するもの、 最終訪問時の faviconURL を使って表示するもの、 保存時の favicon を表示するものなど、色々な実装方法があります。

[104] 利用者の環境で動作する Webブラウザーだけでなく、 はてなブックマークなどのソーシャルブックマークサービスでも表示されることがあります。

[115] 多くの実装は、favicon が存在しない場合 (や読み込み途中の場合) に、 実装依存の既定の favicon をかわりに表示します。

アニメーション

セキュリティー

[116] favicon は、フィッシングに悪用される危険性があります。 例えば、システムの重要な機能に使われているアイコンfavicon に使うことで、攻撃者の Webページをシステム機能のように見せかけることができるかもしれません。

[117] Webブラウザーは、そのような誤認が起きにくいよう、 利用者インターフェイスで工夫する必要があります。

実装

キャッシュ

  • [28] WinIE のこの絵のキャッシュの仕組みは謎で、検索すると幾多の解析結果が出てきます。関係するものとしては、次のものが挙げられています。
  • [61] URI のファイル名部分がキャッシュ・データベースのキーに使われてるから、同じファイル名 (とりわけ favicon.ico) だと修正しても反映されないとか他のサイトと混じるとかいう意味不明な現象が起こるのだ、という説があります。真偽の程は分かりませんが、メカニズムはなんとなく納得がいきます。けど、幾ら何でも WinIE 開発チームはそんなこと (favicon.ico anywhere!) も気づかないほど間抜けとは思えません。

[69] A blog? with Σαιτω - Opera - favicon ( 版) <http://d.hatena.ne.jp/saiton/20071003/1191401047> (名無しさん)

メモ

[67] Favicon - Wikipedia, the free encyclopedia (2007-01-12 22:01:47 +09:00 版) <http://en.wikipedia.org/wiki/Favicon> (名無しさん)

[68] jeff's WebLog : why doesn't the favicon for my site appear in IE7? (2007-03-07 21:08:59 +09:00 版) <http://blogs.msdn.com/jeffdav/archive/2007/03/01/why-doesn-t-the-favicon-for-my-site-appear-in-ie7.aspx> (名無しさん 2007-03-07 12:10:08 +00:00)

[70] Favicon - Wikipedia ( 版) <http://ja.wikipedia.org/wiki/Favicon#.E6.A8.99.E6.BA.96.E5.8C.96.E5.95.8F.E9.A1.8C>

これは最初W3Cの勧告に従わない形式であり、次の点が問題とされた。

  • ICOフォーマットにはIANAに登録されたMIMEタイプの割り当てがないため、多くのブラウザはFaviconとして指定されたファイルの種類を解析することが出来ない。
  • rel属性に半角スペースを含むため、二つの属性値として解釈されウェブブラウザを混乱させる。
  • link要素はドキュメントのナビゲーション情報を示すWorld Wide Webのアーキテクチャとして知られており、link要素でFaviconを指定する用法は標準仕様に反する。

なにこれ? ほとんど言いがかりじゃないの? こんなの本当に当時問題視されたんだろうか。 (されたとしても一部の人が反対意見を表明した程度なんじゃないの?)

脳内ソースによると当時大きく問題になったのはプライバシーで、技術的な問題は全然指摘されなかったと思うし、ここで挙げられている3点はいずれも正しくない。

[71] IEはURLショートカットファイル(お気に入り)を作るときfaviconをNTFS代替ストリームに保存している - NO UIHARU, NO LIFE. - subtech ( 版) <http://subtech.g.hatena.ne.jp/mayuki/20100331/1270012707>

[72] Web Applications 1.0 r5904 mention /favicon.ico ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=5903&to=5904>

[73] IRC logs: freenode / #whatwg / 20110518 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20110518>

[74] Web Applications 1.0 r8558 rel='shortcut icon' requirement changes; extra sample table for sorting ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=8557&to=8558>

[75] Fun with Favicons - IEInternals - Site Home - MSDN Blogs ( ( 版)) <http://blogs.msdn.com/b/ieinternals/archive/2013/09/08/internet-explorer-favicons-png-link-rel-icon-caching.aspx>

[76] Web Applications 1.0 r8558 rel='shortcut icon' requirement changes; extra sample table for sorting ( 版) <https://html5.org/r/8558>

[77] Make your site shine in Speed Dial - Dev.Opera ( 版) <https://rawgit.com/operasoftware/devopera-static-backup/master/http/dev.opera.com/articles/view/opera-speed-dial-enhancements/index.html#setanicon>

Specifying a Speed Dial icon is very similar to specifying a shortcut icon. Just add a <link> tag in the head section of your document.

<link rel="icon" type="image/png" href="http://path/to/logo.png">

Speed dial icons must be:

-At least 114 pixels wide by 114 pixels high. This is the default minimum icon size and icons smaller than this will be ignored.

-A PNG, JPEG or GIF image. SVG images aren't yet supported. Only the first frame of an animated image will be used.

As an aside, Opera 11.10 does have legacy support for apple-touch-icon, apple-touch-icon-precomposed and image_src.

[78] 366324 – SVG site icons (favicons, shortcut icons) support ( 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=366324>

[81] Webサービスで便利!faviconをpng画像として取得出来るGoogleのAPI | 9ensanのLifeHack ( 版) <http://9ensan.com/blog/webservice/favicon-google-api/>

[82] Issue 294179 - chromium - support svg favicon - An open-source project to help move the web forward. - Google Project Hosting ( 版) <https://code.google.com/p/chromium/issues/detail?id=294179>

[83] SVG favicon support. | Microsoft Connect ( 版) <https://connect.microsoft.com/IE/feedback/details/782416/svg-favicon-support>

[84] Bug 136059 – SVG favicon support ( 版) <https://bugs.webkit.org/show_bug.cgi?id=136059>

[85] 366324 – SVG site icons (favicons, shortcut icons) support ( 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=366324>

[86] IRC logs: freenode / #whatwg / 20150728 ( 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20150728#l-723>

[91] Integrate Fetch into HTML · whatwg/html@7c5555a ( 版) <https://github.com/whatwg/html/commit/7c5555a16f2920c02244c10756bb2f1a11e87a22>

[94] Allow <link> in body for external resource links by igrigorik · Pull Request #616 · whatwg/html ( 版) <https://github.com/whatwg/html/pull/616>

[101] ( 版) <http://www.r-store.jp/newarrival>

<link rel="Shortcut Icon" type="image/x-icon" href="images/favicon.ico" />

[102] ( 版) <https://www.fullspeed.co.jp/>

<link href="/common/img/favicon.ico" type="image/x-icon" rel="icon" />

<link href="/common/img/favicon.ico" type="image/x-icon" rel="shortcut icon" />

<link href="/common/img/apple-touch-icon.png" rel="apple-touch-icon" />

[103] ( ()) <http://prtimes.jp/>

<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">

<meta name="viewport" content="width=1250">

<link rel="apple-touch-icon" sizes="114x114" href="/common/v4.1/images/html/favicon/apple-touch-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="/common/v4.1/images/html/favicon/apple-touch-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="/common/v4.1/images/html/favicon/apple-touch-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="/common/v4.1/images/html/favicon/apple-touch-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="/common/v4.1/images/html/favicon/apple-touch-icon-180x180.png">

<link rel="apple-touch-icon" sizes="57x57" href="/common/v4.1/images/html/favicon/apple-touch-icon.png">

<link rel="apple-touch-icon" sizes="60x60" href="/common/v4.1/images/html/favicon/apple-touch-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="/common/v4.1/images/html/favicon/apple-touch-icon-72x72.png">

<link rel="apple-touch-icon" sizes="76x76" href="/common/v4.1/images/html/favicon/apple-touch-icon-76x76.png">

<link rel="icon" type="image/png" href="/common/v4.1/images/html/favicon/favicon-192x192.png" sizes="192x192">

<link rel="icon" type="image/png" href="/common/v4.1/images/html/favicon/favicon-196x196.png" sizes="196x196">

<link rel="icon" type="image/png" href="/common/v4.1/images/html/favicon/favicon-24x24.png" sizes="24x24">

<link rel="shortcut icon" type="image/png" href="/common/v4.1/images/html/favicon/favicon.ico">

<meta name="msapplication-square150x150logo" content="/common/v4.1/images/html/favicon/mstile-150x150.png" />

<meta name="msapplication-square310x310logo" content="/common/v4.1/images/html/favicon/mstile-310x310.png" />

<meta name="msapplication-square70x70logo" content="/common/v4.1/images/html/favicon/mstile-70x70.png" />

<meta name="msapplication-TileColor" content="#27476E">

<meta name="msapplication-TileImage" content="/common/v4.1/images/html/favicon/mstile-144x144.png">

[105] Use URL's HTTP(S) scheme concept and define rel=icon better ( (annevk著, )) <https://github.com/whatwg/html/commit/a932f7dfd5e50101db47a373cee27b04ed108934>

[106] Align Fetch's destination concept with changes in Fetch (sideshowbarker著, ) <https://github.com/whatwg/html/commit/5e8f96a85d182d36c177db0d6fdde58b4ded86d4>

[107] ios - (How) Can a web site determine if Safari Private Browsing is turned on? - Ask Different () <http://apple.stackexchange.com/questions/131587/how-can-a-web-site-determine-if-safari-private-browsing-is-turned-on>

I have noticed that while in private Browsing mode, Safari will not request favicons, so in theory a site could block caching of the favicon and make a pretty good guess that Private Browsing is on.

In contrast, on iOS, Safari doesn't request favicons at all. But it will, even in Private Browsing mode, request any "apple-touch-icon" if you access the Sharing panel (the apple-touch-icon is used as the Home Screen icon if you subsequently "Add to Home Screen" for that URL).

[108] SVG favicon support. | Microsoft Connect () <https://connect.microsoft.com/IE/feedback/details/782416/svg-favicon-support>

[109] 294179 - Support SVG favicons - chromium - Monorail () <https://bugs.chromium.org/p/chromium/issues/detail?id=294179>

[110] 366324 – SVG site icons (favicons, shortcut icons) support () <https://bugzilla.mozilla.org/show_bug.cgi?id=366324>

[111] SVG favicons – Welcome to the Windows developer feedback site! () <https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/suggestions/6509196-svg-favicons>

[112] Bitmap favicons? · Issue #10 · whatwg/meta () <https://github.com/whatwg/meta/issues/10>

[118] Fetch removes type in favor of just destination (annevk著, ) <https://github.com/whatwg/html/commit/5f59b7a73d450e244a573e5916deb1c2037c1366>

[119] Resolving modules via definition · Issue #3056 · whatwg/html () <https://github.com/whatwg/html/issues/3056>

[120] Deep Dive into the Payment Request API  |  Web Fundamentals  |  Google Developers () <https://developers.google.com/web/fundamentals/payments/deep-dive-into-payment-request?hl=ja>

This UI is a combination of information readily available from the page.

The icon on the left is the most appropriately sized icon the browser can find.

[121] Bitmap favicons? · Issue #10 · whatwg/meta () <https://github.com/whatwg/meta/issues/10>