Hasty Treat - The Surprisingly Exciting World of Favicons

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

the icon could take, whether that was a, Is Apple looking to send me something? Yeah. That'd be cool.

that 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,

too small see what's going on. So you can put an emoji

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

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

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,

like Gmail. Your tab will say you have 40 emails,

on the fly and set it From Canvas. So, like, let's say, example,

So the question is, like, how are they generating that? Well, one, they might just be generating So you can give it a GIF. Or what a lot of,

Some poor intern has to either write a script or simply

there just being a folder of this in icon with

A 100 versions of that 5 icon is shipping them. Can you imagine said you could use an animated GIF. Yeah. But are you talking about uses .tech? Windows desktop, but

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

Tolinski.

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,

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

Jared Smith was The creator of the fava bean favicon when he 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 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, You can also animate, a favicon, which I thought was was really, really cool.

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.

Famicon additionally, you can supply different sizes. We'll talk about that in a second

Monday. Monday. Monday.

What? Like, I

surprisingly exciting

Oh my god.

Favicon master boss.

world of favicons

Favicon 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

is a bit of a I don't wanna say it's a

that is just, like, index.html.

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

website, It's, like, almost believable to build on top of Regardless of whatever framework you're using, so check it out, sanity.ioforward/syntax 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,

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 to use the domain name from whoever's sending just uses

surprising 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.

Boss, and Scott, El Toro Loco,

And they put a Fava bean up in the top.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

The excitingly

He was a architect at Sun Microsystems and then you get a new email, and your tab will say you have 41 emails in the favicon.

Set. The browser will try to request forward slash favicon.ic0

very interesting. I had no idea.

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, 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 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,

This sounds all like it sounds 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 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, pixel photo. You can only fit,

And that's gonna get you double the free usage here. Thank you, Sanity, for sponsoring.

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 If you ever are designing an app icon and you wanna preview it on a phone, It they definitely have An icon for every single number out there. My gosh.

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

on Wikipedia.

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.

is there with LogRocket. So check it out at logrocket.comforward/syntax.

soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda,

Either way, we have some really interesting little things to talk about here. The FeffiCon

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 multifaceted. So websites will do is they will generate the favicon

The favicon What the actual favicon is, and I even went as far to

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.

start writing in a like in a Chrome extension or a Firefox extension to invert Fava Con. It was a Java based, for the next website or app that you build,

Mhmm. If it fell within a certain threshold of dark colors, Java.

So you would be able to dynamically swap it out. But even then, one issue I have with with dark mode, URI.

Mhmm. In the dark mode, especially if it's, like, a transparent

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 There's also, a Windows

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.

their Windows mobile phone. Their their Zune. There's I got,

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

tile version you can do. So it's

by 57

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

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.

For the longest time, Safari didn't support it, introduced the 1st website with the fava bean icon.

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.

They're link linking off to can I use, is a OS level. Right? It's not a browser is a little website I made.

to see that? So in most cases,

Just give it an SVG because then you only have to supply it one size,

yes, it is supported on Safari, and, in an SVG

what I do is every time you touch one of the keys on your key code, because you can ship an SVG 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.

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, You often see a 404 error

approach to doing that type of thing. And it used to be that the Famicoms would get cached, Favicon here, and it's 130 by 130, which is

Oh, come on. When is this going to change? CSM. Welcome to syntax. In this Monday hasty treat, we're gonna be talking about The surprisingly exciting world of favicons

draw a little,

and then you take the canvas and you export that canvas to base 64 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.

No.

a canvas,

inside of that.

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 And,

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

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,

and that is done with a canvas as well.

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

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

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.

and it just repeats them over and over and over again updating the the favicon.

So every 1 second or every 500 milliseconds, it's It

It has an animated favicon, 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.

exclamation mark poop emoji,

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.

made a little service I,

I like it. I like it. So I think That is it. Oh, I wanted to plug my little,

Ref equals fab.farmforward/ you make a dark mode favicon? Because there is no, 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 And I believe they do support it right now. I'll let's just double check that on the old CSS tricks here.

Did you talk about animating

file and then use that SVG as a favicon.

Oh, 20 different index dot HTMLs

and then the emoji of your choice, and that will simply just return to you an SVG The default one is .ico.

Lea Veru actually initially found that out, so props to her. And then I went and, as, like, a little icon beside it, and that's really handy. And then often, you see, like, the Bluehost,

my own little website. Fav.farm

that is not the case.

Peace. Peace.

Head on over to syntax.fm Ten ten visits from Zune this month. So

or, a MS application tile color and and tile image, and that's for Favicon 1, 2, 3, 4, 5. Every single one. I'm actually curious now if that is actually the case.

else to add. Oh, I guess the only thing I could add is

Square, 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 very default, when you visit a web page that does not have any favicon

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.

like like you said, a whole bunch of, like you're like, what? What is going on? The the worst one is So whether those are generated on the fly, likely.

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.

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

I was expecting you know, like, it, like, downloads it, and it it checks the And what it does is if you don't have a favicon

Adobe Premiere

just changing the file format works. I I cannot explain.

I I don't think you can typically do that, but sometimes

not liking my frame rate.

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.

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

Vit has their own manifest file that gets generated for the chunks that it creates, And it was overriding

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? The new version, I use Missive for my email, and it will anything

this has been something that like, I do for a long time because there's so many images here.

I submitted an issue on the Vit Vit, Discord because

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

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 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? That's impressive. I wonder if it's the the browser just goes, But what you can do is if you go to keycode.info, when people use Icloud, and this is this is nothing because they're using Icloud email,

Oh, yes. In fact, I actually just,

PNG or SVG or a JPEG of your your icon. We'll talk about formats in just 2nd,

So,

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,

provide all kinds of if you can, like, if you're doing a raster based or sorry, a vector based icon, With Avicons at all? Oh, I forgot about that.

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 I am writing the key code to for your project for example, I'm working on my TypeScript course, and we've got, so that you can simply just say link rel equals icon Which is really, really cool, So the favicon gets totally lost

it's a little trick you can use to to put it in. And you can still you can attempt

the better ones spit out a manifest file as well. So that was actually my introduction to the manifest file,

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 that's how a lot of, websites as well or even something as simple as take the current favicon, And it it's cool because I could change it at any time. I just have to change the array of letters to show.

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

a 100 different link tags in the in the header because, like, if you're doing this properly, you'll have for that, which is a really nice little hack is for the largest of the, like, iPad or something like that. So you might see a little bit of pixelation.

but I didn't realize that you could set simply just fab icons. And I like that a lot better than having to have 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.

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.

I had a a bit of JavaScript in the past that would intentionally 1997.

delete the link tag and then set it to setting. That's a like, that's in your That's in your operating system, so maybe you could use that then. Yeah.

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

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.

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

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, Also sponsored by Sanity at sanity.io.

the preferred start colors different sizes. And the benefit to that is if you are supplying a very, very small size, over top of a very dark blue tab, and I always find that really frustrating because I can't see Just work, damn it, and then it actually goes over. That was really, really funny.

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

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.

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.

No. No. No. I learned something in the very first sentence of this episode,