Dynamic Favicons in @weweb_io

So here's a fun WeWeb question from the community. Uh, we have, uh, Jack here who's asking, is there any way to bind your favicon or app icon to change based on page or environment? Um, leaving aside the PWA question, which is a separate question because it has to do with how home screens work on desktop, uh, changing a favicon during runtime is actually relatively straightforward. We just need a little bit of JavaScript and it can get done. So let's talk about how we can do that for a second. If we go over to, you know, our friends at Google, we can, you know, pop in a little search, how to change favicon HTML at runtime, and we will find, you know, information about how to do this. Now, many no-coders are gonna be a little bit concerned about the fact that this is going to point us towards, you know, JavaScript and some code, but a little bit of code can get us a long way. And if we click into this a little bit, we'll find there's somebody who has the exact same problem we're talking about here. We want to be able to edit the code. We want to edit the favicon, which is a little icon here, you know, like the little Stack Overflow icon or here, the little red WeWeb icon to focus our attention on like what kind of app that we're working on right now. And you'll notice actually not all sites do this very well, but, and usually you're stuck with one, But there are certain instances with like, you know, calendar apps are a good example of this, that will keep on changing what that icon looks like as you go. In fact, you can change this very, very dynamically as we can learn in here. And it points us towards some code and how to do it. Now, here's the thing when you're looking at JavaScript coming from Stack Overflow. Stack Overflow answers, particularly the highly ranked ones, have been around for a long time. Notice this one is, well, 15 years ago., and the, and it's going to have been accepted back when. Now it's also probable that as we scroll on down, there can be other answers that will, that potentially more useful, or that give us, you know, more structured because it might be a more recent vintage, like this one here that is from 2016. This one here, which is sort of fun, which is about how to do it with an emoji. We'll talk about that in a minute, which is actually from just a couple of years ago. So paying attention to the date can be super helpful as well. And then frankly, I like to just copy and paste this stuff and sort of see how it works. Now, when I'm in my WeWeb, I can, you know, have a couple of things all going here. But the, but essentially what we want to do is create an action that will be able to change the favicon of the app into whatever new thing we're going to create. So how do we do that? Well, we're just gonna have two parts. So the first part is we need to create a function that we're gonna be able to call and sort of use repeatedly wherever we want to in our application. And we'll talk about how to create that function in just a second. And second is we wanna make it so that whenever we do a certain type of action, like I'm just gonna go make a, you know, red button, 'cause why not make a red button? And then we click that red button, it's going to change what that icon is up there in the corner. How do we do that? Well, let's talk about the two steps of the problem. The first is you'll notice over here in the JavaScript, they keep on defining these functions for us that could then be repeatedly used. Here's what we call the declaration of the function and its definition. And here's what we call the invocation of the function. So what happens is first they define a function that like multiple points in the code could all use. And then they have the way that you can call that function, which is usually done through the name of the function, parentheses, and then whatever the argument is. In this case, this is something that allows you to change the favicon into an emoji and does that by creating a temporary canvas and then, you know, getting the image from that canvas and then making that into what's called a data URL. Or other techniques, which are to just say, hey, here's a link., and we're going to put that link directly into, the, what was called the, favicon element, which is a link element that's sitting inside the header. So how do we make all that work? Let's, the, the, for, for defining functions like this, we're going to repeatedly use, I recommend having a little bit of external code that's maybe easier to work with. Script tag is a tool that we use over at StateChange. It's an internal StateChange tool., that all of our members, uh, get access to, um, which, uh, allows you to relatively easily, uh, create a little snippet of code that you can then inject into your WeWeb, Webflow, uh, whatever project, and then be able to call it whenever you want. The, uh, so I'd sort of give a little credit to my friends over at Stack Overflow, and I create the code based on what I learned over here, right? Credit where credit is due. Um, that we're going to, you know, create the link element. We're going to remove the old link element, and then we're going to set what's called the href. And this is the key because the way these things work is it's just like everything else in the web. It's all about links, right? And so the image that you see up here is defined as being a link to that image. And so now we want to change which image is being linked to. So instead of being the usual icon you might have is going to be whatever it is that we define. And usually that means it's going to look like something like, well, let's actually take a look at the one that's up here. You see how this has two little chevrons and a little slash in the middle? Well, if we were to take a look at our DevTools, which I did by doing Command-Option-I on my Mac, you can also do this using Control-Alt-I on your PC. And you go into your head, you'll see you have a link rel="icon" with an href. Now this href only has a slash to it because it's on the same server, but it's actually a full bore URL. If I were to say copy the link address and if I were to paste it here, you'd see this is actually the full URL to scriptags.hji.com favicon. And if I were to, you know, if I were to cut that and put that into the browser, it would just show me the image because that's what a favicon is. So favicon is just the image and all the brow— and all your documents containing is a link to that image. And what we're going to do here through half a dozen lines of JavaScript is just change that link from whatever it used to be to wherever we want it to be. The emoji thing is sort of running up the score a little bit because the emoji of course is a character., right? That is, that looks like an image. It could be a smiley face. It could be a heart. In fact, there's a delightful little site called EmojiCopy, which has, you know, lots of standard emojis. And we can do things like, you know, copy an emoji, uh, do, do, do, do, uh, and then copy that emoji. And then, um, uh, you know, go back over to here and, you know, I can paste that emoji and see, there it is. Um, now what we can do is we can set our, uh, favicon, you know, the thing that's in the corner here to an emoji. We can set it to to an image that we link to, whatever it is that we want. Let's illustrate how we would do that. Now, the easy way to play is not, is, I mean, the hard way to play, of course, would be to copy and paste the function directly into your WeWeb. But, you know, we do this a little bit easier over at StateChange. We have what we call a WeWeb snippet and it gives us some instructions of how we can add it to the WeWeb site. And essentially what happens is we go back over to the WeWeb site, you go to your page, you, you know, sorry, you go over to your page and here, yeah, over here it already has like the details associated with it. And you can see we have a custom trigger page workflows. We can click on that and we can click on the custom workflow and you can have some custom JavaScript. All we need to do here is we can just, I'm going to delete this just so I can illustrate how this works. And we can scroll down to custom JavaScript. We can click where it says edit code and we can paste the snippet that ScriptTag just gave us. And by the way, if you don't want to use ScriptTag, you have some other sort of arbitrary JavaScript you wanna put in, there is a free tool that we have, the WeWeb Embed, that allows you to accomplish about 80% of the same stuff, although it just doesn't offer the same nice code editor and the experience that we do over at SageChange. Anyhow, the, so we copy over the code and so we copy over the link to the code into our WeWeb. And basically, so this, this little snippet here just has the job of, of loading the connection to what they have over at StateChange. Okay. This, this bit of code that we have here and connects it into my WeWeb and the, and then loads it into memory and I can close that up and I can say close. And now I have access to all of this code in my WeWeb without having to go modify a whole bunch of lines. So now I've got this red button that we just talked about, and I can say, give me a new button, I can do a new workflow for it. So whenever I click on it, I would like to do a little custom JavaScript. And we're going to say, what would we call this thing here? Change favicon to emoji. Okay, so we'll say over here, paste that, change favicon to emoji. And the emoji that we're going to copy is going to be the, you know, how about the cross fingers one? You know, we all hope, we're gonna express our hope that this will work. And we will go over here and I will just do paste. And now we get the cross fingers emoji inside my change favicon to emoji. And now I can say great and I'll say close and I'll say crossed fingers. But just to make it more interesting, let's add one more button on here. Let's add another primary button underneath because they're nicely colored. And I will say state change. Now to do this, I actually want to change the state change, the state change icon. The state change icon over here is at state. Change.ai. And again, if I were to, and this is the other way for me to get to DevTools, I click inspect here. I can go to elements, open up my head, go find, okay, here's the link one, the one that has my, you know, my nice state change icon. And I right-click on this or double, two-finger click, and I say copy link address. And now what I can do over at WorkflowTest is I can come to here. I can say do workflow action, custom JavaScript, and what was it called? It's called change favicon to URL. Okay. And we'll say change favicon to URL, and then I'll just put in quotation marks the same URL that I got from state change UI. Okay. Close. All right. So now I have cross fingers and I have state change. These become my two big buttons. Now, this will not work in the editor. I've tried. Uh, and that's because the editor is kind of working in what's called an iframe, which is a webpage within the webpage. And so we'd be changing the favicon for the internal webpage, but not for the external webpage. So in order for us to get good access to this, we need to publish a site. So unless you have like a paid WeWeb account, this isn't going to work. But you can get, it doesn't need to be one of the expensive ones, it can just be one of the cheap ones and that this will work just fine. And we will click publish and we will say testing changing favicon as the name of the test we're going to do here and it's going to publish. All right, let's check out the page now that it's published. And we will bring up the page. It comes up relatively quickly once it's actually finished publishing. And the, you know, the little form thing up here, let's not worry about that too much. I think that's left over from previous vid. And now in here we have two different, the two different buttons we create, right? One which is to set the emoji type of cross fingers and the other one to create the link to the state, to the, the same, favicon that we have over a state change, you know, my little up and to the right arrow. So let's try clicking one. Oh, but before we click anything, notice how the top here where it says blank start from scratch, notice how the little icon here is a gray Actually, I think that's intended to be a globe looking like, you know, Africa and South America connected or something. The, that, that icon just means that the browser has not detected a favicon for this particular site. Usually you'll set one when you are looking to publish a site. I actually encourage doing it early. It helps make things feel more real while you're doing it. But the, the fact that it's blank right now provides us with a nice canvas on which we can put the other icons to see how well they work. So click. Oh, hey, look, cross fingers, cross fingers, icon showed up. Say change icon and the say change icon shows up and I can switch back and forth as much as I like. So you can, by virtue of events or by virtue of on page load or whatever, you can set that icon to whatever you want at runtime. If you're trying to take dark mode and you want to make sure it's icons going to look good in dark mode, you can switch it to that. Whatever it is, that's going to be of benefit to you. You could do it for style reasons, you can do it for information reasons like a calendar would. And, and you can do that because with just a couple of lines of code, you know, in your WeWeb, because, you know, you can just say you want to change favicon to whatever the URL is. And by the way, this could also be a variable, right? So let's just say we wanted this thing to be coming from that, that, that, that, that thing that we had up above, right? That, that string, that text input. You can just click on answer value and it will insert that particular variable value and that will be what it changes it to. So let's try this for a second. Let's see how well this works. So I can say close up and I say close up. Now I'm gonna change name to change to URL and text input. I'm gonna get rid of that guy. And then that way I'll have cross fingers and I'll have changed URL text input. In fact, just to make things more interesting, we're going to say that instead of changing it to the cross fingers, we're going to change it to something else that we think is cute. Here we will change it to, you know, happy person. Great. Click on that and I'll copy the happy person and I will go back to the Webflow and I will paste. Cool. All right. So now we have one that's going to be based on whatever was in the in the input. We have one that's going to be based on, one that's based on the happy person in the emoji. And we're going to try publishing this thing again. We're back. We have a new version of the site. Let's go take a look at it. Okay, so change the URL in the text input. Well, What URL do we want to pick? Let's pick the, let's pick the WeWeb community. That's where we started. And the way we do that is we go look up DevTools again. We go up to the head tag. We look through the head tag to find the link tag. Here it is. And then we grab the link tag and we say we would like to Actually, no, we should just be able to say copy link address. There it is. And we will go over to the site and we'll say paste that in and let's change it. Look at that, it becomes the red thing. And now if I wanna click happy times, we get to have the stars and we get to celebrate. So hopefully this gives you some idea of how we can wrangle these tools together to solve the mystery of how we can be changing these favicons whenever we want. It also shows how you can be calling code relatively tersely and easily in WeWeb as long as you have the function defined and hopefully gave you an easy way for you to define that function through state change itself. Now, this this thing here was created using a tool that's for state change members, but you can access this information. There is a share link here and I'm going to put this into the notes for the, for the video and you can access it anytime you want, including being able to copy the WeWeb snippet, get all those instructions that we're just looking at. You have, you know, complete access to this. Of course you can copy this and do whatever you find to be helpful. You know, bringing JavaScript, a little bit of JavaScript into the rest of the no-code, low-code environment can be really, really powerful to get the kinds of cool effects that can make a difference to our customers. And this is the kind of thing that we work on every day over at SageChange in our office hours, on our forum, and of course also here on the YouTube channel. And if you have any questions about how we do these things, you know, feel free to put a, you know, a thought or a question in the comments. I'd love to be hearing from you. And if you've got these kinds of problems ongoing, please check us out over at statechanged.ai. Until next time.