2020.06.08

ついに対応！ファビコンにSVGファイルを使う方法

ホームページのユーザービリティを高めるために、ファビコンはとても大切です。

会社のブランドイメージを伝えたり、WEBブラウザでたくさんのタブを開いた時に埋もれてしまうのを防ぐ役割がファビコンにはあります。

以前、サイズの違う複数のファビコンを一つにまとめることができる、「マルチアイコン」について記事にまとめました。

今回はSVGファイルを使ったファビコンの設定についてまとめていきます。
SVGファイルを使うことで、サイズを気にすることなく綺麗なファビコンを作ることができます。

SVGの特徴とファビコンに使用できるメリットについて

まずはSVGについて簡単に触れておきます。

SVGとは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で、拡大したり縮小しても形が崩れないベクターデータのことです。

通常のpngやjpegはピクセルの集まりなのに対し、SVGは座標と数式から構成されています。

先ほどpngやjpegはピクセルの集まりという説明をしましたが、ファビコンはサイズが小さく、そこに使えるピクセル数は極々限られたものです。

ブラウザのファビコンサイズは

このようなサイズになっています。

ピクセル数が足りなく、表現しきれないファビコン画像はつぶれたり、にじんだりと残念な仕上がりになります。

そこで自由に縮小・拡大ができるSVGの強力な特徴が力を発揮します。

前置きが長くなってしまいましたが、いよいよファビコンにSVGファイルを設定する方法について説明していきます。

とても便利なSVGを使ったファビコンですが、残念ながらIE9は非対応です。

そこでSVGファイルとは別に、従来通りのpngファイルも一緒に設定してあげなければいけません。

<head>
<link rel="icon" href="ファビコンへのパス/favicon.png" type="image/png">
<link rel="icon" href="ファビコンへのパス/favicon.svg" type="image/svg+xml">
</head>

上記のように、headタグに従来通りpngのファビコンを読み込み、SVGのファビコンに対応しているブラウザに対しては、SVGで上書きしてあげます。

typeはSVGを表す「svg+xml」に変更します。

WordPressの「外観」＞「カスタマイズ」で「サイトアイコンの選択」からファビコンの設定ができますが、そもそもWordPressのメディアアップローダーがSVGファイルに対応していません。

なのでテーマのheader.phpに手作業で上記のコードを記述しなければいけません。