First–Thank you to everyone who added their input in the comments section of last week’s Blogging 101 post! It was fun to read so many thoughts about what makes a great blog. Now let’s get to this week’s question!
This weeks question:
Q: How do I add a favicon to my blogger blog?
A: Let’s first take a look at what a favicon is! A favicon is like a logo–it’s the little image that shows up next to a website’s address. On blogger, you’ll see the orange and white “B”.
So let’s take a look at how to change your blog’s favicon to something more fun. It’s truly a great way to make your blog standout!
Step 1:
First we need to create a small image that we can turn into a favicon. To do this, youll need some sort of editing program. If you dont have a purchased program such as Photoshop, there are many free options that will work great for our purposes! My personal favorite is Gimp, but you can use anything from Picnik to your basic Paint program.
The image you create needs to be 15X15 pixels. Keep in mind that this is very small, so consider creating something simple!
Step 2:
Once youve created an image that youre happy with, save it to your computer as either a .jpg, .png, or .gif file.
Step 3:
After you’ve saved your image, we need to find a favicon generator on the web. I suggest going to http://iconj.com/.
Step 4:
Once there, find where it says “Free Favicon Hosting”. Click on “Browse” to find and select the image you just saved to your computer. After you’ve selected your image, select a sharpen level of “Sharpen +3” as I’ve shown here in purple.
Step 4:
Once you’ve selected the sharpen level, click on “Upload Now”. You will then see a page that says you’ve uploaded your image successfully. On this page, highlight and copy the link from the “Direct Link” section.
Go to your blogger dashboard and select “Design”.
Under the design tab, select “Edit HTML”.
*NOTE: I would strongly recommend backing up your template before completing the next steps!*
Once in your HTML section, search the page for the following: </head>
Place the code you copied from the favicon site directly after the </head> code you just searched for.
Save your template and then take a look at your blog. If your favicon doesn’t show up right away, try refreshing the page. Now instead of the standard logo, your blog should have a cute favicon of it’s own!
Keep in mind that while favicons show up in most browsers, they will not appear in all of them. Good luck everyone!
Do you have a question you want me to answer? Leave a comment! 🙂
Hm, for some reason I can’t find the html-code where I should put the link. It does not exist in my code. Any suggestions?
(And I can not post the code in the comments … it does not show up …)
Thanks for that tutorial – I tried to make my own favicon. (Did not even know what a favicon is before!) But I am having trouble … problem is in my html code there is no
There is only
And if I put the copied bit behind that nothing happens at all …
Do you know why there is no in my code and what I could do to still add a favicon???
And thanks again for your help – I love the whole series!!!
Wow! Thank you so much for sharing!!
http://homelifestyledesign.blogspot.com
It should show up on Firefox! If you are still not seeing it, email me at [email protected] and I can try to help you!
As far as I know, there is no solution. Internet Explorer is rather notorious for issues like this. I know that many people are simply steering clear of IE these days, so hopefully the majority of your readers will use browsers that it shows up on!