Creating A Favicon by Carissa
by Jenners • 05/14/2009 • Guest Posts • 9 Comments
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.
Above is is what Carissa’s image looked like before it got the Favicon treatment…..
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!
P.S. I’m hearing that you cannot see favicons in Internet Explorer so you have two choices. GET FIREFOX already. OR. Read some ideas at favicon.com.)
YOU are so awesome. I’ve missed your posts while away. I’ve ALWAYS wanted to do the Favicon thing for my blog, but it’s a huge pain that I’m not sure I can tackle yet. I am quite technically challenged.
Oh my gosh THANKS Jenners! I’m so happy to see the favicon wonders out there.. you all rock and deserve a big kiss for trying this tute.. I’m off to see how Bee and Rose’s came out!
Ta ta!
Enjoy the FAMILY Jen!
I will have to get my hubby to give it a try. Thanks for posting.
I have a favicon, but this reminds me to go change mine. And write a good blog post.
I will fail admirably at BOTH.
I did the same thing when the hubs did my favicon! I totally deleted it on accident like a week later he was ready to strangle me, lol.
I just made a little owl favicon and I love it!
I have WordPress envy too….
Thanks for this tutorial! I’ll have to give it a shot
Great tutorial! Thanks for sharing!
I hate how favicons are not visible in IE unless you have them bookmarked.
A good tutorial, but I’m not as tekky as you. Will give it a try however.