Find the javascript code here:
Here's an other post that you might like: https://www.knackbuilders.com/post/create-a-user-portal-without-a-log-in
Interested in my Knack database app services? ... Book a call with me here: https://calendly.com/daveparrish/callwithdave
Hey folks, Dave Parrish here. Today, I'm diving into a quick tutorial on how to change your app's favicon in a Knack database app. Recently, a client asked me how to do this, and even though I hadn't done it in a few years, I figured it out again and wanted to share the process with you all.
What is a Favicon?
First things first, for those who might not know, a favicon is that little icon you see next to the site name in your browser tab. For instance, next to my name on my site, there's a small database icon. Google has their Google Drive logo, and so on. These tiny icons are more important than you might think—they help with branding and make your site easily recognizable.
Getting Started
When my Knack client asked me about changing the favicon, I didn't remember the exact steps. So, I went to a community forum and searched for "favicon." Several articles came up, and I found a helpful one, which I'll link to in the description below. Here's the essential piece of code you'll need:
html
Copy code
<link rel="icon" href="your-favicon-url" type="image/x-icon"/>
Step-by-Step Instructions
1. Copy the Code
First, copy the code snippet above. This snippet tells your browser where to find your favicon.
2. Prepare Your Favicon
You need to have your favicon ready. If you don't have one, you can use a favicon generator—just search for "favicon generator" online, and you'll find plenty of options. Once you have your favicon, you need to host it somewhere on the web. I tested using Google Drive, which works as long as the link is public.
3. Insert the URL
Next, insert the URL of your favicon into the href attribute in the code snippet. Here’s an example:
html
Copy code
<link rel="icon" href="https://your-hosted-favicon-url.com/favicon.ico" type="image/x-icon"/>4. Implement the Code
Now, go to your app's code. If you’re not familiar with coding, this part might seem a bit tricky, but it’s straightforward. Look for the part of your code that deals with the API and coding (usually in JavaScript for web apps). Find the Knack section where you can insert this link and paste the code snippet there.
5. Save and Test
After pasting the code, save your changes. Refresh your app to see the new favicon in action. If everything is done correctly, you should see your new icon in the browser tab.
Troubleshooting
While testing, I found that the favicon works well in a desktop environment. However, I encountered some issues on mobile devices. If your favicon isn’t showing up on mobile, it might be due to a specific setting or additional code needed for mobile compatibility. I tried a few solutions suggested in forums but couldn’t get them to work. If anyone out there has a fix for this, please share!
Conclusion
That’s all there is to it—changing your app’s favicon is a simple yet effective way to enhance your site's branding. If you follow these steps, you should have no trouble updating your favicon. Thanks for following along, and happy coding!
Full Transcript
0:01 Hey folks, Dave Parrish here. Uh, got another video for you. I'm gonna jump right into this one. Uh, change your app's favicon. 0:10 I had a client ask me for this the other day, and I did it a few years ago. I don't really remember how. 0:16 Uh, but I'm gonna show you. Uh, you'll need a little piece of code, which I'll give you. Uhm, but if you know what a favicon is, it's this thing up here. 0:24 Like, next to my name on my site is a little database. Google has their Google Drive logo or whatever. Uhm, I'm gonna be right back and we'll just whiz through this. 0:36 Thanks.
0:01 Okay, changing your favicon. Let's do it. Now first I said, I didn't remember what I did. So I just went to the um um, in that community form and and searched for a fabric on and uh. 0:16 The several articles came up. Uh, but I put the link to this article in the in the description below but here's the code. 0:25 Um, and I'm not sure exactly Jesse someone thanks Jesse for this. But it's here. Um, so here's what you do. 0:36 I'm going to. Let's get out of this. Pick up that code. I got it right here. This will be in the link to the code and to there. 0:52 So you just copy it. Let's call it the app. Here's an app. It doesn't matter. Right now it's got that default. 1:00 An app deal going. So if you don't know how to deal with code, this one is in a calculated one. 1:07 Uh app. Down here. The API and code. API and code. Put this one's JavaScript. Just copy it. And then right here. 1:19 The only thing you have to manipulate. have to the link reference. This is the link to your thing. So you're going to have to get your favicon. And if you type on type that favicon generator, we won't all kinds of stuff will come up. Um. And then you have to put it some place on the web. In this case, 1:23 I'm going to say that I have, I be, I tested this with Google Drive. As long as you make your, uh, anyone who has the link can get to it. 1:46 Uh, but we're going to go to data. I hear I made it within back, it means you know how to do this, then you can up. 1:52 If you click on it to edit it, if you click here, it's going to open it up. It's going to give you the URL on Amazon. 2:01 So let's do that. Let's go back API and code. Thank you. Yeah, I have a script. And let's go make this a little bigger. 2:13 Your image here, highlighted. you're rid of that. Paste in mine and then save it. Now here's a test app, let's refresh it. 2:36 Now we have that image here. Umm, I test- save this too. If we bookmark it and then put it, drag it onto the bar here so it's really accessible. It keeps the fabric on. 2:51 I test it in the mobile environment. It's taking the same you are all put it on my eye. I pat. 2:57 It did not work. Now someone out there has got a solution for this. I noticed this thread too that seems to have something to do with the mobile. 3:07 And uh, something you can do. They added this. But I don't. I tried it. I couldn't get it to work. 3:15 Someone out there knows what to do. Uh, but that's all I got. That's how to change your fabric. Thanks.
Comments