How To Create Favicon For Your Blog?
Posted by Ching Ya | Posted in Blogger Tips, How To |
15
An enlarged-version
By now you should be able to see a tiny favicon I created for my blog. In case you’re wondering, it has been living there at the ‘URL/Address Box’ for almost a month now.
Nothing fancy, just a combination of 2 initials that have being living with me for as long as I can remember.
Want to know how I fix that?
1. Firstly, you need to create your favicon using a graphic-editting software such as Photoshop (Or any type that allows you to draw/edit your image). Don’t go over the top with it, as the standard size for favicon is only 16×16 px. Save your file as .jpg or .png file.
2. Next, you need to convert your image file to .ico, and generate the HTML codes to be embeded within your blog layout theme. Go to this site and get everthing ready. (No registration/membership required)
3. Copy and paste the code (circled in red) to your blogger template:
(For self-hosting site: you could use the code at no.2 at ‘Direct Download’ session)
How?
- Go to Layout> Edit HTML. Find the location for the below coding first:
- Go to Layout> Edit HTML. Find the location for the below coding first:
a) press Ctrl+F on your keyboard,
b) paste the codes below in your search box,
<title><data:blog.pageTitle/></title>
(upon locating it, paste the HTML code of your favicon right after it)
4. Save the template.
After refreshing your site, you should be able to see your new creation replacing the blogger favicon!
*******************************************************************
Having difficulties to create one? I’m more than happy to help out. You know where to find me.
Copyright © 2009 by Wong Ching Ya, All Rights Reserved, “How To Create Favicon For Your Blog?”
Hi CY!
Wow, this is great info. I am going to try it this week. I am not sure about using it with the Typepad platform, but I will give it a whirl.
I’ll let you know what happens.
Thanks for the step by step info.
Hi Luci! You’re most welcome.
Yes, I’d really like to know if it’ll work on Typepad platform. Wish you all the best! Can’t wait to see your favicon soon. ^^
Ching Ya,
Wow, this is useful material for me. I’ve been wanting to create a favicon for some time. My search may be over.
Thanks again,
-Mig
I’ve already put my favicon on my blog long ago
It really adds a personal touch to our blogs, doesn’t it?
Love your favicon too. Simple but nice looking one
You’re most welcome Miguel. =) Glad a little tip could save up your time. Can’t wait to see yours.
Welcome, Michael! Glad to have you here. Totally agree. I’m glad I finally created one, it feels more like home now. ^^ I’m off to see yours now. Hope to see you here again sometimes.
Take care.
Very good info, I will be making myself two favicons for my blogs using your tutorial (When I get some spare time!).
Good stuff, love your work
Thanks a lot Hayden. Just sharing what I learnt from the blogging process. Will be looking forward to the newlook of your sites.
Enjoy! =)
Yo, CY, this is good stuff! I got my favicon too. ^^
Hi CY,
Thx a lot! Here’s mine: http://joycescapade.blogspot.com/2009/02/i-got-favicon.html
You're welcome, Joyce. Glad you had fun with your very own favicon! It looks good indeed! ^^ Thanks for the credit & link love, appreciate it alot.
Helpful Tut Ching.
Thanks alot, Rose. ^^ And good to have you back again.
thanks for the info^^
keep it up!!!! XD
You’re welcome, Fizz. Glad you like the tutorial. ^^ Hope to see you again sometimes.
Thanks Ching Ya, you make my day bright by providing such a useful tutorial. I managed to create a favicon for my blog after reading your useful instruction. Thank you again.