How To Create an Adaptive SVG Favicon Using the prefers-color-scheme Media Query

VideoZoran Jambor

Find out how to create an adaptive favicon that automatically switches to a light/dark color scheme.

Find out how to create an adaptive favicon that automatically switches to a light/dark color scheme using SVG icon format and prefers-color-scheme media query.

Chapters

  • 00:00 How to prepare a favicon design in graphics editing software
  • 01:44 How to add CSS prefers-color-scheme to favicon SVG
  • 03:11 How to add favicon to the head of the website with link tags
  • 03:44 How to test adaptive favicon in the browser
  • 04:37 How to change SVG favicon color using CSS
faviconsvgprefers-color-schememedia query
ADCrazy Egg

One CSS change broke checkout. Nobody noticed until users did.

ADBuild any web layout, with confidence.

Build any web layout, with confidence.

Baseline Status for Video

Baseline Status for Video

A handy online tool that will let you easily show Baseline Status in your videos.

Try It Now »
Mastering Linting

Mastering Linting

Get proficient with the best linting tools, Prettier & Stylelint.

Enroll Now »