How to Install Your Logo and Favicon on BigCommerce

In the ever-evolving world of e-commerce, the importance of branding cannot be overstated. Your brand logo and brand favicon are the face of your brand, and ensuring they are correctly installed on your e-commerce platform is crucial. In this article, we’ll delve into a detailed guide based on a video by Kal, the CEO of Epic Design Labs, on how to seamlessly upload your brand logo and brand favicon to your BigCommerce store.

The Importance of Your Own Logo Image and Favicon Installation

Your logo is not just an image; it’s the representation of your brand, website or online business’s identity. Similarly with logos and brands, a favicon, though small, plays a significant role in brand recognition, especially when users have multiple tabs open. As a leading bigcommerce development agency, we understand the nuances and intricacies involved in the process. Here’s a quick rundown of what to expect in the video:

Step-by-step Guide: Kal provides a hands-on tutorial, sharing his screen to walk viewers through the entire process.
Logo Sizing: Learn the ideal size for your logo to ensure it looks professional on your site and printed media.
Favicon Tips: Discover how to create the perfect favicon using tools like Canva and the types of files BigCommerce supports.
Potential Pitfalls: Kal highlights common mistakes and how to avoid them, ensuring your branding is on point.

Key Takeaways from the Video

Centralized Upload: BigCommerce allows you to upload both your logo and favicon in the same spot, streamlining the process.
Optimal Logo Size: A width of around 250 pixels is recommended for logos. This size ensures clarity on the website and printed materials like invoices and packing slips.
Favicon Creation: Unlike some platforms that require specific file types, BigCommerce is flexible, allowing PNG, GIF, or JPEG formats for favicons.

Ready to Enhance Your Branding?

If you’ve been wondering how to add logo in bigcommerce or how to add favicon in bigcommerce logo theme, this video is your one-stop solution. With Kal’s expert guidance, you’ll be equipped to enhance your store’s branding, ensuring a cohesive theme and professional look.

Don’t miss out on this valuable resource for online business now. Click to watch the video above and elevate your website or e-commerce store branding game!

Full Transcript

(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.