Jan 14, 2023
Install Your Favicon on BigCommerce
A favicon is a small, 16x16 pixel icon used on web browsers to represent a website or a web page. Short for “favorite icon,”' favicons are commonly displayed on tabs at the top of a web browser,—but they're also found on your browser's bookmark bar, history and in search results, alongside the page URL.
In this video I'm gonna show you how to install one for you store.
(Install Your Favicon on BigCommerce)
My name is Kal. And be sure to subscribe if you find this helpful. Alright, so let's go over to my computer and login into a big commerce store. What you do to get to the place where you upload your favicon as you click on the storefront, and then logo, wish you would say logo and favicon, because it's hard to find your fav icon spot if you're not currently looking to install your logo.
In this case, I already have a logo installed, I already have a favicon installed, but I'm going to replace it, it does say that you need to upload a 32 by 32, specifically sized favicon. And it can be Ico format, JPG format, GIF, or PNG. And so the easiest way to do this, you're probably going to need to size your icon. Nobody has nobody ever has the exact right size icon there.
So what I recommend is go to Canva and open a canvas make it 64 by 64, which is twice the size that Bigcommerce is asking for. But I'll show you why. First of all, Canva will not make an image under 40 by 40. So we're gonna go a little bit bigger, and then we're going to export it a half the size. And what we're going to do is I'm going to actually just upload my logo here, which is way bigger than I need, I'm going to upload it right here.
That'll import it, put it in the middle. Now it's way bigger than the canvas. So it doesn't really matter if I scale it up, because it's not going to be pixelated since it's already sized way bigger than the canvas. So I want to size it, scale it to where it's almost edge to edge. And then I want to vertically center it just like that, I'm going to pull this bar up using command and dragging it to make sure I don't grab any of that text that's below.
And that's about it, make sure it's vertically centered now. And that looks pretty good. Now this is uploaded with a clear background, because this is a clear background png that I use. If you're using a JPEG, then you probably going to want to click into the image and use this premium feature of Canva, which is the whole the whole premium canvas like eight bucks a month currently.
But this will let you remove the background. So you don't have like a white background behind your behind your icon unless you want one. Yeah. Okay, so once you have the background removed, which I didn't need to, but you may and it's all centered, and it's all scaled the right way. Now we just need to export it. So we're going to come up here to share, download, leave this as PNG and slide this down, you can see it's as 64 by 64, currently sliding all the way down to scale it to exactly half and it'll be the perfect size.
Okay, click transparent background unless you don't want a transparent background and then click Download, just like that. That'll put it in your Downloads folder. And now we're just gonna go back to big commerce, click on this replace image and choose the download that you just got, which in my case is untitled design one. Now, if this was my production store, I'd probably take a second and just rename this to your brand name. But I'm going to skip that. Actually, no, let's not skip it.
Let's do it right, I'm going to right click and rename and call is your brand dot png. All right, let's open and that will upload it here. It'll show it to you in the preview and all you have to do is click save, and that guy is applied. If you open up a new tab, you should be able to see it within a couple minutes here. Sometimes your browser caches it but check it on a fresh computer. It should be rendering right away into the icon that you have loaded.
That's all you got to do. And be sure to reach out if you guys need help epic design labs.com and join our free community at join e commerce growth.com And I'll see you the next one.