How to Install Your Logo and Favicon on BigCommerce

(00:00)
Hey there! In this video, I’m going to show you how to upload your logo and your favicon to your BigCommerce store.
Before we get started, my name is Kal, and if you find this helpful, hit subscribe to catch my weekly videos on how to grow your ecommerce store.
Alright, let me share my screen and walk you through the process. It’s pretty easy.
Uploading Your Logo and Favicon
On BigCommerce, go to Storefront and then Logo. This brings up a screen where you can upload both your logo and favicon.
I’m not sure why it doesn’t say “Logo and Favicon,” but that’s where you’ll find the option for the favicon too.
(00:24)
I’ve prepared a few logos to demonstrate.
This first one is too big.
The second one is vertical, which won’t look good on my website, but I’ll use it for the favicon.
The last one is a smaller version that I’ve sized down to about 250 pixels wide.
Choosing the Right Size for Your Logo
(00:46)
I’ve built many sites, and a 250px width is a good size. It can vary a bit, but 250 is a nice middle-ground—neither too big nor too small.
Something important to note: the logo you upload here will also appear on your printed materials, like invoices and packing slips. So, if you upload a large logo (600 or 1000 pixels), it’s going to be massive on those materials, taking up the entire width of the page!
(01:15)
To avoid this, make sure to resize your logo ahead of time. I’ve set mine to 250 pixels wide, which works well. Now, let’s upload it.
Uploading the Logo
(01:44)
All you have to do is drag the logo to the upload section.
You’ll notice a recommendation for the logo size, like 100 by 45px. Don’t worry about that—it’s too small. Change the dropdown to “Original as Uploaded.”
If the logo still looks too big, a developer can easily resize it using one line of CSS. But for now, 250 pixels is a good starting point.
(02:19)
Now, I’m going to save it. Let’s take a quick look at it on the storefront to see how it turned out.
There you go, it looks pretty good at this size!
Uploading the Favicon
(03:02)
Next up, the favicon. Many platforms require an ICO file, but BigCommerce is more flexible. You can upload a PNG, GIF, or JPEG for your favicon.
I’ve never tried an animated GIF for a favicon, but apparently, it’s possible!
(03:37)
For now, we’ll stick with a 32 by 32 pixel PNG, which works best for most browsers. I’m using Canva to resize my logo.
I’ll create a design at 64 by 64 pixels—double the size—so we can scale it down later without losing quality.
Resizing the Favicon in Canva
(03:56)
After dragging the logo into Canva, I’ll size it to fill the space while making sure it’s centered. It will be much smaller when displayed, so don’t worry if it looks big here.
(05:18)
Once you’re happy with the sizing, use Canva’s Background Remover (a premium feature) to ensure your favicon doesn’t have a white background. This will let your logo stand out against any browser background.
(05:50)
Now it’s ready! I’ll export it as a PNG with a transparent background and scale it down to 32 by 32 pixels. That’s why I started with 64 by 64 pixels—to get the exact size when scaled down by half.
Final Steps
(06:24)
Now, I’ll upload the favicon by clicking Replace Image and selecting the file I just downloaded. You can see a preview of the little flower icon. Click Save, and we’re done!
(07:17)
It might take a little time for the favicon to show up in the address bar, as favicons are cached pretty heavily. But rest assured, it will appear on other users’ computers right away.
(07:48)
And that’s how you upload your logo and favicon to your BigCommerce store! I hope you found this helpful. If you need assistance, reach out to us at epicdesignlabs.com.