[1] favicon は、 Web page をお気に入りに追加した時に表示される小さな絵のことです。 InternetExplorer が最初に実装して、段々広まりました。
[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)
[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 を順に見に行ったという話もありますが、確認できません。
link
要素で指定[140]
文書の favicon は、
HTML
link
要素で指定できます。
[143]
リンク型
icon
を使った
HTML
link
要素
(<link rel=icon>
)
を使います。
<link rel="shortcut icon">
[5] WinIE は >>2 の方法を試す前に、当該 HTML 文書が次の例のような link要素を持っていると、 それを使います。
<link rel="shortcut icon" href="icon-name.ico">
[6] "shortcut icon" は大文字でも小文字でも良いようです。
WinIE の後を追った実装は "icon" だけを識別に使っています。 (HTML 的にもその方が整合性があります。)
WinIE で "icon" だけとかだとどうなるかはわかりません。
.ico
で終わる方がいいです。特に内容折衝を使っている場合、 WinIE がうまく取得できないことがあります。 (favicon.ico に限らずどんなものでも起こる問題です。単に WinIE がへぼいだけです。。。)[141]
逆順の
rel="icon shortcut"
ではいけません。
WinIE は対応しておらず、
HTML Standard
も認めていません。
[142]
<link rel="shortcut icon">
が仕様違反だとする解説記事があるようですが、
誤りです。
[154]
困ったことに MDN にも shortcut icon
は非適合と書いてあります
>>153。
[155]
HTML Standard のこの部分の規定が若干の曖昧性を含んでいるので、
誤解が生じるのはやむを得ないと言えなくもないですが、
明白に shortcut icon
の構文を規定していること
(不適合なら規定する必要はなく、実際他の不適合の構造の構文は規定していません。)、
現に使われている特別有害性のない構造を不適合にしないことが
HTML5 (当時) の開発方針だったことから、
shortcut icon
を不適合と解すべき理由はありません。
<link rel="shotcut icon">
[66]
shotcut icon
という間違ったリンク型が少なからずつかわれているようです。
IW:Google:"shotcut icon" でもそれなりに間違った解説が見つかります。 実際に間違った記述をしている文書もそれなりにあるようです。 (名無しさん )
<link rel="alternate icon">
[145]
<link rel="alternate icon">
のような指定を紹介する解説記事があります。
その根拠は不明で、誤りと思われる怪情報です。
[147]
HTML Standard によれば、
<link rel="alternate icon">
は
<link rel=alternate>
と
<link rel=icon>
を別々に記述するのと同じような意味になります。
alternate
と
icon
はたまたま併用されるだけの無関係のリンク型です。
「代替アイコン」の意味にはなりません。
併用されたときの特別な意味、特殊な処理は規定されていません。
[148]
過去及び現在の Webブラウザー (およびそれ以外の favicon
を使うソフトウェア) の中でも、
alternate icon
の組み合わせを特別に解釈する実装例は知られていません。
特定の実装の不具合等で特殊な挙動をする事例も見つかっていません。
[149]
alternate icon
を紹介する解説記事等で、
alternate
と書かなければならない根拠を示したものは見つかりません。
どのような挙動を意図して alternate
と書いたのか明確な説明はありません。
出典不明の怪しい記事ばかりが出てきます。
[163] Chrome Platform Status がデモページとしてリンクしていた >>160 HTML文書には、
<link rel="icon" type="image/svg+xml" href="happyface.svg"/> <link rel="alternate icon" type="image/png" href="sadface.png"/>
... とありました >>162。
[166] このデモページはに既に存在していました >>164。 遡って, にも存在していた形跡があります >>169, >>171。
[170] SVG WG でも活動する Erik Dahlström が作ったものと見られますが、記述の根拠は不明です。
[172] 時点では SVG favicon に対応した Webブラウザーは皆無でした >>171。 具体的な仕様や実装に基づいたものではなく、 希望的な試作の要素が大きいデモだったと思われます。
[168]
デモページは
WebKit
の Bugzilla でもに仕様書と共にテストとして引かれていました
>>84。
しかし同時に引かれた仕様書には alternate icon
の規定がなく、投稿者が仕様とテストの一致を検討したとは思えません。
[173] そんな状態でもWebブラウザーやWeb標準の開発者が10年近くにわたって参照し続けてきたため、 誰も気づかないうちに知名度と権威 >>156 が上昇してきていたようです。
[165] デモページは現存しますが、 Chrome Platform Status からのリンクは既に削除されています >>159。 (理由は不明です。)
[175] 根拠は不明。「念の為」と書いている辺り十分な調査をしないで書かれた疑いがある。
[177] 根拠は不明。 icon alternate
の順序が、日付の近い >>174
と同じことに注目したい。
[150] 拡散の元の1つとみられるサイトです。
[151]
alternate
が Webブラウザーに
「programmatically communicates」
するものだと主張していますが、どの仕様で規定されたものとも、
どの実装で確認される挙動とも説明されていません。
まず著者が HTML 仕様と意思疎通 (communicate)
出来ていないようです。
[152]
なお MDN が引かれていますが、 MDN
には
alternate
が何かを
「programmatically communicates」
するかのような記述はありません。出典詐欺でしょうか?
[157] この質問は
<link href="favicon.svg" rel="icon" type="image/svg+xml"> <link href="favicon.ico" rel="alternate icon" type="image/x-icon">
... と書いて、 Chrome で ICO が表示されたと尋ねていました。 回答は >>146 を引いて、Chrome の不具合ではないかとしました。
[158]
HTML Standard は同等の候補が複数あれば最後の
link
要素を使うと規定しており、
まったく仕様通りの挙動です。
[179] >>177 が提案したが >>178 で効果がないと報告されている、と書き HTML Standard に規定されていないことを指摘している。
[132] favicon には Web の画像形式のほとんどが使えます。
[131] favicon は1990年代 (平成時代初期) に WinIE が最初に実装しました。そのため当時は Windows のアイコン用標準画像形式である ICOファイル形式のみに対応していました。
[7] WinIE は、 16×16 の Windows ico形式でないと使ってくれません。色数とかにも制限があったっけ。
[134] 他の Webブラウザーは ICOファイル以外の GIF などの画像形式の favicon にも対応しました。
[8] >>7 は Windoze べったりなんで、 WinIE 以外の実装では他の形式が使えたりもします。
[135] 平成時代中期から後期には、 PNG の利用が一般化しました。 依然として ICOファイルを使う場合もありましたが、徐々に減っていったとみられます。
[85] 従来 favicon はビットマップ系の画像形式が専ら使われてきましたが、 平成時代末期頃に SVG への対応が始まり、 ベクトル画像が使えるようになりました。
[108] Firefox は早い時期から対応していました。
[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
[138] 通常の画像同様、画像形式を表す適切な MIME型を HTTPヘッダーに指定する必要があります。
[64]
Windows の.ico
の場合は、媒体型をimage/vnd.microsoft.icon
にしておく必要があります。
Apacheの場合は、.htaccess
などで
AddType image/vnd.microsoft.icon .ico
とすればおk。
rel=mask-icon
[100] icon
の処理を何時の時点で行うべきかについて、
HTML Standard は明確にしていません。
[136] 最上位閲覧文脈ではない入れ子閲覧文脈の場合には、 favicon の取得が行われないようです。
[137] 最上位閲覧文脈でも favicon が表示される UI がない Webブラウザーの場合にも、 favicon の取得は行われないかもしれません。 (実装戦略によっては行われるかもしれません。)
[80] favicon は、窓のどこかに表示されるのが一般的です。
[87] 現在の多くの Webブラウザーは、タブに表示します。
[89] Webページによっては、状態を簡易的に表示するために favicon を使うことがあります。
[90] 長い時間がかかる処理のある Webアプリケーションは、 処理中と処理完了で favicon を切り替えることがあります。 利用者が他のタブで処理をしていても、favicon が変化していることに気づけます。 敢えて通知を出すほどでもない処理の完了通知に適しています。
[113] 従って、 Web互換性のため、 Webブラウザーは
link
要素で指定される favicon の URL
が変化した時、それに追随する必要があります。
[114] busy indicator と共用になっている場合など、 常時表示されるわけではない場合もあります。
[93] ブックマークの項目、 履歴画面、 インターネットショートカット、 ホーム画面に追加のような機能で表示されることもあります。 最終訪問時の favicon のキャッシュを表示するもの、 最終訪問時の favicon の URL を使って表示するもの、 保存時の favicon を表示するものなど、色々な実装方法があります。
[115] 多くの実装は、favicon が存在しない場合 (や読み込み途中の場合) に、 実装依存の既定の favicon をかわりに表示します。
[116] favicon は、フィッシングに悪用される危険性があります。 例えば、システムの重要な機能に使われているアイコンを favicon に使うことで、攻撃者の Webページをシステム機能のように見せかけることができるかもしれません。
[117] Webブラウザーは、そのような誤認が起きにくいよう、 利用者インターフェイスで工夫する必要があります。
favicon.ico
) だと修正しても反映されないとか他のサイトと混じるとかいう意味不明な現象が起こるのだ、という説があります。真偽の程は分かりませんが、メカニズムはなんとなく納得がいきます。けど、幾ら何でも WinIE 開発チームはそんなこと (favicon.ico
anywhere!) も気づかないほど間抜けとは思えません。[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
でも、エラーになりません。
<META NAME="Document-Icon" CONTENT="uri://of/icon">
で icon in the hotlist and history list を指定するという、まさに現在の favicon に相当するものが説明されています (1994年!)。window.external.AddFavorite()
もセットで紹介してますよね。 M$ が同時に実装したせいですか? 両方ともお気に入り関連ってだけでさしたる関係も見えないけどなあ。google.ico
って一体何よ? 検索しても日本語では情報無し。[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
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
<link rel="Shortcut Icon" type="image/x-icon" href="images/favicon.ico" />
<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" />
<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
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
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/
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
img
の画像として ICOファイルはほとんど使われていませんでした。 favicon 対応と時期の順序は不明ですが、 WinIE ではいつからかimg
でもICOファイルが使えるように (なし崩し的に) なり、たまに使われるようになりました (が主流にはなりませんでした)。