SVG形式のfaviconをダークモードに対応させる方法
2021.12.20 Posted by Coding_team
こんにちは、ウェブラボクリエイターズメモです。
OSのテーマカラーを暗くする「ダークモード」。
2020年頃からトレンドになっており、多くのOSやアプリ、ウェブサイトもこのダークモードに対応したものが増えてきています。
詳しくは過去の記事でも触れていますので、気になる方はぜひご覧ください。
2020年のWebデザイントレンド「ダークモード」とは？
→弊社デザイナーの記事です！
それでは本題
今回はfaviconをダークモードに対応させる方法をご紹介します。
まず前提として
・faviconはSVG形式で作成する
・Mac Safariでは未対応なので、従来のico(またはpng)も併記する(2021年12月現在)
という点に注意が必要です。
SVGの記述方法
SVGのソースに<style>タグを作成し、以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<svg ・・・> <style type="text/css"> /*基本の色を設定*/ .st0{ fill: #ff0000; } @media (prefers-color-scheme: dark) { /*ここにダークモードの色を設定*/ .st0{ fill: #0000ff; } } </style> <g> <path class="st0" d="・・・"></path> <path class="st0" d="・・・"></path> <path class="st0" d="・・・"></path> <path class="st0" d="・・・"></path> </g> </svg> |
今回はフリーのアイコンをお借りして
通常モードで赤、ダークモードで青になるSVGアイコンを作成しました。
これをSafari用にico(またはpng)としても書き出し、<head>タグに記述しましょう。
|
1 2 |
<link rel="icon" sizes="16x16" href="favicon.ico"> <link rel="icon" type="image/svg+xml" href="favicon.svg"> |
これで完了です。
faviconを黒っぽくしている場合、ダークモードで見えづらいなんて場合もあるかもしれません。
そんなときに便利ですね！
以上、ウェブラボクリエイターズメモでした。
関連記事こちらの記事も合わせてどうぞ。
