スタッフブログ
ファビコンにテキストや絵文字を設定する
こんにちは田村です。
ファビコンには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/
この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
ましじめのスキルが必要ですか？
遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートいたします。