How to Install Your Logo and Favicon on BigCommerce

Hey there. In this video, I'm going to show you how to upload links to your logo image and links to your favicon to your own page in big commerce store. Before we get started, my name is Kal. And if you find this helpful, hit subscribe so you can see my weekly videos about how to grow your brand page in eCommerce store.

Alright, let me share my screen, and I'll walk you guys through it. It's pretty easy on BigCommerce; you go to the storefront and then logo. And that'll bring up a screen that looks like this: And it'll actually let you input and save your store logo image and save your favicon in the same spot. I don't know why it doesn't say logo and favicon. But that's where store logo image and the favorite icon is.

How to Add Logo in BigCommerce

All right, so I have some logos prepared here. I have this one that's entirely too big; 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 a logo image a lot of sites. A 250 width is a good width; it could be a little bit less, sometimes a little bit more. But 250 is kind of a good middle-of-the-road width for a the logo image size without getting too crazy big or too crazy small.

Logo Image

Something to know about the logo as you upload it into Big Commerce: when you upload it here, this bigcommerce logo is the same bigcommerce logo that's going to go on your printed media like your invoice and your packing slip. So if you upload your logo, 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 it saying, "Wow, these guys really liked their logo image," 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 have to do is just drag the image editor to logo right under here to upload it, just like that. And down here, it says the recommended logo size for your theme is 100 by 45. Just don't listen to that. That's just too small; nobody's going to read a 100-pixel-wide logo image. You can see how small it looks here. So what you can do is go to this drop-down where it says optimized for the recommended size for your theme, go ahead and change that to original as uploaded. Now, if this ends up being a little bit too big for active theme, I would recommend still leaving it as is. 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 for your logo material, like your printed media, your packing slip, and your invoice.

Alright, so it's uploaded at page 250. I'm going to go ahead and just click save it; we can look at it from the front by going like this. And there you go; you can see it looks pretty good at that size.

Now the Favicon

All right, so we're good on the bigcommerce logo; now we just need to do the favicon. Now a lot of frameworks require you to either upload a logo image as an ICO file, which people have difficulty coming up with. A lot of frameworks also make you upload a logo, load one even smaller than this, usually like 16 by 16, which is what a lot of them do. BigCommerce will let you upload a little bit bigger one, which is nice. And they'll let you upload it as a PNG, GIF, or JPEG. I don't know if it can be an image file format animated GIF; I've never tried that. But apparently, you can do a GIF.

Alright, so what we need is this 32 by 32 pixel png. My brand image editor and page logo and your image editor and logo probably aren't sized exactly perfectly. So I'm going to go to my friendly little Canva tool here at canva.com. And I'm going to click Create a Design. And I'm going to tell you it's a custom image size, 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 image into this. Maybe it's going to 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 that this has been entered as larger than 64 by 64. So I'm going to be fine with increasing the width dimensions my logo size or image size like this. And I'm going to do this and try to get it really close to the edge, side to side, like really close to the edge. 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. Alright, well, I guess this will work. Now it's going to end up being much smaller than this; this is going to be a 32 by 32 little square. So it's going to be this tiny; it's not going to be this big, right? This is zoomed in, plus it's too large for what I'm doing.

Editing with Canva

Now, you can see that when I uploaded this image editor, it didn't upload it with a background because I was working from PNG. If you uploaded this image from a background, you might want to come in here, click Edit Image, and use this premium theme feature of Canva, which only costs you like eight bucks a month or something, to remove your background. That way, you don't have a white background behind your image. And it'll show your icon color against gray, like Big Commerce's icon has appeared on one of my computers many tabs.

Alright. So I've gotten it sized 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 have to do is export this, and so I'm going to go share and upload a logo image then download and 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 the transparent background and make sure that it the transparent area doesn't show a white background behind it. And right here, where it says size, I'm going to scale this down to 32 by 32. As you can see, that's why I chose 64 by 64. So I could basically scale it down to exactly point five and know it was going to hit 32 by 32. Alright, so size it to 64 by 64 and output it, scale it down to a half, and click download.

Okay, so that image's down there. And all we have to do to save it now is come back here and click Replace Image. And let's see, "untitled design" is the one that I just downloaded. I'm going to go ahead and upload it. As you can see in the preview image, it's showing this little flower icon.

save, and then apply both the logo image and the favicon. And it might take your computer a little bit of time for that logo to show up in the address bar. Let's see if it shows up already. Icons 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 my computer and everybody else's computer right away. And you can see in this one of my many tabs the little flower icon that I just uploaded.

All right, that is how you upload custom image, logos, a logo image and favicon to a big commerce store website or page. Hopefully, you found it helpful. If you need help, reach out to us over there at epicdesignlabs.com. And be sure to join our community, which is completely free, at joinecommercegrowth.com. Thank you so much.