Chrome 80 からfaviconにSVG画像を指定できるようになっているみたいなので、試してみました。
Support for SVG in favicons - Chrome Platform Status
ソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/svg+xml" href="https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light">
</head>
<body>
</body>
</html>
SVG画像には適当にSVGを返してくれるサービスを利用しました。
(Lorem Picsum のSVG版みたいなサイトを探しましたが、見つかりませんでした。誰か教えてください。)
↓のような書式でSVGファビコンの指定ができます。
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
仕様 にも
The any keyword represents that the resource contains a scalable icon, e.g. as provided by an SVG image.
Google翻訳「anyキーワードは、リソースにスケーラブルアイコンが含まれていることを表します。 SVG画像によって提供されます。」
と書かれているので、なくても動きますが sizes="any"
を書いておきます。
そういえば、Link type "icon" の説明に出てくる例で、属性値がダブルクォートで囲まれてないんですが、そういうものなんですかね?
違和感しかないです。