Enter your email address:

How To Change Your FavIcon | Custom Tab Icon Logo


Do you have a blogger blog? If so, have you been trying to figure out how to change the logo from the Blogger orange "B" that is at the top of your tabs to something else? If you do not use Blogger then do not worry because this post can still be applicable to you! All webpages are made out of a computer language called HTML, and what we will do is some minor editing to the main layout of your website or blog.

The icon that shows up in the top tabs of your window is called the FavIcon. It's sole purpose is to help people to get accustomed to your brand name or logo. These days, all search engine optimization idealist and companies are shaping around the idea of brand recognition. Brand recognition has been around for years, but on the web it is a new version of the old concept.
There will be a few things that you will need to have or know how to do before you can successfully change your Icon at the top in the tabs. If you you will need a small graphic or logo that you use to promote your brand. File hosting is going to be necessary and at least there are many free places online that you can upload your files to. You will also need to be able to get access to the HTML or XML that your website or blog is written with. This could be simple or it could be a daunting task that will prove to be a pain in your butt.

All in all the process is quite simple even if you are a novice to the world of computer languages. Do not worry yourself to death just because you have a lack of experience with this type of stuff. Just about 9 times out of 10 I find myself saying, "That wasn't so bad", because it was just that easy. Lets not forget to mention the sense of accomplishment that you feel after you complete a task that shows or proves instant results.

Here are the few steps that will be necessary in order to change your FavIcon logo for your blogger account. Please note that if you do not have a Blogger blog then do not worry. The only thing that is different for you is how you will access your HTML that is your website.
  1. Design or find a small logo that is 16 pixels by 16 pixels. This icon is going to be super tiny, but it will show up in the browser the size that it is supposed to be. You can use PhotoShop or Gimp (a free version of PS) to create your favicon in just a few seconds. I could even possibly help you in my spare time if you write me some feedback with your request.
  2. Upload your favicon into a photo sharing service of your choice. You can use PhotoBucket, Picasa, Flickr, your own website hosting, or any other photo sharing website that you may know of. First create an account because most website will make you before they let you use their service. Once on your homepage or dashboard click on upload and browse through your files on your computer. Once uploaded you can get access to the sharing links, and what you are looking for is a direct HTML link to your picture. I use PhotoBucket in case you were wondering.
  3. Access the HTML file for your website or blog. If you have a Blogger account then follow these steps directly for easy installation.
    • First sign into your account and click on the Layout link on the dashboard. 
    • Next you will need to click on Edit HTML and once there click on the Download Full Template link. This will backup your template just in case you mess something up during the installation of your code. 
    • Now you can click on the Expand Widget Templates check box that is directly above all that HTML that you are seeing.
  4. Find the head tag of your template and post the code below directly after it. Make certain that you change the direct link in the below post twice. Each one will need to be the same as your direct link that you have from your hosting website.
To easily find the head tag press the CTL and the F key at the same time. This will make a search box pop up so you can type in the ending tag of the head tag. </head>

Once it is found that word on your blog template you can press enter directly after it and then copy and paste this code below it:
<!-- START FAVICON --><link href='Paste Your Direct Link Here' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

<link href='Paste Your Direct Link Here' rel='icon'/><!-- END FAVICON -->

Simply save your template and then you are done. Go ahead and view your blog and make sure that your logo is showing up at the top like it is supposed to. If not, just upload your old template that you saved prior to editing and start over. If you feel up to it you could just find a part of that HTML tag and edit accordingly.

If this article has helped you why not re-tweet it so others can hear about it. You can always subscribe to my feed if you are a new reader on this site.

    If I have helped you why not buy me a cup of coffee?


    Post a Comment

    Please Familiarize Yourself With Our Policies Below: