Hasty Treat - The Surprisingly Exciting World of Favicons

CSM. Welcome to syntax. In this Monday hasty treat, we're gonna be talking about The surprisingly exciting world of favicons or fave icons, whatever you'd like to pronounce it as. These are the little that little tiny little icon that's up In in the tab of your web browser, it allows you to distinguish what sites you're using when you're not focused on that. Perhaps you have tons of tabs, and all you could see are the favicons.

Either way, we have some really interesting little things to talk about here. The FeffiCon is a bit of a I don't wanna say it's a that people don't really spend any time talking about. So I think it's a really interesting topic. My name is Scott Kalinski. I'm a developer from Denver, Colorado, and with me as always is Wes, Favicon master boss.

For once, we're on the same page of how to pronounce something. People that say fave icons. Oh, yeah. Yeah. You can they can get out of here.

Famicon is where I'm at. Yeah. Famicon is where I'm at as well. It's like a Fava bean. That's where it comes from, actually. It was initially a little bean. Fava Fava Con. It was a Java based, website, And they put a Fava bean up in the top.

Oh, you're not riffing. I thought you're making a joke on this. You're No. No. That's that's actually Is that truthful? No. No. That's where it came from. Look it up on Wikipedia. I thought you were pulling my leg there. I was I was, like, blowing you off because I thought you were joking. No. Look up look up Favicon,

Favicon on Wikipedia.

1997.

Jared Smith was The creator of the fava bean favicon when he introduced the 1st website with the fava bean icon.

He was a architect at Sun Microsystems Java.

This sounds all like it sounds very interesting. I had no idea.

The excitingly surprising surprisingly exciting world of favicons is sponsored today by Sanity and LogRocket.

Now LogRocket is the perfect place for you to see all of your errors and exceptions happen.

Were you trying to do some fancy JavaScript that Inserted a favicon and it broke your site? Well, you can find that out.

Maybe you have a user initiated favicon change, and that code broke your site. So now you get to see how the user did it. They click this button, and then you get an error in your console. Well, that's a total mystery unless you're using LogRocket, which allows you to See a scrubbable video replay of the error happening along with any of the stuff that you would want from the browser, like the console log, the error, the network tab. Anything you could possibly imagine is there with LogRocket. So check it out at logrocket.comforward/syntax.

Sign up and get 14 days for free. There's an on premise or self hosted version, so give it a try.

Also sponsored by Sanity at sanity.io.

They updated their tagline on their website. Now it says the unified content platform. Why? Because you stick. We call it a CMS, but they're more than that. They are a platform that you can stick all of your data, all of your data structures, all of your images, all of your Collaborations, your real time, all of that stuff for building a website goes into Sanity, and it's an awesome platform to build on top of Regardless of whatever framework you're using, so check it out, sanity.ioforward/syntax for the next website or app that you build, And that's gonna get you double the free usage here. Thank you, Sanity, for sponsoring.

Alright. Let's get into the surprisingly exciting world about Favicons, by the way, all that information about fava bean was a totally joke.

Oh my god.

It's, like, almost believable

with the, like, Java and Fava. I didn't believe you at first. I should've trusted my gut. Very convincing.

Anyways, we're gonna go into all the information about the FAB icon, from top to bottom. It seems so simple. It's a little icon you put in your f. The tab of your URL bar, but they are multifaceted. So very default, when you visit a web page that does not have any favicon Set. The browser will try to request forward slash favicon.ic0 f. Simply by just having the file in the root of your web server that is an ICO file, it will attempt to download that and serve it up. And that's why when you visit a page that is just, like, index.html.

You often see a 404 error in your console, and the reason is because You don't have a have icon yet, and you don't have any, tags set yet to to specify otherwise.

And and that's the case, It will try to download the the original path, and it will error out saying there's a 404.

No. No. No. I learned something in the very first sentence of this episode, So, it's wild.

Yeah. So if you do want to set a custom fab icon, there is A bevy of URLs that you can set, and they are all done via or most of them are done via the link tag, Which I think we have an episode on link tag coming up entirely. And you basically say link rel equals, and there's a couple different types of rels you can put in there. There is icon. That's the standard one that you put out there, and then you say h ref equals you link it up to your actual PNG or SVG or a JPEG of your your icon. We'll talk about formats in just 2nd, additionally, you can supply different sizes. We'll talk about that in a second as well. And then I didn't even know this. You can link up to a manifest dot JSON file. Have you ever used a manifest at JSON?

