Uploaded November 2025 | Updated September 2026, 1 week ago

---

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.

Subscribe to my Newsletters
💌 CSS Weekly: css-weekly.com
🤖 AI Developer: aideveloperweekly.com

📖 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

Help support my channel
💖 Become a member on Patreon: patreon.com/cssweekly
☕️ Buy Me a Coffee: buymeacoffee.com/cssweekly
🪧 Buy CSS Stickers pack: stickers.css-weekly.com
👨‍🎓 Get a course: masteringlinting.com

Keep up-to-date with CSS Weekly:
🦋 Bluesky: https://bsky.app/profile/cssweekly.com/
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #favicon