Favicons the Right Way

Add adaptive SVG favicons with light and dark mode that update on inactive tabs.

We'll see how we can set up SVG icons with fallback .ico files where browsers don't support them, use CSS media queries inside of SVG files to set up light mode and dark mode versions, and how to dynamically update favicons to different versions when the browser tab is inactive.

Get exclusive access to my upcoming course: https://spacejelly.dev/nextjs

🧰 Resources

Tutorial: https://spacejelly.dev/posts/light-da...
Code: https://github.com/colbyfayock/spacej...
Demo: https://spacejelly.dev/ Favicon

https://dev.to/masakudamatsu/favicon-...


📺 YouTube: https://youtube.com/colbyfayock?sub_c...
🐦 Twitter:   / colbyfayock  
📹 Twitch:   / colbyfayock  
✉️ Newsletter: https://www.colbyfayock.com/newsletter/

🎥 What I Use: https://www.colbyfayock.com/uses

#colbyfayock #nextjs #favicon #javascript #html #image #darkmode #webdevelopment