Favicons the Right Way

[@colbyfayock]

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

[@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

[@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.

[@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!

[@petecapecod]

Awesome video Colby 🎉🙌🏻 This will be handy to use on my sites.

[@colbyfayock]

thanks! 🙌

[@tamaniphiri]

Finally, someone to talk about this 💯🔥

[@colbyfayock]

🙌

[@jdhillen]

Great tips here! Thanks Colby!

[@colbyfayock]

no problem!

[@JakobRossner-qj1wo]

this video is a banger

[@colbyfayock]

thanks! 🙌

[@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

[@GerardoScript]

amazing content :)

[@colbyfayock]

thank you!

[@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

[@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!

[@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

[@mzafarr]

pwa tutorial please

[@alexlynpi]

Is your figma the beta?

[@colbyfayock]

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

[@PicSta]

A lot of voodoo here...

[@colbyfayock]

👀

[@BliitzPint]

Fave Icon? Are you serious? 😂

[@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

[@SO-fb4ef]

but it has to be 16x16 not 1024x1024 dude. Wtf mannnnnnn this doesn't help me at all

[@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

[@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!

[@stonebubbleprivat]

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