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: spacejelly.dev...
🧰 Resources
Tutorial: spacejelly.dev...
Code: github.com/col...
Demo: spacejelly.dev/ Favicon
dev.to/masakud...
📺 RUclips: ruclips.net/user/co...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayoc...
🎥 What I Use: www.colbyfayoc...
#colbyfayock #nextjs #favicon #javascript #html #image #darkmode #webdevelopment

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@guillermo.avalos]

I always pronounced it favicon, not favicon.

[@colbyfayock]

oh i thought it was favicon

[@hosea_br]

Yeah, I'm pretty sure it is favicon.

[@iambasantarai]

I can read this.

[@eshwargetenv1]

yes, thats favicon for sure.

[@FranciscoMarcosMilhomemAbreu]

Me too.

[@justingolden87]

I knew you could use svg favicons (with so-so support) and I knew you could add style tags inside SVG and use currentColor, and I knew about prefers media, but I *didn't* know you could use prefers media INSIDE the SVG! That's so cool.

[@colbyfayock]

yess!!! such an awesome trick

[@tienvohoang5359]

I didn't know that we can mutate the meta tag like favicon. Thanks a lot for the tutorial. I'm really looking forward for your upcoming Next.js course.

[@colbyfayock]

yeah its a cool feature! 🙌

[@cb73]

You said “different strokes” and my brain immediately went “whatcha talkin about Willis??”

[@colbyfayock]

lmao been a minute since i heard that

[@eip408]

this small details matter. thanks for the tuts Colby instant sub. I was actually wondering how to do it the right way for a long time now. 🙌

[@colbyfayock]

glad it helped out!

[@jdhillen]

Great tips here! Thanks Colby!

[@colbyfayock]

no problem!

[@aaronkaiser]

A better way to clear Safari favicon cache is to turn on developer mode and then empty cache for the site.

[@colbyfayock]

ah interesting, will try that. was trying to search all over and that was the best i could find. thanks for the tip!

[@iPuppyTech]

Why not js to watch for theme updates, so we can get a live update on toggling the theme ?

[@colbyfayock]

definitely a valid solution! i find the CSS approach to be a bit simpler particularly around defining the colors via SVG, but no reason you couldn't do it with JS

[@tamaniphiri]

Finally, someone to talk about this 💯🔥

[@colbyfayock]

🙌

[@justingolden87]

Is there any worry if you set sizes to 48x48 and safari uses the ico and chrome uses the svg, but is it possible a browser sees 48x48 like chrome and ignores the ico but also doesn't support svg? In otrher words, if I have both of these, is it possible some browsers still won't display a favicon

[@colbyfayock]

good question! and looks like i forgot to add the link i was talking about to the description: dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7
from what i'm understanding reading through their post having those 2 options should be safe

[@KhairulHidayat]

Can i use .png icon instead of .ico for the backup?

[@colbyfayock]

PNG has pretty broad support: caniuse.com/link-icon-png
but at the size it's being shown it wont really make a difference unless you have a good reason to use PNG vs ICO

[@BliitzPint]

Fave Icon? Are you serious? 😂

[@alexlynpi]

Is your figma the beta?

[@colbyfayock]

that sounds familiar, but not totally sure, version says 124.3.2

[@JakobRossner-qj1wo]

this video is a banger

[@colbyfayock]

thanks! 🙌

[@PicSta]

A lot of voodoo here...

[@colbyfayock]

👀

[@Collect-AI]

How can we create an animated Favicon?

[@colbyfayock]

The trick would be to use the method I shared in there, by programmatically updating the favicon, but doing so in a way that you're updating it frame by frame, which can be a bit of work depending on the scenario, but could be a great effect depending on the scenario
here's an older article that walks through an example: css-tricks.com/the-making-of-an-animated-favicon/
the idea there is the image is programmatically generated, so it's not like you're saving it out frame by frame, but thats certainly an option

[@JakobRossner-qj1wo]

@@colbyfayock Can you use css animations or something like that haha

[@colbyfayock]

@@JakobRossner-qj1wo haha not that im aware of, i wish

[@learningwithaaron]

Its pronounced fah-vee-con not fay-vigh-con 😕 that bothered me hearing it wrong so many times ngl

[@colbyfayock]

🤷‍♂

[@danielzaremba2677]

Mute the video lol. My God …

[@user-qp2xq5zz8z]

I mean he said ping instead of PNG

[@colbyfayock]

@@user-qp2xq5zz8z yeah id say thats more common than any variation of favicon lol

[@stonebubbleprivat]

So many words and so little substance. This could have been a 5 minute video 😑

[@LukeWatts85]

Nice vid...but seriously it's not pronounced fave-icon, it's favicon (like how slav isn't the same as slave)

[@colbyfayock]

that's what Big Favicon wants you to think 🤐

[@philipehusani]

WTF is a favicon? I thought it was called a favicon!!!

[@colbyfayock]

no, its favicon!

[@renatofrota]

when web got so complicated? ugh

[@colbyfayock]

definitely some truth to this! and unfortunately the complicated part here is the mixed browser support and quirks to get what we need. this is the type of thing that should certainly be standard across all browsers!

[@renatofrota]

​@@colbyfayock that's why I will just add a dark bg to the favicon in PNG format (as your JS one). Easy and simple.

[@colbyfayock]

​@@renatofrota definitely a simpler route, there's something nice imo about the icon without the background when you can