最近ダークモードと呼ばれる機能に対応したアプリが増え、それと同じようにWebサイトでもダークモードに対応しているものを見かけるようになりました。
今回はWebサイトの中でファビコンを1サイズで用意して、さらにそのファビコンをダークモードに対応させてみたいと思います。
ダークモードって何？
ダークモードとは画面の色を反転して表示するスマホやタブレットに追加された機能となります。
iPhoneやiPadなどが先行iOS13のリリースの際に実装しました。
たとえば、一般的なアプリの背景は白だったかと思いますが、ダークモードをオンにしているときは背景の色が暗めの配色となり、文字色が反対に明るめの配色になったりします。
この機能は光が抑えられるため、目に優しかったりすると言われてます。さらに、画面の発光を抑えられるため、バッテリーの持ちも良くなるとのことでした。
このダークモード機能がMacやWindowsなどのパソコンでも使用可能となり、それに伴ってブラウザでも使えるようになりました。
WEBサイトをダークモードに対応
Webサイトを構築する際に、今までのCSSは下記のような記述になっていたかと思います。
body {
background-color: #FFF;
color: #000;
}
背景を白にして、文字色を黒にするといったような記述です。
この場合、ダークモードに対応した端末で見た場合に、ダークモードがONであるにもかかわらず、背景が白のサイトが表示されてしまいます。
これをダークモードに対応させると、
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #fff;
}
}
上記のCSSのように @media (prefers-color-scheme: dark) を追記して、ダークモードの場合は別のCSSで上書きをしてやる必要があります。
実はこの機能を使うことで、ファビコンも色を変えて、ダークモードに対応させることができてしまうのです。
ファビコンは1つ
今まで、ファビコンは大量に設置する必要がありました。
全部設置仕様となると、50個近くのファイルを読み込んで、metaに記述する必要がありました。
そんな手間をしたくないと思います。
そもそも、そんなに大量のファビコンは必要でしょうか？
モダンブラウザと呼ばれる最新のブラウザのみに対応であればファビコンは1つで十分です。
「サイズごとに用意する必要があるのに、そんなことないだろ」と思われるかもしれませんが、近年のブラウザはSVGと呼ばれる形式の画像に対応しております。
この画像は従来のピクセルデータではなく、ベクターデータと呼ばれる座標で画像を構築してます。
座標データなので、縮小、拡大しても画質は綺麗なままです。
それではSVGでファビコンを作ったらどうでしょうか？
そうです。大量のサイズを用意しないで、1ファイルでファビコンを用意できてしまうのです。
ファビコンを設置
ファビコンをIllustratorやXDで作成して、SVG形式で保存します。
作成したファビコンをWebサイトに反映します。
<link rel="icon" href="favicon.svg" type="image/svg+xml">
head部分に上記のlinkタグを記述します。hrefの部分は適宜変更してください。
これでファビコンをSVG化することができました。
ファビコンをダークモードに対応させる
ダークモードに対応させるためにはもうひと工夫必要です。さきほど作成したファイルを開いて、CSSのスタイルを追加します。
Illustratorで色を塗っていた場合、styleタグに色情報が記述されているかと思います。
そこに、@media (prefers-color-scheme: dark) でダークモードの際の色を指定します。
fillはSVGの塗りつぶしを意味してます。
<style type="text/css">
.st0 { fill: #34495E; }
@media (prefers-color-scheme: dark) {
.st0{ fill:# FFF; }
}
</style>
これでfaviconもダークモード対応できました。
実際にブウラウザでアクセスして、ダークモードを切り替えると確認できるかと思います。
まとめ
今まで大量のfaviconを用意して、metaタグに記述していましたが、モダンブラウザになると、SVGファイル1つでさまざまなサイズに対応可能です。しかも画質がきれいなので、高画素端末で見ても安心です。
さらに、SVGファイルのファビコンであればファイル自体にcssのスタイルを記述できるので、@media (prefers-color-scheme: dark) を使ってダークモードに対応することもできます。
こうした小さなUI、UXの改善がウェブサイトの大きな改善につながるのではないかと思います。
みなさんも、ぜひダークモードに対応したおしゃれなファビコンを設置してみませんか？
