ましじめ株式会社

この記事は最終更新日から2年以上経過しています。

ファビコンにテキストや絵文字を設定する

公開日：

更新日：

スタッフブログ

こんにちは田村です。

ファビコンにはSVGを指定することができますが、SVGを利用してテキストや絵文字を設定することができます。

<link
  rel="icon"
  type="image/svg+xml"
  href="data:image/svg+xml,SVGのソース"
/>

テキスト

<link
  rel="icon"
  type="image/svg+xml"
  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22white%22>ま</text></svg>"
/>

絵文字

<link
  rel="icon"
  type="image/svg+xml"
  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>?</text></svg>"
/>

Can I use...を見てみるとSafariはSVG faviconsに対応できていないようです。
念の為、apple-touch-icon.pngなどpngも用意しておくと良さそうです。
https://caniuse.com/?search=favicon

Favicon Generator. For real.
https://realfavicongenerator.net/

この記事をシェアする