ファビコンにSVGを設定する

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

こんにちは田村です。

ファビコンには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/


全 1 件中 1 〜 1 件目を表示

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから