Install Your Logo and Favicon on BigCommerce

It's pretty easy on Bigcommerce, you go to storefront and then logo. And that'll bring up a screen that looks like this. And it'll actually let you input your logo and your favicon both in the same spot. I don't know why it doesn't say logo and favicon. But that's where the fav icon is.

All right, so I have some logos prepared here I have this one that's entirely too big of this one is vertical, which is not going to look good on my website. But I'm going to use this to make the favicon. And then I have one that I size down to around 250. Now you know I build I build a lot of sites to 50 with is a good with, it could be a little bit less.

Sometimes a little bit more of a 250 is kind of a good middle of the road with for a logo without getting too crazy big and too crazy small. And something to know about the logo as you upload it into big commerce when you upload it here, this is the same logo that's gonna go on your printed media like your invoice and your packing slip. So if you upload something that's really big, like 600 or 1000 pixels wide, it's going to be massive on your invoice and your packing slip.

And then your customer is going to get in saying Wow, these guys really liked their logo, because it goes the whole width of the page, right? Alright, so we want to have one that's already sized down again, this is 250 width right here. So I'm going to just drag it out of view. And all you got to do is just drag the logo right under here to upload it just like that.

And down here it says recommended for recommended size for your theme 100 by 45. Just don't listen to that. That's just too small, nobody's going to read 100 pixel wide logo, you can see how small it looks here. So what you can do is you can go to this drop down where it says optimized for your theme, go ahead and change that to original as uploaded.

Now if this ends up being a little bit too big, I would recommend still leaving this as original. And just having a developer use one line of CSS to make it a little bit smaller. But this 250 width is going to be a pretty good size on your logo, your logo material, like you're printing, your your packing slip, and your invoice, man if I can get my words out.

Alright, so it's uploaded at 250. I'm gonna go ahead and just save it, we can look at it on the front by going like this. And there you go, you can see it looks pretty good at that size. All right, so we're good on the logo, now we just need to do the favicon. Now a lot of a lot of a lot of frameworks require you to upload an ICO file, which people have difficulty coming up with.

A lot of frameworks also make you load one even smaller than this usually like 16 by 16, I think is what a lot of them do. Big commerce will let you upload a little bit bigger one, which is nice. And they'll let you upload it in a PNG, a GIF, or JPEG. I don't know if it can be an animated GIF of nerd tried that.

But apparently you can do a GIF. So maybe. Alright, so what we need is we need this 32 by 32 pixel png probably right? And my logo and your logo probably isn't sized exactly perfectly. So I'm going to go to my friendly little Canva tool [email protected].

And I'm going to click create a design. And I'm gonna tell it it's a custom size and to make it 32 by 32. Oh, they want it even bigger. Okay, so what I'm going to do is I'm going to actually make it twice that big, I'm going to make it 64 by 64. And then I'm going to size it down when we export it. Alright, so it's 64 by 64. Now, I'm going to drag my logo into this. Maybe it's gonna take a minute to load and drag it Okay, there it is. Okay, so it's in there, it kind of shrinks a little bit when you initially drag it, but I guarantee you this has been entered as larger than 64 by 64. So I'm going to be fine to increase the size like this.

And I'm going to do this and try and get it really like right, right to the edge. On side decide, like really close to the edge, okay. And then I'm going to make sure that it's centered as well as I can horizontally. And then I'm going to center it vertically. And make sure that those letters down below. Don't show through. All right. And it's just not quite centered.

All right, well, I guess this is this will work. Now it's gonna end ended up being much smaller than this, like this is a, this is gonna be a 32 by 32 little square. So it's gonna be this tiny, it's not going to be this big right? This is zoomed in plus is too large for what I'm doing. Now, you can see that when I uploaded this, it didn't upload it with a background because I was working from PNG.

If you uploaded this from a background, you might want to come in here, click Edit Image and use this premium feature of Canva, which only cost you like eight bucks a month or something to remove your background. That way you don't have like a white background behind your image. And it'll show your your icon. Color against gray like big commerce is icon has appeared in one of my many tabs. All right. So I've gotten size, right, I have it centered, right, and I'm happy it's not showing me the text down there.

So I really just don't have anything to worry about. To do that. Okay, now all we got to do is export this and so I'm going to go to share and then download, keep it here as a PNG. Otherwise, if you do jpg or something else, it's not going to have a clear background.

You want to check transparent background and make sure that it doesn't show a white background behind it. And right here where it says size, I'm gonna scale this down to 32 by 32. Now you can see, that's why I chose 64 by 64. So I could basically scale it down to exactly point five and no, it was gonna hit 32 by 32. All right, so size it to 64 by 64 and output it scale it down to a half and click download. Okay, so that's down there.

And all we got to do now is come back here and click Replace image. And let's see, he added untitled design as the one that I just downloaded. I'm gonna go ahead and upload it, you can see in the preview is showing this little flower icon, click Save and then that applied both the logo and the bow con. And it might take a little bit of time for that to show up in the address bar. Let's see if it showed up already.

I have a Khan's cache pretty hard. So sometimes it might take a day or two for it to show up on your computer. But it is going to show up on everybody else's computer right away. And you can see in this one of my many many many tabs, you can see the little flower icon that I just uploaded.

All right, that is how you upload a logo and favicon to big commerce store. Hopefully you found it helpful. If you need help reach out to us over here at Epic Design Labs And be sure to join our community which is completely free at joinecommercegrowth Thank you so much.