うちの社内向けのホームページでSVGを使ったfaviconを追加してみたのですが、ChromeだとSVGが優先とならないですね。こちらの質問にある通りです。
ドキュメントでは
もし複数のアイコンが同等に適切であれば、最後の一つが使用されます。
とありますので、
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
の記載でSVGが選択さそうなものですが、実際にはICOファイルのほうになります。上記質問ではICOのsizes指定を16x16にすればいいとのコメントがありますが、ICOファイルしか認識しないブラウザーで副作用がありそう。
Firefoxでは上の記述でちゃんとSVGがfaviconになりますので、いまのところChromeの仕様っぽいです。
だけにすればSVGのアイコンになるのですが、まだ他のブラウザーもあるのでICOファイルをなくすのはまだ先になりそう。ということでしばらくはSVGのアイコンは使われない状況が続きそうです。
