Adding Favicons to Your Blog

First, what is a favicon? A favicon is the little picture that shows next to your website name in the address bar, favorites, and bookmarks. If you are like me, you may have multiple tabs open at one time. Favicons make it easier to distinguish tabs.


I am an avid Chrome user. So, you can feel my disappointment when my favicon for my blog did not show in Chrome. I used the Favicon gadget in Design mode of Blogger. My favicon showed in Internet Explorer but not Chrome. Thus, my Google search began. The search brought me to {this site}. I am not sure if these steps will work in other blog platforms, but it does work in Blogger. If you are a Wordpress, Tumblr, etc. user, please let me know if this works for you, too.


To create your favicon to show in all web browsers, follow the following steps:

1)Change the size of your blog button to 16X16 using paint. Save it as a different name, so you don't write over your original blog button. Paint>Open>Resize>OK>File>Save As

2)Upload your button into an image hosting website (i.e. Photobucket, Flickr, etc). I used Photobucket.

3)View your album. 

4)Hover over your album. Copy the code for the Direct Link.

5)You now need to link the icon to your blog.  

6)Go to Dashboard > Design > Edit HTML (do not expand widget template). Use CTRL+F to find this line of code using Fn+F: 

<b:skin><![CDATA[

7)Insert the following code immediately before that line (You must keep the ' before and after the link): 

<link href='PUT DIRECT LINK URL HERE' rel='shortcut icon' type='image/x-icon'/>

My direct link looked like this: http://i1092.photobucket.com/albums/i403/WhiteheadsClass/favicon.jpg 

So, my code was

<link href='http://i1092.photobucket.com/albums/i403/WhiteheadsClass/favicon.jpg' rel='shortcut icon' type='image/x-icon'/>




Change the orange text to the Direct Link you copied from Photobucket.




8)Preview the template to make sure you have no problems with your code. If everything is OK, save your template.

9)You should now see your favicon in Chrome.

~Cara

Pin It