How To Add A Browser Tab Icon To Your Ecommerce Site

How To Make A Browser Tab Icon

What Is A Browser Tab Icon

A couple years back now internet browsers added the ability for you to have tabs. Tabs are the little windows along the top of your internet browser. They let you have more than one internet browser or website open at a time. They are a life saver and often I find that I have too many tabs open. Tabs allow you to work on multiple things at the same time and then tab back and forth between the different windows. Below is a screenshot of all my tabs and the corresponding browser tab icon.

Browser Tab Icon on Chrome

Here are all my tabs and their corresponding browser tab icon

As you can see, it can get rather confusing when you are working on a number of different windows to know which is which. This meant browsers needed a way to easily show with a little  browser tab icon which tab belongs to which site.  This was the official birth of the browser tab icon.  Now the official name for the browser tab icon is actually a favicon.  This name came from how they originally started.  When you saved a site as a bookmark or favorite, the internet browser would also insert the browser tab icon for your favorite sites.

Browser Tab Icon Favorites

I kind of like favicons and its a little touch that I’m always sure to take care of with all our new sites.  Unfortunately a ton of people forget about this element and there are countless ecommerce sites still rocking the default browser tab icon.  It’s become a bit of a pet peeve for me.  I cringe when I see an ecommerce site using a platform like Magento or Shopify or Volusion and they have forgotten to change their browser tab icon.  I think it looks unprofessional.  I equate it to forgetting to take the tag off your clothes when you wear them for the first time.

Default Ecommerce Browser Tab Icon

Here are default browser tab icon options that you may see on peoples Magento, Shopify, of Volusion Ecommerce Sites

Some Awesome Browser Tab Icon Examples

So before I get to the meat of this post where I will show you how to make and add your own browser tab icon, I wanted to show you some cool favicons I love.  The options are endless.  It’s a great way to add some character to your site and make it look more professional.  The Ecommerce space can be very competitive and every little detail can add legitimacy to your brand.  These little factors all add up to build confidence in your customer.  Confidence equates to more sales.

Recognizable Favicons or Browser Tab Icons

Here are some recognizable favicons

 How You Make Your Own Browser Tab Icon

So lets now talk about making your own favicon.  The first step in making a successful icon is making sure it complements your brand.  A favicon is tiny. You only have 16 pixels by 16 pixels to show something that relates to your brand.  The space you have a is a square.  This means that you need to think of something related to your brand that is square shaped.  You don’t want to try and use your full logo.  If you see the examples above from those large brands, they have all chosen something distinguishable from their brand that nicely fits within a square.

If you have a logo, maybe there is an element or symbol that is part of your logo that makes for a great option for your browser tab icon.  In our example of Long Live The Internet we are going to just use the crown from our logo.  Likewise for our website maintenance company we just used the Nerd from the logo.  In the case of our digital agency we didn’t really have an icon or something to use.  We decided that the orange color in our brand was distinguishable and would stick out.  We also decided that the “C” from the beginning of our name would be a good option.

Our Browser Tab Icons

These are two of our favicons

 

You want to try and stay away from gray as a color that you use.  Most peoples browser tabs are gray in color.  Using a gray will get your favicon lost. Furthermore its boring.  It’s best to use brighter elements of your logo or brand to make sure it sticks out and is distinguishable.

Once you have decided on what portion of your logo or brand you are going to use, you want to make sure you isolate that portion in a square.  You just want the portion of your logo that you are going to use.  To do this you are going to have to roll up your sleeves a little to use an image editing software.  If you have a graphic designer, you can simply request the particular element you want in square dimensions of any size with a transparent background.  That’s either a png file or a gif file.  If you don’t know what I’m talking about and plan on doing this yourself, I got you.  Read on.

Getting Your Logo Ready To Make A Browser Tab Icon

For those of you on a budget and without a graphic designer, you can still do this yourself.  If you don’t have photoshop there are other simple image editing tools that you can use.  One of our personal favorites is Canva.  Unfortunately at this time Canva does not support transparent backgrounds.  For this exercise we want something that supports transparent backgrounds.  We are going to use Photoshop but you can use whatever basic image editor came with your computer.  You want to start with your original business logo design file that you received when you had your logo made.  This file can be a number of different types but you are looking for one that ends in .png or .gif.

These two files types support transparent backgrounds.  You want to work with a transparent logo.  If you don’t, you will end up with a square around your favicon.  Its not the end of the world but I don’t think it looks as nice.  I much prefer a transparent one that blends into the browser tab.  Below is the difference.

Transparent Browser Tab Icon

Clearly One Looks More Professional

Once you have located your logo you want to resize the image to about a height of 50.  Most of the time the original logo design you received is very high resolution.  This means the image is very large.  You want to use the editor to reduce this size first.  Once the size is reduced, you are going to want to crop the image.  This is where you cut off the rest of the logo that will not be part of your favicon.  Below you can see we are cutting off all of the words from our logo so that we can just isolate the crown.

