0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

faviconにSVG画像の指定がサポートされたようなので、試してみる

Posted at

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 in favicon

↓のような書式で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" の説明に出てくる例で、属性値がダブルクォートで囲まれてないんですが、そういうものなんですかね?
違和感しかないです。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?