For those who don’t know what a favicon is- it’s the very small graphic that appears directly beside the address bar. With blogger you’ll notice it’s a ‘B’ with an orange background.
If you want to make one of your own to match your blog design- it’s pretty easy.
1. First decide what you want you favicon to be, it can either be an image you already have, your logo, or a couple letters (like mommy moment)- either it cannot be anything super detailed because the picture with be made pretty tiny (16px X 16px).
2. Make sure the image you plan to use is square, and upload the image in it’s original size HERE.
3. Once your image is uploaded you will see an option at the bottom that says ‘download’ click that option and save the file to your computer.
4. Now that the favicon itself is made we need to head into your html to make a few changes. Once in your html look for this tag:
5.Right BEFORE this tag, add the following code:
6. Once this code is added, upload your recently made favicon to photobucket- either the gif or png they provide). Once uploaded copy the direct URL, then paste in the code over where it says ‘YOUR-FAVICON-URL’ it will be in the code twice.
7. Now save and preview your blog- and you will see your new favicon!!
Any questions about this tutorial? Please email me at simplyfabbblog{at}gmail{dot}com with your questions! Have any ideas for tutorials? I would love to hear your feedback!
Msria
Wednesday 17th of April 2013
Iam doing a new website so it is in construction currently "the six mile spot." I am sharing this with my daughter. I am also new at blogging so I really am having a difficult time withthe jargon (blogging wording) for example favicon. I still can't really get it. Not your fault. I am a hands on person and visual. I will problably need to read it a 100 times then I can say "o" MsRia/Maria. I don't even know which name I am using I love Msria Thanks for your help I am going to continue to follow again
Renee
Sunday 24th of July 2011
HELP :( I can not get mine to show up... I use Google Chrome...
Divine
Wednesday 8th of June 2011
For some reason regardless of where I look I see the but don't see the closing for it..and keep coming up with Blogger saying “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”" I've uploaded my favicon image to photo bucket. Tried the direct link as well as the img src code. Nothing is working..can someone please help?
Divine
Wednesday 8th of June 2011
sorry didn't let me post the head code...but that's what I can find is the opening code for the head but not the closing for the head.
Thank you!
Kim
Wednesday 11th of May 2011
In case anyone stumbles upon my previous comment - I have found out why this hasn't worked for me. I am using the new blogger templates, so a different code was needed. I found the instructions that come with the iconj.com website's favicon converter worked perfectly. Thanks for the inspiration this tutorial gave, even if the instructions didn't work for me!
Kim
Thursday 5th of May 2011
I was so excited to try this, but blogger just doesn't seem to want to let me! I know nothing about html, so I may not be changing something in the code as I am meant to (I DID however, change the 'your-flavicon-url' to the actual url!). Blogger says "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: Open quote is expected for attribute "{1}" associated with an element type "href"" Does anyone have any ideas? Thought I'd ask here before researching further/emailing Lena, the author of the post.