東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

SVG形式のfaviconをダークモードに対応させる方法

2021.12.20 Posted by

darkこんにちは、ウェブラボクリエイターズメモです。

OSのテーマカラーを暗くする「ダークモード」。
2020年頃からトレンドになっており、多くのOSやアプリ、ウェブサイトもこのダークモードに対応したものが増えてきています。

詳しくは過去の記事でも触れていますので、気になる方はぜひご覧ください。

 

【CSS】ダークモードに対応する

 

2020年のWebデザイントレンド「ダークモード」とは?
→弊社デザイナーの記事です!

それでは本題

今回はfaviconをダークモードに対応させる方法をご紹介します。

まず前提として
・faviconはSVG形式で作成する
Mac Safariでは未対応なので、従来のico(またはpng)も併記する(2021年12月現在)
という点に注意が必要です。

 
Can I use

SVGの記述方法

SVGのソースに<style>タグを作成し、以下のように記述します。

今回はフリーのアイコンをお借りして
通常モードで、ダークモードでになるSVGアイコンを作成しました。

これをSafari用にico(またはpng)としても書き出し、<head>タグに記述しましょう。

これで完了です。

 

デモはこちら

 

faviconを黒っぽくしている場合、ダークモードで見えづらいなんて場合もあるかもしれません。
そんなときに便利ですね!

以上、ウェブラボクリエイターズメモでした。

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278