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
11 comments:
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
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
<![CDATA[
Let's try this again. I have made a few changes to the post above. If you still have problems, let me know.
yey Cara, the code worked!!! Check me out www.ATeachersTreasure.com
Thanks so much for the tips!!!
❤ Mor Zrihen from...
A Teacher's Treasure
Teaching Treasures Shop
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?
ThinkShareTeach
It worked .....and I am completely untechie!!!! THank you! -
~jeannie~
Kindergarten Lifestyle
http://www.facebook.com/kindergartenlifestyle
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 --http://kindergartenlifestyle.blogspot.com/2012/01/i-did-it-i-did-it-i-tried-something.html
~jeannie~
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.
Awesome, thanks! Followed the directions and they worked perfectly!
Check out my blog if you have a chance!
Colleen Patton
Mrs. Patton’s Patch
Hi, Thanks for that! it worked. Now to tweak some things..
** Check out my blog at nztechnologyblog.blogspot.co.nz
**
Thanks so much for posting these directions! They worked perfectly.
I Teach. What's Your Super Power?
Post a Comment