Cropping Logo to Make Favicon

Here we are cropping our Logo To Isolate the Crown

Once you have isolated the portion you are going to use, you will want to save this file to your computer.  I always save to my desktop so I can remember where it is.  Now its time for the fun part.  You are going to go to one of two sites that I use.  Favicon Generator or Favicon.cc.  Both of these sites do similar things.  I like to test both of them to see which one makes the best favcion.  These sites will take the image that we upload and convert it into a favicon.ico file.  This file is what you will need to implement your own browser tab icon.

Favicon Generator

For this site you will land on the home page where you will see a portion in the middle of the page to Generate your favicon.ico.  Click on the Choose File button and navigate to your image on your computer.  Hopefully you saved it to your desktop and you can find it now.  Once you have selected it you will select “Generate only 16×16 favicon.ico” and make sure that “Maintain Image Dimensions” is checked.  You don’t want to distort your image.  You will then see a preview of your image on the screen.

Download Your Favicon

Our Browser Tab Icon Preview

Lastly you will click on the link to download the file to your computer.  This downloads the .ico file.  Unfortunately you won’t necessarily be able to double click on this file to see it. If you are using Google Chrome you will see the image at the bottom of your browser where your downloads go. Don’t change the name of this file.  You must keep the file named favicon.ico

Favicon.cc

As opposed to Favicon Generator, Favicon.cc actually allows you to draw your own favicon.  If you are feeling artsy or possibly had difficulty cropping or sizing your image, you can take a stab at drawing your own browser tab icon here.  Assuming you were able to resize your image though, you are going to click on “Import Image.”  From here you will go to a new screen where you will click on “Choose File.”  Navigate again to your saved image on your desktop and upload the file.  Make sure again that you have “Keep dimensions” selected.

Once uploaded you will actually be shown a preview on this page of your favicon.  You also will have the ability to revise some of the fields to further clean up your browser tab icon.  I really like this site because of the tools available.  And the best part is that both of these sits are free.

Favicon Preview from Favicon.cc

Once you are satisfied with your browser tab icon, you are going to click on “Download Favicon” to save the file to your computer.

Adding Your Browser Tab Icon To Your Site

Now that you have your favicon generated, its time to add it to your website.  This process differs slight depending on the ecommerce platform that you are using.

Word Press

If you are using a WordPress site with a theme, often times the theme has a simple spot in the settings for you to upload your favicon.  If there isn’t a simple way for you to upload this file you are going to want to upload the file to your media section on the left menu.  Once its uploaded, you will want to click on the file to get the location of the file.  It will be something long like

 http://llti.s3.amazonaws.com/wp-content/uploads/2015/03/favicon.ico

 Once you have the location you are going to go to the Appearance tab and click to the editor.  You are going to find the header.php file and enter a line of code in the <head> and </head> tags.  You should search by click CTRL and F on your keyboard for the word favicon.  If you find a line in there already you will be replacing it.  You will insert the following line. Note you will replace the X’s in the example below with the url of the actual image that you uploaded.

<link rel="shortcut icon" href="XXXXXXXXXXXXXXXXXXXXXXXXXX" />

Save you changes, refresh the page and you should be good to go.
Shopify

If you are using Shopify, you are going to upload this file to the assets folder from the Edit HTML/CSS page of the admin.  Once that is uploaded you are going to need to insert the following line in your Theme.liquid file anywhere between the <head> and </head> tags.

<link rel="shortcut icon" href="{{ 'favicon.ico' | asset_url }}" type="image/x-icon" />

Once inserted you should be able to refresh your browser window and see your favicon.  You may need to hold down CTRL and F5 to force the browser to get the new favicon.  It may take a couple of tries.

Volusion

To customize your browser tab icon on Volusion you are going to go to Design > Logos from the Admin area.  Expand the more logos section and locate the Favicon heading.  From here you can simply drag your file from your computer into the drop zone on the site.  Nice and simple.  Save and refresh the page.  CTRL + F5 forces it to get a new version and make sure it loads your new file.

Big Commerce

For Big Commerce users you are going to first navigate to Design and cick on More > Favicon as the first step to adding your own custom browser tab icon.  Next you are going to browse for the file on your computer.  Lastly you will click on the upload favicon button to complete the process.  Make sure you refresh the browser a number of times and press CTRL and F5 at the same time to force the browser to refresh.

Our New Browser Tab Icon

So in our case we actually ended up using the one generated by Favicon Generator. It was slightly crisper and looks really nice.  We are super happy with our new favicon and hope that you were able to update your sites as well.

Our Final Browser Tab Icon

The Mona Lisa

Are You Ready To Start Your Own Online Business?

Start An Online Store Crash Course

Sign up now to receive our 5 Step FREE Crash Course to starting your own online store. Learn the tricks we have used with clients for years. Get started building your future now.

  • FREE 5 Step Crash Course
  • Designed For Beginners
  • Receive our Resource Guide Instanlty
  • Start Now By Entering Your Email Below