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.
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.
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
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
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
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
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
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!
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
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.
yess!!! such an awesome trick
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.
yeah its a cool feature! 🙌
Awesome video Colby 🎉🙌🏻
This will be handy to use on my sites.
thanks! 🙌
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. 🙌
glad it helped out!
I always pronounced it favicon, not favicon.
oh i thought it was favicon
Yeah, I'm pretty sure it is favicon.
I can read this.
yes, thats favicon for sure.
Me too.
Finally, someone to talk about this 💯🔥
🙌
You said “different strokes” and my brain immediately went “whatcha talkin about Willis??”
lmao been a minute since i heard that
Great tips here! Thanks Colby!
no problem!
this video is a banger
thanks! 🙌
amazing content :)
thank you!
Why not js to watch for theme updates, so we can get a live update on toggling the theme ?
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
A better way to clear Safari favicon cache is to turn on developer mode and then empty cache for the site.
ah interesting, will try that. was trying to search all over and that was the best i could find. thanks for the tip!
Can i use .png icon instead of .ico for the backup?
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
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
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
How can we create an animated Favicon?
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
@@colbyfayock Can you use css animations or something like that haha
@@JakobRossner-qj1wo haha not that im aware of, i wish
pwa tutorial please
Fave Icon? Are you serious? 😂
Is your figma the beta?
that sounds familiar, but not totally sure, version says 124.3.2
A lot of voodoo here...
👀
but it has to be 16x16 not 1024x1024 dude.
Wtf mannnnnnn this doesn't help me at all
Its pronounced fah-vee-con not fay-vigh-con 😕 that bothered me hearing it wrong so many times ngl
🤷♂
Mute the video lol. My God …
I mean he said ping instead of PNG
@@user-qp2xq5zz8z yeah id say thats more common than any variation of favicon lol
Nice vid...but seriously it's not pronounced fave-icon, it's favicon (like how slav isn't the same as slave)
that's what Big Favicon wants you to think 🤐
WTF is a favicon? I thought it was called a favicon!!!
no, its favicon!
when web got so complicated? ugh
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!
@@colbyfayock that's why I will just add a dark bg to the favicon in PNG format (as your JS one). Easy and simple.
@@renatofrota definitely a simpler route, there's something nice imo about the icon without the background when you can
So many words and so little substance. This could have been a 5 minute video 😑