Oh, yes. In fact, I actually just, I submitted an issue on the Vit Vit, Discord because Vit has their own manifest file that gets generated for the chunks that it creates, And it was overriding my my actual manifest file. So I had to put it in another folder deep because it was basically It was creating that in your, like, static file. So it was like, oh, is there a man we'll just create a manifest. And it would kept overriding my my actual manifest. I started using the manifest file strictly because of, to get get, like, a nicer web icons and stuff that are are tangentially related to the favicon here. We'll we'll talk a little bit about this. But I started using that because when you pass this has been something that like, I do for a long time because there's so many images here.

To create a favicon, I just created a square image, and then I upload it to one of those favicon generator websites that I just Google to find each time. Yeah. It usually spits out all of your images, and the better ones spit out a manifest file as well. So that was actually my introduction to the manifest file,

seeing it spit out from there. I'm just looking at the MDN docs from NFS JSON, and this is the file for doing a progressive web app. So I have used it many times. I've I've also used this for a Chrome extension Yeah. Which is kind of like a a PWA, but I didn't realize that you could set simply just fab icons. And I like that a lot better than having to have a 100 different link tags in the in the header because, like, if you're doing this properly, you'll have I don't I don't know if you necessarily need all of these sizes. May maybe we could talk about sizes right now, but you used to just have to do, like, 16 by 16, and then we got 32 by 32 when monitor resolution got better, and then apps on your iPhone started using those. Or you could give an Apple touch icon, f. Which is if you bookmark a URL on your home page, it will attempt to use the Apple Touch icon for that, which is a really nice little hack is If you ever are designing an app icon and you wanna preview it on a phone, it's a little trick you can use to to put it in. And you can still you can provide all kinds of different sizes. And the benefit to that is if you are supplying a very, very small size, Often, you wanna take some detail out or take some of the bolding out because these really big icons don't just scale down really nicely,

And designers often like to produce multiple versions of them depending on what size is being used. Yeah. You have to consider that these things are Raster based. And when you start dealing with any type of color, I mean, you're dealing with gradients or whatever, there's going to be some Compression there because you can only fit let's say you have a a 57 by 57 pixel photo. You can only fit, 57 times 57 pixels in that photo. And so if you have a lot of detail, you can imagine you're shrinking something that has a 1000 by a 1000.

That detail's gotta go somewhere, and Yeah. Typically, it it you don't get to make those choices. So by making your own, you do get to make those choices.

There's also, a Windows tile version you can do. So it's a MS application tile color and and tile image, and that's for Whatever the Windows or was it called Metro a long time ago before they got sued? I forget. Yeah. I usually just keep those in there because I don't know how many people are bookmarking mine on their Windows desktop, but

their Windows mobile phone. Their their Zune. There's I got, Ten ten visits from Zune this month. So

And then finally, there is a meta name theme color, and we'll talk about that in just a second. But let's talk about file or file formats.

The default one is .ico.

I was surprised to see that Facebook still uses a dot ICO.

I don't even know how I would export a .ICO file right now because not a lot of the image editing prep,

still use that. Do Do you wanna know a technique that works to get an ICO? How? Here's a technique that works. I don't know how legit this is, so do not Do not attribute this to me if you're posting this tomorrow. Here's how you make an ICO for a favicon.

You create it as a PNG and you change the extension. And then when the computer says, are you Sure you want to change this extension, you say? Yeah. Sure. And then it just works. I kid you not. It just works. The same thing works with MOV and MP 4 too since MOV is just like Apple's wrapper around MP 4. Really? Dude, I was having issues on, Adobe Premiere not liking my frame rate.

And so then all I did it it only happened with MOV files from QuickTime. So all you would do is change the file extension to m p 4, and then Vermeer is like, I don't care anymore. It works fine. They're like, oh, come on. That's some like, some engineer somewhere just did not code support the right support for an MOV or something. I have no idea. But, Like, sometimes I I don't think you can typically do that, but sometimes just changing the file format works. I I cannot explain.

That's impressive. I wonder if it's the the browser just goes, I was expecting you know, like, it, like, downloads it, and it it checks the Content type on the the file, and it's like, you dummy. You sent me the wrong one. Or it Yeah. It might just be simply the the extension on there. That's pretty cool. So you can also use it at PNG. That's probably the most popular one because you can have transparency in that. I believe you can use JPEG as well, although I probably wouldn't recommend it. And then recently, you can start to use SVG favicons.

For the longest time, Safari didn't support it, And I believe they do support it right now. I'll let's just double check that on the old CSS tricks here.

