Denim Column

About The Author

My photo
Alabama, United States
Educator and Lifelong Learner, Asst Principal at @cmslions, #NBCT, #EdD from @ucumberlands, @Google Educator Lvl 1 & 2, Google for Education Certified Trainer

Saturday, January 21, 2012

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: 

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: 

So, my code was
<link href='' 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.

Pin It


Unknown said...

Cara, I tried the tutorial but when I entered the code into the template's HTML it gave me an error message :(

❤ Mor Zrihen from...
A Teacher's Treasure
Teaching Treasures Shop

Tiffani said...

I too couldn't get it to work. I tried removing the ' but still got error message. Also my html did not have the Fn+F:
only the

Dr. Cara Whitehead, NBCT said...

Let's try this again. I have made a few changes to the post above. If you still have problems, let me know.

Unknown said...

yey Cara, the code worked!!! Check me out

Thanks so much for the tips!!!

❤ Mor Zrihen from...
A Teacher's Treasure
Teaching Treasures Shop

Farrah Kilgo said...

Yes, the revised code worked! Great post, Cara. I was thinking about this very thing a few days ago...I'm thinking of changing my favicon because I can't see it well. Can you?

dsdds said...

It worked .....and I am completely untechie!!!! THank you! -

­ Kindergarten Lifestyle

dsdds said...

Cara I had to let you know I tried both techie tips and they worked beautifully thank you!!

I even did a blog post about them - check it out --


Learning in Bliss said...

Thanks Cara! I was wondering how all of you did the favicon. I am new to blogging and appreciate all the help I can get.

Mrs. Patton said...

Awesome, thanks! Followed the directions and they worked perfectly!

Check out my blog if you have a chance!
Colleen Patton
Mrs. Patton’s Patch

Matthew Chan said...

Hi, Thanks for that! it worked. Now to tweak some things..

** Check out my blog at

Megan said...

Thanks so much for posting these directions! They worked perfectly.
I Teach. What's Your Super Power?