I don’t know if you remember but back in February, Mr. Jenners created a favicon for this blog. It was a real pain the butt for him — mostly because Blogger is a hot mess. But he eventually figured it out, and I was so happy. Then I changed my blog look around and deleted what he had done. I didn’t want to ask him to do it again so I just sucked it up. But then I came across Carissa’s blog — GoodNCrazy — and saw there was a tutorial on creating a favicon for Blogger blogs. (Of course, it is super easy and simple in WordPress. Argghhh… again with my WordPress envy.) So after doing a guest post for Carissa last week, I asked her if she could return the favor and let me reprint her tutorial on creating a Favicon for Blogger. If you have no idea what I’m talking about or if messing around with HTML scares you, you should probably just skip this post! But if you feel somewhat comfortable with stuff like this, why not create your own favicon for your blog?
Creating A Favicon In Blogger
People keep asking: What are those little picture icons on people’s blogs, right up there next to the URL box? A FAVICON, folks. You want one? Let’s create a Favicon for Blogger.
What you will need to make your own FAVICON:
- A square image. (Likely you have a 125×125 pixel button — this will work.)
- A photobucket.com account. Go ahead… create one, you can do it.
- A way to make your square image smaller — such as Photoshop or picnik.com.
- You’ll need to know where your blogger html template is. (Be careful, always save your code somewhere, and always click preview before you save changes!)
That’s it. Are you ready? OK.
Let’s assume for those of you with Photoshop that you know enough about it to change the image size of a 125 button down to a 16×16 pixel image. You then need to upload your 16×16 .jpg image to Photobucket.
Open Picnik.com. Upload your 125 button. Click to resize. Change proportions to 16×16 pixels. Choose save and share. Then upload to your Photobucket account (it will be a .jpg file).
There are three steps to insert the code into your Blogger HTML Layout.
1. Find the code (in bold below) in your blogger HTML template (use control F to search):
2. A couple lines below the title code copy, paste in the folowing:
but first: and this is important… add brackets around the above code: < >
3. Go to your photobucket 16×16 pixel image and mouse over your it. Highlight DIRECT link and copy and paste this code where it says URL of your icon file, LEAVING the apostrophes where they are. Okay test it out! Click preview to see if your favicon is live up by the URL! Then click save. You are so favi-licious baby!