スタッフブログ
ファビコンにSVGを設定する
こんにちは田村です。
ファビコンにはSVGを指定することができます。
次のような形式で「SVGのソース」をご自身のSVGに変更してください。
注意点として「"」を「%22」、「#」を「%23」に置き換え、すべてを1行にして配置してください。
<link
rel="icon"
type="image/svg+xml"
href="data:image/svg+xml,SVGのソース"
/>
Can I use...を見てみるとSafariはSVG faviconsに対応できていないようです。
念の為、apple-touch-icon.pngなどpngも用意しておくと良さそうです。
https://caniuse.com/?search=favicon
ファビコンのジェネレーター使うのも良いと思います。
Favicon Generator. For real.
https://realfavicongenerator.net/
SVGOMG - SVGO's Missing GUI
https://svg.deblan.org/
この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
ましじめのスキルが必要ですか？
遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートいたします。