Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [92] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-09-30 22:54:01 +09:00]] 版) <https://html.spec.whatwg.org/#rel-icon>
]REFS]

* favicon.ico

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

[3] Privacy 上良くないなどの意見があって、 IE
以外は実装していないと思います。
- [14] ''IE5.0にまたプライバシー問題?'' (1999-04-16 03:00 PDT) <http://www.hotwired.co.jp/news/news/technology/story/2322.html>
- [24] Mozilla 0.9.8 で実装されましたが、 0.9.9 で off にされました。 On にするには ''user_pref("browser.chrome.favicons",true);'' と設定すればよいようです。

[31] HTML などの著者は、この機能に頼るべきではないと考えられます。
(この機能が働くように ''/favicon.ico'' 
を用意するのは悪いことではないでしょうが、面倒でも一々 >>5
の方法で書いておくのが望ましいと思われます。)
- [35] ファビコンと読む人もいるみたいです。
- [43] [WEAK[2002-12-25 17:11]] ''>>3'': [[お気に入り]]に追加された時やその後またアイコンを取りに行った時 (その後のいつの時点でまだ取りに行くかはわかっていない。 >>28) に特定の資源を取りに行くことで、利用者の privacy 侵害であるという人もいます。とはいうものの、お気に入りに入っているのがわかるのも嫌な人はそういう実装を捨てれば良いだけですし、 >>5 の方法でも使っている資源なら必ずしもお気に入りに入ったとは断定できません。なんにせよ、サーバー側にとってはさほど有益な情報にはならないでしょうから、神経質になる必要もないと考えられます。

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

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

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

[[#comment]]

** /favicon.ico

[2] [[WinIE]] は、サーバーの ''/favicon.ico''
を、[[お気に入り]]に追加したタイミングなどに見に行きます。
- [34] [[Chimera]] もこれをみにいくそうです。
-- [129]  <http://www001.upp.so-net.ne.jp/obapoo/nikki/chimera01.html>
--- 消滅確認 [TIME[2021-01-29T03:54:12.800Z]]
--- [CITE[Chimera とSHORTCUT ICON]], [TIME[2021-01-29T03:53:52.000Z]], [TIME[2003-02-26T13:09:04.855Z]] <https://web.archive.org/web/20030226130901/http://www001.upp.so-net.ne.jp/obapoo/nikki/chimera01.html>
- [36] [[emacs-w3m]] もみにいきます。 
-- [130] [CITE[Re: favicon]], [TIME[2004-06-23T04:22:31.000Z]], [TIME[2021-01-29T03:54:19.593Z]] <http://emacs-w3m.namazu.org/ml/msg02365.html>

** /*/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 は見に行くという話がありますが、確認できませんでした。
[[#comment]]

* HTML の [CODE[link]] 要素で指定

[140] 
[[文書]]の [[favicon]] は、 
[[HTML]]
[CODE[link]]
[[要素]]で指定できます。

[143] 
[[リンク型]]
[DFN[[CODE[icon][rel-icon]]]]
を使った
[[HTML]]
[CODE[link]]
[[要素]]
([DFN[[CODE[<link rel=icon>]]]])
を使います。

[EG[
[144] 
[CODE[head]] [[要素]]内に、

[PRE(code HTML)[
<link rel=icon href=/path/to/icon.png>
]PRE]

... のように書けます。
]EG]

** [CODE[<link rel="shortcut icon">]]

[5] WinIE は >>2 の方法を試す前に、当該 [[HTML]]
文書が次の例のような [[link要素]]を持っていると、
それを使います。

[PRE[
 <link rel="shortcut icon" href="icon-name.ico">
]PRE]

[6] "shortcut icon" は大文字でも小文字でも良いようです。

WinIE の後を追った実装は "icon" だけを識別に使っています。
(HTML 的にもその方が整合性があります。)

WinIE で "icon" だけとかだとどうなるかはわかりません。

- [17] Mozilla では "icon" で OK
- [22] 2002-11-04 (月) 18:54 ''>>6'' WinIE 5.5 では ICON だけだと駄目ですた。
- [58] リンク先ファイル名は、 WinIE のことを考えるなら [CODE[.ico]] で終わる方がいいです。特に[[内容折衝]]を使っている場合、 WinIE がうまく取得できないことがあります。 (favicon.ico に限らずどんなものでも起こる問題です。単に WinIE がへぼいだけです。。。)

[141] 
逆順の
[DFN[[CODE[rel="icon shortcut"]]]]
ではいけません。
[[WinIE]] は対応して''おらず''、
[CITE[HTML Standard]]
も認めて''いません''。

[HISTORY[
[142] 
[CODE[<link rel="shortcut icon">]]
が仕様違反だとする解説記事があるようですが、
誤りです。

[154] 
困ったことに [[MDN]] にも [CODE[shortcut icon]] は[[非適合]]と書いてあります
[SRC[>>153]]。
[TIME[2021-08-17T08:40:50.000Z]]

[155] 
[CITE[HTML Standard]] のこの部分の規定が若干の曖昧性を含んでいるので、
誤解が生じるのはやむを得ないと言えなくもないですが、
明白に [CODE[shortcut icon]] の構文を規定していること
[WEAK[([[不適合]]なら規定する必要はなく、実際他の[[不適合]]の構造の構文は規定していません。)]]、
現に使われている特別有害性のない構造を[[不適合]]にしないことが
[CITE[HTML5]] (当時) の開発方針だったことから、
[CODE[shortcut icon]] 
を[[不適合]]と解すべき理由はありません。

[REFS[
- [153] [CITE@en-US[HTML attribute: rel - HTML: HyperText Markup Language | [[MDN]]]], [TIME[2021-08-16T01:47:12.000Z]], [TIME[2021-08-17T08:40:12.021Z]] <https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#attr-icon>
]REFS]

]HISTORY]

** [CODE[<link rel="[[shotcut icon]]">]]

[66]
[DFN[[CODE(HTML)@en[shotcut icon]]]] という間違った[[リンク型]]が少なからずつかわれているようです。

<IW:Google:"shotcut icon"> でもそれなりに間違った解説が見つかります。
実際に間違った記述をしている文書もそれなりにあるようです。
([[名無しさん]] [TIME[2006-07-29 03:14:45 +00:00]])

** [CODE[<link rel="alternate icon">]]

[145] 
[DFN[[CODE[<link rel="alternate icon">]]]]
のような指定を紹介する解説記事があります。
その根拠は不明で、'''誤り'''と思われる怪情報です。

[147] 
[CITE[HTML Standard]] によれば、
[CODE[<link rel="alternate icon">]]
は
[CODE[<link rel=alternate>]]
と
[CODE[<link rel=icon>]]
を別々に記述するのと同じような意味になります。
[CODE[alternate][rel=alternate]]
と
[CODE[icon][rel-icon]]
はたまたま併用されるだけの無関係の[[リンク型]]です。
「代替アイコン」の意味には''なりません''。
併用されたときの特別な意味、特殊な処理は規定されていません。

[148] 
過去及び現在の [[Webブラウザー]] (およびそれ以外の [[favicon]]
を使うソフトウェア) の中でも、
[CODE[alternate icon]] の組み合わせを特別に解釈する実装例は知られていません。
特定の実装の不具合等で特殊な挙動をする事例も見つかっていません。
[TIME[2021-08-17T08:32:01.00Z]]

[149] 
[CODE[alternate icon]] を紹介する解説記事等で、
[CODE[alternate]] と書かなければならない根拠を示したものは見つかりません。
どのような挙動を意図して [CODE[alternate]] と書いたのか明確な説明はありません。
出典不明の怪しい記事ばかりが出てきます。

-*-*-

[163] 
[CITE[Chrome Platform Status]] 
がデモページとしてリンクしていた [SRC[>>160]] [[HTML文書]]には、

>
[PRE(HTML code)[
		<link rel="icon" type="image/svg+xml" href="happyface.svg"/>
		<link rel="alternate icon" type="image/png" href="sadface.png"/>
]PRE]

... とありました [SRC[>>162]]。

[166] 
このデモページは[TIME[西暦2014年][2014]]に既に存在していました
[SRC[>>164]]。
遡って[TIME[西暦2012年][2012]],
[TIME[西暦2011年][2011]]にも存在していた形跡があります
[SRC[>>169, >>171]]。

[170] 
[[SVG WG]] でも活動する
[[Erik Dahlström]]
が作ったものと見られますが、記述の根拠は不明です。

[172] 
[TIME[西暦2011年][2011]]時点では [[SVG favicon]]
に対応した [[Webブラウザー]]は皆無でした
[SRC[>>171]]。
具体的な仕様や実装に基づいたものではなく、
希望的な試作の要素が大きいデモだったと思われます。

[168] 
デモページは
[[WebKit]]
の [[Bugzilla]] でも[TIME[西暦2014年][2014]]に仕様書と共にテストとして引かれていました
[SRC[>>84]]。
しかし同時に引かれた仕様書には [CODE[alternate icon]]
の規定がなく、投稿者が仕様とテストの一致を検討したとは思えません。

[173] 
そんな状態でも[[Webブラウザー]]や[[Web標準]]の開発者が10年近くにわたって参照し続けてきたため、
誰も気づかないうちに知名度と権威 [SRC[>>156]] が上昇してきていたようです。

[165] デモページは現存しますが、
[CITE[Chrome Platform Status]] 
からのリンクは既に削除されています [SRC[>>159]]。 (理由は不明です。)
[TIME[2021-08-17T09:02:11.100Z]]

[REFS[
- [171] [CITE[IRC logs: [[freenode]] / #html5 / 20111026]], [TIME[2021-08-17T09:23:28.000Z]] <https://krijnhoetmer.nl/irc-logs/html5/20111026#l-693>
- [169] [CITE@en[WHATWG JavaScript logo · Issue #32 · voodootikigod/logo.js · [[GitHub]]]], [TIME[2021-08-17T09:20:45.000Z]] <https://github.com/voodootikigod/logo.js/issues/32#issuecomment-10475162>
- [161] >>159
-- [160] 
[CITE@en[Support for SVG in favicons - [[Chrome Platform Status]]]], [TIME[2021-08-17T08:59:09.000Z]], [TIME[2019-12-10T23:13:10.289Z]] <https://web.archive.org/web/20191210231226/https://www.chromestatus.com/feature/5180316371124224#details>
- [162] [CITE[svg favicon]], [TIME[2016-02-04T23:14:46.000Z]], [TIME[2021-08-17T09:00:21.076Z]] <http://xn--dahlstrm-t4a.net/svg/favicon/favicon.html>
-- [164] [CITE[svg favicon]], [TIME[2021-08-17T09:02:48.000Z]], [TIME[2014-03-04T01:44:59.228Z]] <https://web.archive.org/web/20140304014449/http://dahlstr%C3%B6m.net/svg/favicon/favicon.html>
]REFS]

-*-*-

[FIG(quote)[
[FIGCAPTION[
[174] [CITE@ja[SVG形式の[[ファビコン]]を設置しよう | Webクリエイターボックス]], 
[[Mana]],
2020年2月13日,
[TIME[2021-08-17T09:31:28.000Z]] <https://www.webcreatorbox.com/tech/svg-favicon>
]FIGCAPTION]

>
IEには対応していないのでご注意を。対応していないブラウザー用には念の為、PNG形式のファビコンを用意して設置しておくといいでしょう:
>
HTML
>
[PRE(code HTML)[	
<link rel="icon" href="images/favicon.svg" type="image/svg+xml">
<link rel="icon alternate" href="images/favicon.png" type="image/png">
]PRE]

]FIG]

[175] 根拠は不明。「念の為」と書いている辺り十分な調査をしないで書かれた疑いがある。

[FIG(quote)[
[FIGCAPTION[
[176] [CITE@ja[【歓喜】[[SVG]]がfaviconに対応!これでいろんなサイズの画像を用意しなくてOK! – Creator Note]], 
2月, 22, 2020,
[TIME[2021-08-17T09:34:18.000Z]] <http://creatornote.nakweb.com/%E3%80%90%E6%AD%93%E5%96%9C%E3%80%91svg%E3%81%8Cfavicon%E3%81%AB%E5%AF%BE%E5%BF%9C%EF%BC%81%E3%81%93%E3%82%8C%E3%81%A7%E3%81%84%E3%82%8D%E3%82%93%E3%81%AA%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E7%94%BB/>
]FIGCAPTION]

>
そのため、IE対策用に下記のように画像を埋め込んでおいてあげましょう♪
これでばっちりです!
>
みなさんもSVGで対応してみてくださいね★
>
[PRE(code HTML)[	
<link rel="icon" href="/site/images/favicon.svg" type="image/svg+xml">
<link rel="icon alternate" href="/site/images/favicon.png" type="image/png">
]PRE]

]FIG]

[177] 根拠は不明。 [CODE[icon alternate]] の順序が、日付の近い >>174
と同じことに注目したい。

[FIG(quote)[
[FIGCAPTION[
[146] [CITE@en[SVG, Favicons, and All the Fun Things We Can Do With Them | [[CSS-Tricks]]]], 
[[Eric Bailey]],
Apr 24, 2020,
[TIME[2021-08-17T08:24:57.000Z]] <https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/>
]FIGCAPTION]

>Here’s the code for how to add favicons to your site:
[PRE(code)[
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" href="/favicon.ico">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ff8a01">
]PRE]
>
If a browser doesn’t support a SVG favicon, it will ignore the first link element declaration and continue on to the second. This ensures that all browsers that support favicons can enjoy the experience. 
>
You may also notice the alternate attribute value for our [CODE[rel]] declaration in the second line. This programmatically communicates to the browser that the favicon with a file format that uses .ico is specifically used as an alternate presentation.

;; "our [CODE[rel]] declaration" の[[リンク先]]は
<https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel>。
]FIG]

[150] 
拡散の元の1つとみられるサイトです。

[151] 
[CODE[alternate]] が [[Webブラウザー]]に
「programmatically communicates」
するものだと主張していますが、どの仕様で規定されたものとも、
どの実装で確認される挙動とも説明されていません。
まず著者が [[HTML]] 仕様と意思疎通 (communicate) 
出来ていないようです。

[152] 
なお [[MDN]] が引かれていますが、 [[MDN]]
には
[CODE[alternate]]
が何かを
「programmatically communicates」
するかのような記述はありません。出典詐欺でしょうか?

- [156] [CITE[google chrome - Chromium seems to display ico instead of svg favicon - [[Stack Overflow]]]], [TIME[2021-08-17T08:49:08.000Z]] <https://stackoverflow.com/questions/63429240/chromium-seems-to-display-ico-instead-of-svg-favicon>

[157] 
この質問は

>
[PRE(HTML code)[
<link href="favicon.svg" rel="icon" type="image/svg+xml">
<link href="favicon.ico" rel="alternate icon" type="image/x-icon">
]PRE]

... と書いて、 [[Chrome]] で [[ICO]] が表示されたと尋ねていました。
回答は
>>146
を引いて、[[Chrome]] の[[不具合]]ではないかとしました。

[158] 
[CITE[HTML Standard]] は同等の候補が複数あれば最後の
[CODE[link]] [[要素]]を使うと[[規定]]しており、
まったく仕様通りの挙動です。

- [178] [CITE@en[Definitive edition of "How to Favicon in 2021" - DEV Community]], 
[[Masa Kudamatsu]],
1月27日 Originally published at Medium,
Updated on 7月15日,
[TIME[2021-08-17T09:38:48.000Z]] <https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7#the-raw-alternate-endraw-attribute-value>

[179] 
>>177 が提案したが >>178 で効果がないと報告されている、と書き
[CITE[HTML Standard]] に規定されていないことを指摘している。

[183] 
[[Chromium]] の開発サイトで [CODE[alternate]] に仕様上も実装上も意味はないとの指摘
[SRC[>>182]]

* 絵の形式

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

** 初期の実装

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

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

[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] [WEAK[2003-01-27 18:03]] ''[[名無しさん]]'': [[Mozilla]] ではどんな大きさでも縮小してくれるみたいです。

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

** SVG favicon

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

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

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

[121] 
[[Safari]] は未だに未対応です。
[TIME[2021-08-17T07:58:20.500Z]]

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

-*-*-

[167] [CITE@en[SVG Working Group Teleconference -- 22 Apr 2009]], [TIME[2009-04-22T08:27:15.000Z]], [TIME[2021-08-17T09:08:37.720Z]] <https://www.w3.org/2009/04/22-svg-minutes.html#item05>

[78] [CITE@en[366324 – SVG site icons (favicons, shortcut icons) support]]
([TIME[2015-04-17 09:36:18 +09:00]] 版)
<https://bugzilla.mozilla.org/show_bug.cgi?id=366324>

[82] [CITE[Issue 294179 - chromium - support svg favicon - An open-source project to help move the web forward. - Google Project Hosting]]
([TIME[2015-06-25 20:59:46 +09:00]] 版)
<https://code.google.com/p/chromium/issues/detail?id=294179>

[83] [CITE[SVG favicon support. | Microsoft Connect]]
([TIME[2015-06-25 21:00:28 +09:00]] 版)
<https://connect.microsoft.com/IE/feedback/details/782416/svg-favicon-support>

[84] [CITE@en[Bug 136059 – SVG favicon support]]
([TIME[2015-06-25 21:00:56 +09:00]] 版)
<https://bugs.webkit.org/show_bug.cgi?id=136059>

[86] [CITE[IRC logs: freenode / #whatwg / 20150728]]
([TIME[2015-07-29 12:51:46 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20150728#l-723>

[109] [CITE@en[294179 - Support SVG favicons - chromium - Monorail]]
([TIME[2017-01-16 00:38:30 +09:00]])
<https://bugs.chromium.org/p/chromium/issues/detail?id=294179>

[111] [CITE@en[SVG favicons – Welcome to the Windows developer feedback site!]]
([TIME[2017-01-16 00:39:30 +09:00]])
<https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/suggestions/6509196-svg-favicons>

[112] [CITE@en[Bitmap favicons? · Issue #10 · whatwg/meta]]
([TIME[2017-01-26 16:21:15 +09:00]])
<https://github.com/whatwg/meta/issues/10>

[159] [CITE@en[Support for SVG in favicons - Chrome Platform Status]], [TIME[2021-08-17T08:55:24.000Z]] <https://www.chromestatus.com/feature/5180316371124224>

** MIME 型

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

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

[64]
[[Windows]] の[CODE(fule)@en[.[[ico]]]]の場合は、[[媒体型]]を[CODE(MIME)@en[[[image/vnd.microsoft.icon]]]]にしておく必要があります。
[[Apache]]の場合は、[CODE(file)@en[[[.htaccess]]]]などで
[PRE(example)[
[[AddType]] [[image/vnd.microsoft.icon]] .[[ico]]
]PRE]

とすればおk。

* [CODE[rel=mask-icon]]

[79] [CODE[mask-icon]] 参照。

* 処理

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

;; [[navigate]] も参照。

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

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

-*-*-

[95] [[文書]][VAR[文書]]に[[リンク型]]が [CODE(HTML)@en[icon]] の[[リンク]]がない場合、
[[並列に]]、次のようにすることができます [SRC[>>92]]。
[FIG(steps)[
= [96] [VAR[文書]]が [[HTTP]] か [[HTTPS]] で得られたものでなければ、ここで停止します。
= [97] 新しい[[要求]]を作成し、[[fetch]] します。
[FIG(list members)[
[FIGCAPTION[
[[要求]]
]FIGCAPTION]

: [F[URL][要求のURL]] : [CODE[/favicon.ico]] を[VAR[文書]]の[F[番地][文書の番地]]について[[URLの解決]]を行った結果
: [F[クライアント]] : [VAR[文書]]の [F[[CODE(DOMi)@en[Window]]]] の[F[環境設定群オブジェクト]]
: [F[終点][要求の終点]] : [CODE[image]]
: [F[同期フラグ]] : [[真]]
: [F[credentialsモード]] : [CODE[include]]
: [F[URL credentials利用フラグ]] : [[真]]
]FIG]
[VAR[続きの処理]]は、 >>98 とします。
]FIG]

[98] [[fetch]] により得られた[[応答]][VAR[応答]]の処理は、次のようにします [SRC[>>92]]。
[FIG(steps)[
= [99] [VAR[応答]]の[F[非安全応答]]を、 [CODE(HTML)@en[icon]] で指定されたものとみなして処理します。
]FIG]

* レンダリング

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

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

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

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

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

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

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

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

-*-*-

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

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

-*-*-

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

** アニメーション

* セキュリティー

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

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

* キャッシュ

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

[69]
[CITE[A blog? with Σαιτω - Opera - favicon]] ([TIME[2007-10-06 16:23:49 +09:00]] 版) <http://d.hatena.ne.jp/saiton/20071003/1191401047>

* [CODE[icons]] (Web App Manifest)

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

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

* 歴史

- [9] Internet Explorer (Windows) (何版からでしたっけ?)
- [10] [[Mozilla]] (Mxx から)
- [11] [[emacs-w3m]]
- [12] [[Gnome]] かなんかに付属のブラウザが実装してたような。
- [13] 2002-11-04 (月) 18:27 ''>>9'' IE5 から。
- [18] >>10 0.9.6 からだそうです。
- [29] 最初期の WinIE では favicon.ico に悪意の code を仕掛けれる security hole があって、すぐに patch が出たそうです。
- [33] MacIE5 にはついてません。
- [37] 2002-11-04 (月) 20:48 ''>>10'' 従いまして、 [[Netscape]] 7 も実装しています。
- [38] 2002-11-04 (月) 21:04 ''>>12'' [[gnome]] じゃなくて [[KDE]] の [[konqueror]] ですか。
- [41] [WEAK[2002-12-01 (日) 11:44]] ''[[名無しさん]]'': [[Opera]] 6.05 ([[Win32]]) はまったく対応していない気がします。
- [42] [[emacs-w3m]]: 画像が表示可能な [[emacsen]] が必要ですね。 (最近ではもしかして [[bitmap]] があればいい?) [WEAK[(2002-12-03 (火) 20:49)]]
- [44] [[名無しさん]]: [[galeon]]:  [WEAK[(2002-12-27 20:59)]]
- [49] [[名無しさん]]: Mozilla: URI 欄の横やタブを使っている時はタブの端に表示されます。 [WEAK[(2003-01-11 16:36)]]

- [15] ''Internet Explorer 5 に備えて: Web サイト制作者のための Tips'' から、 ''お気に入りを目立たせる'' <http://www.microsoft.com/japan/msdn/web/ie/ie50/icpie5.asp>
- [23] ''favicon.ico を使ってサイトを目立たせよう!'' <http://www16.u-page.so-net.ne.jp/xb4/katsumi/os/windows/favicon/>
-- 消滅確認 [TIME[2021-01-29T03:55:15.00Z]]
-- [CITE@ja[favicon.ico を使ってサイトを目立たせよう!]], [TIME[2021-01-29T03:55:04.000Z]], [TIME[2002-06-16T21:33:57.723Z]] <https://web.archive.org/web/20020616213344/http://www16.u-page.so-net.ne.jp/xb4/katsumi/os/windows/favicon/>
- [25] ''[IE5] お気に入りに表示されるアイコンをカスタマイズする'' <http://support.microsoft.com/default.aspx?scid=kb;ja;JP415022>
- [39] ''Shortcut Icon (favicon) おぼえがき'' <http://www.remus.dti.ne.jp/~a-satomi/nikki/2002/12a.html#d01n01>
- [40] ''favicon.ico'' の [[MIME]] や [[HTTP]] などにおける[[媒体型]]について: [[ico形式]>>4]
- [45] [[HTML+]] の [[DTD]] <http://www.w3.org/MarkUp/htmlplus_paper/htmlplus.dtd>。驚くべきことに、 [CODE[<META NAME="Document-Icon" CONTENT="uri://of/icon">]] で icon in the hotlist and history list を指定するという、まさに現在の favicon に相当するものが説明されています (1994年!)。
- [51] ''Favicon.com - custom icons for your website!'' <http://www.favicon.com/> favicon で商売しているらしいですが、 favicon.com の名に恥じないだけの技術情報をちゃんと提供していて、商売一色でない辺りには好感が持てますね。 (とはいっても この WikiPage の方が情報は多いです:))
- [54] [[SuikaWiki]] での favicon については [[WikiIcon]] を参照。
- [55] >>15,>>23 目立つのは他の項目と違ったアイコンを使っているからで、(ry
- [56] >>51 こっちは情報は多いが整理されてないからな。
- [57] >>56 お前がしる!
- [59] ''アイコンでアクセスアップ'' <http://www.neodevice.com/favicon/> 厨房にはわかりやすい・・・のかな。ちゃらちゃらしてるし豆粒で目によくないし、内容も大して無いのでお勧めしませんが。
- [60] >>59 に限らず、この手の紹介サイトってなぜか、 [CODE(JS)[window.external.AddFavorite()]] もセットで紹介してますよね。 M$ が同時に実装したせいですか? 両方ともお気に入り関連ってだけでさしたる関係も見えないけどなあ。
- [62] >>45 その次に登場したのが、 [[WebTV]] の [[body]] 要素の [[logo]] 属性。
- [63] で、 [CODE[google.ico]] って一体何よ? 検索しても日本語では情報無し。

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

[68]
[CITE@en[jeff's WebLog : why doesn't the favicon for my site appear in IE7?]] ([CODE[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>
([[名無しさん]] [WEAK[2007-03-07 12:10:08 +00:00]])

[70] [CITE@ja[Favicon - Wikipedia]] ([TIME[2009-12-27 11:23:10 +09:00]] 版) <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] [CITE[IEはURLショートカットファイル(お気に入り)を作るときfaviconをNTFS代替ストリームに保存している - NO UIHARU, NO LIFE. - subtech]]
([TIME[2010-04-01 16:58:06 +09:00]] 版)
<http://subtech.g.hatena.ne.jp/mayuki/20100331/1270012707>

[180] [CITE[IRC logs: freenode / #whatwg / 20100414]], [TIME[2021-08-17T09:42:44.000Z]] <https://krijnhoetmer.nl/irc-logs/whatwg/20100414#l-569>

[181] [CITE@en[rel="shortcut icon" considered harmful · Mathias Bynens]], [TIME[2021-08-17T09:43:20.000Z]] <https://mathiasbynens.be/notes/rel-shortcut-icon>

[72] [CITE@en[Web Applications 1.0 r5904     mention /favicon.ico]]
( ([TIME[2011-02-17 11:23:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=5903&to=5904>

[73] [CITE[IRC logs: freenode / #whatwg / 20110518]]
( ([TIME[2011-05-21 15:18:09 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20110518>

[74] [CITE@en[Web Applications 1.0 r8558  rel='shortcut icon' requirement changes; extra sample table for sorting]]
( ([TIME[2014-04-01 13:40:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8557&to=8558>

[75] [CITE@en[Fun with Favicons - IEInternals - Site Home - MSDN Blogs]]
( ([TIME[2014-07-29 12:55:58 +09:00]] 版))
<http://blogs.msdn.com/b/ieinternals/archive/2013/09/08/internet-explorer-favicons-png-link-rel-icon-caching.aspx>

[76] [CITE@en[Web Applications 1.0 r8558  rel='shortcut icon' requirement changes; extra sample table for sorting]]
([TIME[2014-04-01 13:40:00 +09:00]] 版)
<https://html5.org/r/8558>

[FIG(quote)[
[FIGCAPTION[
[77] [CITE@en[Make your site shine in Speed Dial - Dev.Opera]]
([TIME[2015-03-22 00:53:58 +09:00]] 版)
<https://rawgit.com/operasoftware/devopera-static-backup/master/http/dev.opera.com/articles/view/opera-speed-dial-enhancements/index.html#setanicon>
]FIGCAPTION]

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

]FIG]

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

[91] [CITE@en[Integrate Fetch into HTML · whatwg/html@7c5555a]]
([TIME[2015-09-18 18:53:09 +09:00]] 版)
<https://github.com/whatwg/html/commit/7c5555a16f2920c02244c10756bb2f1a11e87a22>

[94] [CITE@en[Allow <link> in body for external resource links by igrigorik · Pull Request #616 · whatwg/html]]
([TIME[2016-03-04 21:45:26 +09:00]] 版)
<https://github.com/whatwg/html/pull/616>

[FIG(quote)[
[FIGCAPTION[
[101] ([TIME[2016-04-18 15:22:20 +09:00]] 版)
<http://www.r-store.jp/newarrival>
]FIGCAPTION]

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

]FIG]

[FIG(quote)[
[FIGCAPTION[
[102] ([TIME[2016-04-25 13:03:43 +09:00]] 版)
<https://www.fullspeed.co.jp/>
]FIGCAPTION]

> 
> <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" />

]FIG]

[FIG(quote)[
[FIGCAPTION[
[103] ( ([TIME[2016-05-11 17:00:29 +09:00]]))
<http://prtimes.jp/>
]FIGCAPTION]

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

]FIG]

[105] [CITE@en[Use URL's HTTP(S) scheme concept and define rel=icon better]]
( ([[annevk]]著, [TIME[2016-05-26 21:59:00 +09:00]]))
<https://github.com/whatwg/html/commit/a932f7dfd5e50101db47a373cee27b04ed108934>

[106] [CITE@en[Align Fetch's destination concept with changes in Fetch]]
([[sideshowbarker]]著, [TIME[2016-07-05 02:46:14 +09:00]])
<https://github.com/whatwg/html/commit/5e8f96a85d182d36c177db0d6fdde58b4ded86d4>

[FIG(quote)[
[FIGCAPTION[
[107] [CITE[ios - (How) Can a web site determine if Safari Private Browsing is turned on? - Ask Different]]
([TIME[2016-07-10 13:15:48 +09:00]])
<http://apple.stackexchange.com/questions/131587/how-can-a-web-site-determine-if-safari-private-browsing-is-turned-on>
]FIGCAPTION]

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

]FIG]

[118] [CITE@en[Fetch removes type in favor of just destination]]
([[annevk]]著, [TIME[2017-08-21 16:37:50 +09:00]])
<https://github.com/whatwg/html/commit/5f59b7a73d450e244a573e5916deb1c2037c1366>

[119] [CITE@en[Resolving modules via definition · Issue #3056 · whatwg/html]]
([TIME[2017-09-21 12:28:14 +09:00]])
<https://github.com/whatwg/html/issues/3056>

[FIG(quote)[
[FIGCAPTION[
[120] [CITE@en[Deep Dive into the Payment Request API  |  Web Fundamentals  |  Google Developers]]
([TIME[2017-09-27 01:14:33 +09:00]])
<https://developers.google.com/web/fundamentals/payments/deep-dive-into-payment-request?hl=ja>
]FIGCAPTION]

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

]FIG]

[122] [CITE@en[Define a favicon to show in search results - Search Console Help]]
([TIME[2019-07-10 08:20:17 +09:00]])
<https://support.google.com/webmasters/answer/9290858?hl=en>

[123] [CITE@en[A New Design for Google Search on Mobile]]
([TIME[2019-07-10 08:20:51 +09:00]])
<https://www.blog.google/products/search/new-design-google-search/>

[FIG(quote)[
[FIGCAPTION[
[127] [CITE@ja[DuckDuckGoのWebブラウザー、アクセス先ドメインの情報を収集しているとの批判を受けて修正 | スラド IT]]
([TIME[2020-07-07 17:32:07 +09:00]])
<https://it.srad.jp/story/20/07/06/176231/>
]FIGCAPTION]

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

]FIG]

[128] [CITE[JSON Feed - JSON Feed Version 1.1]]
([TIME[2020-08-11T17:02:07.000Z]], [TIME[2020-10-07T02:57:37.102Z]])
<https://jsonfeed.org/version/1.1#top-level>

[182] [CITE@en[1162276 - SVG favicon is not loading if atribute "sizes" is present, instead regular favicon loads - chromium]], [TIME[2021-08-17T09:44:18.000Z]] <https://bugs.chromium.org/p/chromium/issues/detail?id=1162276>

[184] [CITE[ねこめしにっき(2002年12月上旬)]]
([TIME[2006-01-05T18:45:03.000Z]], [TIME[2022-06-14T12:34:38.981Z]])
<http://www.remus.dti.ne.jp/~a-satomi/nikki/2002/12a.html#d01n01>

[185] 
[CITE@en[1711622 - Consider explicitly listing image/svg+xml in the Accept header for images (for favicons?)]], [TIME[2024-03-25T10:17:57.000Z]] <https://bugzilla.mozilla.org/show_bug.cgi?id=1711622>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)