2021年4月9日

svgファビコンの設置とダークモード対応

HTML/CSS 学習

この記事は1年以上前に投稿された記事です。情報が古い可能性があります。

ファビコン（ブラウザタブ等に表示されるアイコン）をsvgファイルで設置し、かつ、ダークモード対応させる。

webページのトレードマークとなるファビコン（favicon）。数年前まではicoファイルに変換しなければならないとか、様々な解像度のモニターにあわせて複数サイズのpngファイルを用意しないといけないとかの面倒がありました。

しかし現在の主要なブラウザはベクター形式のsvgファビコンに対応しているので、複数ファイルに書き出す必要がない上、ダークモードの場合にcssで色を変えることが可能です。

svgファビコンの設置

Adobe Illustrator 等で正方形のアートボードでパスデータを作成し、svgで書き出し。

必要に応じて SVGOMG などで最適化し、htmlのhead内に記述。

<head>
  ...
  <linkrel="icon"href="favicon.svg"type="image/svg+xml"> 
  ...
</head>

type="image/svg+xml" をつけるのがミソのようです。

svgファビコンのダークモード対応

2010年代後半から実用化され始めたダークモードでは、黒背景に白文字が基本となります。これまでのビットマップ形式のアイコンでは、黒系のロゴだと背景との区別がつかなくなるので白を敷いてあげる等の処置が必要でしたが、svgファイルならダークモード時だけ塗り色を変える、ということが可能です。

前項で書き出したsvgファイルをエディタで開き、style部分にcssを記述します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <style>
      path{
        fill:#000;
      } 
      @media (prefers-color-scheme: dark) {
        path{
          fill: #fff;
        }
      }
    </style>
  <path ... >
</svg>

@media (prefers-color-scheme: dark) {} 内に記述したものが、ダークモード時に反映されます。

上記だと、pathの色を通常（ライトモード）時は #000 の黒塗り、ダークモード時は #fff の白塗りにできます。

IE対応

IEはsvg faviconに対応してないので、IE対応が必要な場合はicoやpngファイルを用意し併記します。

<link rel="shortcut icon" href="favicon.ico"/>
<link rel="icon" href="favicon.svg" type="image/svg+xml"/>

参考

SVG形式のファビコンを設置しよう | Webクリエイターボックス
https://www.webcreatorbox.com/tech/svg-favicon

最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる – GIGAZINE
https://gigazine.net/news/20201225-how-to-make-favicon/