SVGファビコンガイド

0 0 64 64のような正方形のviewBoxを使い、シンボルの周囲に余白を残します。viewBoxは座標系を定めるもので、表示時の物理サイズを固定しません。

特徴的な形だけに絞ってください。ベクターとして鮮明でも、細かな装飾、小さな抜き部分、単語全体は16ピクセルでは消えてしまいがちです。

必要なスタイルはSVG内部に埋め込みます。特定の書体に依存する文字はパスへ変換してください。この用途では外部Webフォントに頼れません。

スクリプト、リモートリンク、不要な編集ソフトのメタデータを削除します。図形とスタイルを簡素にすると、安全性の確認も容易になり、容量も減らせます。

最後にブラウザでファイルを単独で開き、オフラインでテストします。表示が変わったり消えたりするなら、まだ外部リソースに依存しています。埋め込むか置き換えてください。

link rel iconにtype image/svg+xmlとルート相対URLを指定します。SVGを選ばないクライアントやICOを直接要求するクライアント向けに、ルートのfavicon.icoも残してください。

SVGはApple Touchアイコンやマニフェストアイコンの代わりにはなりません。これらには不透明またはマスク可能なPNGを書き出してください。

style要素内のprefers-color-schemeルールで、ダークモード時のfillやstrokeを変更できます。まず使いやすい既定色を設定し、対応環境での追加改善としてバリエーションを加えましょう。

実際のタブと複数の拡大率で確認します。SVGが選ばれない場合の代替も調べてください。ICOが暗い背景に溶け込むなら、そのクライアントでは問題が残ります。