They're link linking off to can I use, and, yes, it is supported on Safari, Which is really, really cool, to see that? So in most cases, if you can, like, if you're doing a raster based or sorry, a vector based icon, Just give it an SVG because then you only have to supply it one size, and all of the other sizes from there on out will just be calculated and a. And scaled up and down. And that that makes this stuff a lot lot easier, and you might not even need one of those generators.

What size do you typically make your fav icons if you're doing a PNG version? What? Say that again. What file size? Like, What pixel value if you're doing a raster based favicon?

You know, it's tough for me because I don't make that many of them. And Yeah. Favicon is the level up logo, which is already square. So I really just took the level up logo. I uploaded it to a favicon generator site, and it spat them all out, and they looked fine. So, typically, I just make them these eyes. But if I was, you know, if I was designing 1, like, if I if I was choosing to design 1 from scratch, I would go With an SVG file. So obviously, like a Figma or something, something vector based. But I would make my canvas Probably whatever the highest resolution that the icon could take, whether that was a, Like the Android or iOS icon was, like oh, it's just about 200 pixels by 200, so maybe that's what I would do. I might even just use a template for an app icon that they have in Figma. Yeah. That's a that's a good idea. I'm just looking at my beginner JavaScript

Favicon here, and it's 130 by 130, which is too small for the largest of the, like, iPad or something like that. So you might see a little bit of pixelation.

Too small. Too small. So that one probably should should be bumped up.

You can also animate, a favicon, which I thought was was really, really cool.

So you can give it a GIF. Or what a lot of, websites will do is they will generate the favicon on the fly and set it From Canvas. So, like, let's say, example, like Gmail. Your tab will say you have 40 emails, and then you get a new email, and your tab will say you have 41 emails in the favicon.

So the question is, like, how are they generating that? Well, one, they might just be generating A 100 versions of that 5 icon is shipping them. Can you imagine

there just being a folder of this in icon with

1, 2, 3, 4, 5. Every single one. I'm actually curious now if that is actually the case.

Some poor intern has to either write a script or simply

just export it. Let's see here. Yeah. Yeah. I'm actually very curious about that.

It they definitely have An icon for every single number out there. My gosh.

No.

So whether those are generated on the fly, likely.

But what you can do is if you go to keycode.info, what I do is every time you touch one of the keys on your key code, I am writing the key code to a canvas, and then you take the canvas and you export that canvas to base 64 URI.

And then you can set the you can set the actual link tag to be that value, and the browser will automatically update that value.

And that's how a lot of, websites as well or even something as simple as take the current favicon, draw a little, Like, red circle over top of the file icon to show the user that something has changed. Like, maybe there's a message or something like that Mhmm. And that will Go ahead and show us that. That's a pretty good approach to doing that type of thing. And it used to be that the Famicoms would get cached, Like, until all eternity, you could never clear the cache of the favicon. Do you remember that? Yeah. I remember uploading a new favicon and just being like,

Oh, come on. When is this going to change?

I don't know what happened there. I remember there was, like, even a meme of, like, how to clear your favicon cache, and It was like throw your laptop in the sea. And

Here's what you do. You make a really inappropriate one, and then you upload that. And I'm sure it would change right over Yeah. That's how this stuff works. Right? So true.

Just work, damn it, and then it actually goes over. That was really, really funny.

I had a a bit of JavaScript in the past that would intentionally delete the link tag and then set it to The new version, and that would force it, but that doesn't seem to have I've now I haven't had that issue in years, which is really nice. You don't have to worry about the favicon cache.

What's else here? What this is one thing I saw you. I think you you posted a screenshot on Instagram or something like that is iOS now supports the meta name theme color Tag in the head, which will allow you to this is something Android has had forever. Allow you to style the URL bar.

So you're trying that out. It works great? Yeah. It works great. I'm on the I'm all the betas. You know me. So I'm on the beta of the Ios, and, I fired up my site, and it looks great. You know, there there are other concerns with Ios but that's certainly not one of them. I'm glad I'm glad that, one, they've they've added some, like, dynamic theme changing, but I'm also glad that they used the same Metatag that Android used because, when I saw that they were gonna do that, I was like, okay. Time to add another new meta tag. But I was happy to see that when I fired up my site. It just it just worked. So, very nice. One thing you can do, and this is a little trick on CSS tricks, is How do

you make a dark mode favicon? Because there is no, like, media property on link To only apply this, Favicon, when you're in dark mode, but there is a little trick on CSS tricks here, Which, because you can ship an SVG as a favicon Oh, interesting. You can put CSS inside of your SVG, and then you can put a prefers color scheme dark media query inside of that.

So you would be able to dynamically swap it out. But even then, one issue I have with with dark mode, When I'm using Firefox, I have, like, a dark theme in Firefox, but I often am not using the dark mode of a website.

So the favicon gets totally lost Mhmm. In the dark mode, especially if it's, like, a transparent Favicon because it's, like, maybe black text over a dark, dark blue tab. So there's no current way even, like, something like GitHub has, like, a black Octocat over top of a very dark blue tab, and I always find that really frustrating because I can't see What the actual favicon is, and I even went as far to start writing in a like in a Chrome extension or a Firefox extension to invert The favicon Mhmm. If it fell within a certain threshold of dark colors,

but it's one of those things that's not annoying enough that I to spend any more time. That sounds like a lot of work. Yeah. You know what? The we were just talking about the theme tag, The meta name theme color actually does have a media prop, though, that you can say media equals prefers color scheme, light or dark, and serve up a different theme based on that. That's just for the theme, obviously, not the favicon. But Oh, I bet that will be extended to favicon soon. Yeah. That'd be neat. That'd be neat to be able to just say, hey. Light mode, dark mode. Here you go. Yeah. Because

the preferred start colors is a OS level. Right? It's not a browser setting. That's a like, that's in your That's in your operating system, so maybe you could use that then. Yeah.

I like it. I like it. So I think That is it. Oh, I wanted to plug my little, my own little website. Fav.farm is a little website I made.

And what it does is if you don't have a favicon for your project for example, I'm working on my TypeScript course, and we've got, Oh, 20 different index dot HTMLs in each exercise that we do, and it's nice to be able to have a different fav icon for every single that you do. So if you've got a couple of them open in your different tabs, you can quickly see what's going on. So you can put an emoji in an SVG file and then use that SVG as a favicon.

And, Lea Veru actually initially found that out, so props to her. And then I went and, made a little service so that you can simply just say link rel equals icon Ref equals fab.farmforward/ and then the emoji of your choice, and that will simply just return to you an SVG With that emoji in it, and you can without having to, like, download it as SVG and save it locally in your file, you can just link it right up too. So So it's a web service. I actually wrote it in in Deno, which was kinda cool. Deno. That is actually fun. That just goes to show you that that, No. Little fun little projects like services, they can be really small. Really small and still be really pretty neat because this is pretty neat.

Did you talk about animating

With Avicons at all? Oh, I forgot about that.

I, said you could use an animated GIF. Yeah. But are you talking about uses .tech?

Yeah. Does is that a GIF? Is that what that is? Because I was I was there's some reason in my in my brain you were replacing them. Yeah. In I forgot about that. So if you go to uses .tech,

It has an animated favicon, and that is done with a canvas as well.

So every 1 second or every 500 milliseconds, it's It just uses exclamation mark poop emoji, and it just repeats them over and over and over again updating the the favicon.

That was pretty fun to do. So, again, yeah, that's not I could have made an animated GIF for it, but I took I made, like, a React hook Called use Wicked Favicon. You can look it up on GitHub.

And I'm just constantly writing to a canvas, dumping the canvas to a base 64 image, And then setting the link tag to be the that value.

Cool. Yeah. I remember being something cooler. So that is definitely cooler than an animated GIF. Yeah.

And it it's cool because I could change it at any time. I just have to change the array of letters to show.

Fancy. And that's all open source too, so give that a a whirl if you are interested in seeing how that's being made. Yeah. I forgot about that. Good Good remembering there, Scott. Oh, yeah. You know me. Still trapped.

I think that is it. It's surprising you can talk about Famicoms for so long, but there is a lot to it. You gotta kinda think about anything

else to add. Oh, I guess the only thing I could add is don't use the default favicon from your host, Bluehost or GoDaddy or whatever. Don't do that. It looks really amateurish no matter what you're doing. So take the extra time. Make a little favicon. Make it fun. Have something have some fun with it. That's actually one thing I see a lot is I use

I use Missive for my email, and it will attempt to use the domain name from whoever's sending as, like, a little icon beside it, and that's really handy. And then often, you see, like, the Bluehost, Square, or, like like you said, a whole bunch of, like you're like, what? What is going on? The the worst one is when people use Icloud, and this is this is nothing because they're using Icloud email, But it always shows me an Apple icon, and I'm always like, oh, somebody from Apple is emailing me. Cool. And then I go, oh, no. That's that is not the case.

Is Apple looking to send me something? Yeah. That'd be cool.

Cool. Alright. I think that's it. If you And if you don't have anything else to add, we'll catch you on Wednesday.

Peace. Peace.

Head on over to syntax.fm for a Full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.