ファヴィコン

Edit New

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.ico → http://foo.invalid/bar/favicon.ico → http://foo.invalid/favicon.ico を順に見に行ったという話もありますが、確認できません。

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

絵の形式

[132] favicon には Web の画像形式のほとんどが使えます。

初期の実装

[131] favicon は1990年代 (平成時代初期) に WinIE が最初に実装しました。そのため当時は Windows のアイコン用標準画像形式である ICOファイル形式のみに対応していました。

[133] 当時の Web では GIF や JPEG が主な画像形式として使われていました。 HTML文書中の img の画像として ICOファイルはほとんど使われていませんでした。 favicon 対応と時期の順序は不明ですが、 WinIE ではいつからか img でもICOファイルが使えるように (なし崩し的に) なり、たまに使われるようになりました (が主流にはなりませんでした)。

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

[134] 他の Webブラウザーは ICOファイル以外の GIF などの画像形式の favicon にも対応しました。

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

  • [16] Mozilla では PNG でも OK.
  • [19] IE も Mozilla も、 PNG と BMP に対応しているという情報があります。
  • [20] >>19 大きさはいずれも16×16, 256色でないといけません。 (ico のときは、他の大きさ・色数も含んでいてもいい。)
  • [21] 2002-11-04 (月) 18:54 >>19 WinIE 5.5 でやってみましたが ICO じゃないと駄目ですた
  • [32] 2002-11-04 (月) 20:27 名無しさん WinIE で、 BMP のファイル名を *.ico にかえて、表示されないと嘆く人が多い見たいですが、それではうまくいきません。 ico形式にしましょう。
  • [46] Mozilla ではなんと MNG でも OK。ちゃんと動きます!
  • [47] Mozilla は他に
  • [48] GIF にも一応対応しています。動画 GIF も動くようです。まあ GIF なんてお勧めはしませんがね。
  • [50] Mozilla は JPEG にも対応しています。つまりどの画像形式でもいいんですね。将来 Mozilla 本体が新しい形式に対応したらそれにも対応するのかもしれません。
  • [52] 忘れてましたが Moz では XBM でも OK
  • [53] 2003-01-27 18:03 名無しさん: Mozilla ではどんな大きさでも縮小してくれるみたいです。

[135] 平成時代中期から後期には、 PNG の利用が一般化しました。 依然として ICOファイルを使う場合もありましたが、徐々に減っていったとみられます。

SVG favicon

[85] 従来 favicon はビットマップ系の画像形式が専ら使われてきましたが、 平成時代末期頃に SVG への対応が始まり、 ベクトル画像が使えるようになりました。

[108] Firefox は早い時期から対応していました。

[110] Chrome は令和時代初頭に対応しました。

[121] Safari は未だに未対応です。

[124] Chrome の対応以後、Webサイトでの利用も増えているようです。 画像データ内部にダークモード対応のための分岐を記述できる点が特に評価されているようです。

[167] SVG Working Group Teleconference -- 22 Apr 2009, , https://www.w3.org/2009/04/22-svg-minutes.html#item05

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

[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

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

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

[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

[159] Support for SVG in favicons - Chrome Platform Status, https://www.chromestatus.com/feature/5180316371124224

MIME 型

[138] 通常の画像同様、画像形式を表す適切な MIME型を HTTPヘッダーに指定する必要があります。

[139] link 要素の type 属性にも MIME型を指定できますが (省略可能)、 HTTPヘッダーの Content-Type: は事実上必須です。

[64] Windows の.icoの場合は、媒体型をimage/vnd.microsoft.iconにしておく必要があります。 Apacheの場合は、.htaccessなどで

AddType image/vnd.microsoft.icon .ico

とすればおk。

rel=mask-icon

[79] mask-icon 参照。

処理

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

navigate も参照。

[136] 最上位閲覧文脈ではない入れ子閲覧文脈の場合には、 favicon の取得が行われないようです。

[137] 最上位閲覧文脈でも favicon が表示される UI がない Webブラウザーの場合にも、 favicon の取得は行われないかもしれません。 (実装戦略によっては行われるかもしれません。)

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

  1. [96] 文書が HTTP か HTTPS で得られたものでなければ、ここで停止します。
  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 要素で指定される favicon の URL が変化した時、それに追随する必要があります。

レンダリングの更新も参照。

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

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

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

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

アニメーション

セキュリティー

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

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

キャッシュ

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

icons (Web App Manifest)

[125] Chrome は sizes が実際の画像のサイズと違う場合に開発者コンソールにエラーを表示するようです。 使いたいサイズを探して fetch するので、 それ以外のアイコンは検査されません。

[126] この検査は、 使いたいサイズを manifest から探して fetch する → 画像のサイズが使いたいサイズか検査する、という形になっているようで、 使いたいサイズのいずれかであれば、 manifest と画像サイズが一致しなくてもいいようです。 例えば manifest に 192x192 と書いてあって、 実際には 144x144 でも、エラーになりません。

歴史

[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

[180] IRC logs: freenode / #whatwg / 20100414, https://krijnhoetmer.nl/irc-logs/whatwg/20100414#l-569

[181] rel="shortcut icon" considered harmful · Mathias Bynens, https://mathiasbynens.be/notes/rel-shortcut-icon

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

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

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

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

[122] Define a favicon to show in search results - Search Console Help () https://support.google.com/webmasters/answer/9290858?hl=en

[123] A New Design for Google Search on Mobile () https://www.blog.google/products/search/new-design-google-search/

[127] DuckDuckGoのWebブラウザー、アクセス先ドメインの情報を収集しているとの批判を受けて修正 | スラド IT () https://it.srad.jp/story/20/07/06/176231/

DuckDuckGoでは各Webサイトからfaviconを取得して表示するには複雑な処理が伴うとして、同社の検索エンジンおよびアプリに独自サービスからfaviconを提供していた。しかし、検索結果に表示するfaviconは問題ないとしても、直接URLを入力してアクセスした場合にもDuckDuckGoへリクエストが送られる点が批判を受けることになる。

[128] JSON Feed - JSON Feed Version 1.1 (, ) https://jsonfeed.org/version/1.1#top-level

[182] 1162276 - SVG favicon is not loading if atribute "sizes" is present, instead regular favicon loads - chromium, https://bugs.chromium.org/p/chromium/issues/detail?id=1162276

[184] ねこめしにっき(2002年12月上旬) (, ) http://www.remus.dti.ne.jp/~a-satomi/nikki/2002/12a.html#d01n01

[185] 1711622 - Consider explicitly listing image/svg+xml in the Accept header for images (for favicons?), https://bugzilla.mozilla.org/show_bug.cgi?id=1711622

Updated: