“Favicon”, a special word form from “favorite icon”. What is it? It’s the tiny image right beside the URL which appear in your web browser. When you bookmark your favorite websites (with favicon available), you will also notice the favicon will appear beside the title. Most popular websites will have their own favicon. Such as Yahoo! has a red Y! and Flickr has a blue and pink circle. It’s time to make one for your own website or blog!
Today, I’m gonna guide you how to add a favicon to your blog.
First of all, you have to look for an icon image, or create your own icon image, for your favicon. The image can be in either .ico or .png extension. The suggested size of the icon file is 16 x 16. If you want to create an .ico file out of your favorite image (.jpg or .gif), you can easily convert it within seconds!
Make your favicon (.ico) from pics!
Click on the “Browse” button to browse for the picture you want (for your favicon, of course) . Then click the “Generate FavIcon.ico” button. In this example, I intend to generate a donut icon.
When the generate process is done, you can get to preview your favicon. Just click on the “Download FavIcon” button to download it. It will be in a .zip format. Inside this file, there are two version of favicon - normal and animated. Make your choice.
Now you have your favicon ready. You can use the default name of “favicon.ico“.
The next step is to upload your favicon.ico to your web host or any free image hosting service like Photobucket (Take note: some free image hosts do not allow .ico file, in this case, you can choose to make an image in .png format by resizing your image in any image editing software. In this case, you can just skip the above .ico tutorial). And get the URL of your favicon.
Recommend: You can also create your favicon and host it via IconJ.
Then, you will just need to implement a code anywhere in between the <head> </head> tag but not inside the <title> </title> tag of your blog HTML. Use the following code:
<link rel="shortcut icon" href="your favicon URL here" type="image/x-icon" />
Note: replace the “your favicon URL here” to the exact location of your favicon where you uploaded.
For own-hosted Wordpress, you will have to add the above code in your header.php file. You will be able to look for the <head> </head> tag there.
Why do you want to have your own favicon?
- It’s a recognition, logo, trademark.
- It’s unique and cool.
- A more complete theme for your blog / website.
Does your blog have a favicon of your own? Try it out today, if you haven’t.
Edited: 25 May 2008
Similar Posts:
FU-YOH!!! u using the same theme with me???very good very nice…=)good wish with your blog!!!
Hi, i have tried the following method for my website. In my computer, i can see the favicon, but in others, like my friends, they don’t. How come?
- c H i E n -’s last blog post..Is The World Really Coming To An End?
Hi - c H i E n - ,
This is probably your friends’ browser is still holding the old cookie. If they are using Firefox, try to ask them clear the cookie and cache by going to Tools > Clear Private Data > select cache and cookie, then press “Clear Private Data Now” button.
For Internet Explorer, go to Tools > Internet Options, under Browsing History, click on the “Delete” button.
After that, try to ask them view your blog again.
By the way, I’m able to view your favicon.
Hi! I tried to paste the above code in my blogger’s html editor, but has error..
We were unable to save your template
Please correct the error below, and submit your template again.
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 “rel”.
Please help. Thanks so much! =)
ingchia’s last blog post..Brilliant orange
Hi ingchia, sorry for the late reply, didn’t notice you left a comment here earlier. Perhaps you can try to retype the double quotes (”") from the given code above. Try it out and let me know.
Yada! I’ve made myself a favicon. Looks like an Initial-D.
daniels last blog post..who’s dominating the sky?
Hey, I tried to put in a new favicon for my renewed webbie but somehow it doesnt show? I use PNG image though.
Hi - c H i E n -, I’ve just checked your source code and it seems that when you are copying the code stated in this post, the double quote (”") doesn’t work well. The blog encode the characters differently. You will have to retype the double quotes again. It should fix your problem.
Or simply recopy the code above, as I’ve added a plugin that enable me to display source code here.
Hey, thanks for replying.
I have retyped the quotient mark, I still don’t see it. Do you?
- c H i E n -s last blog post..It’s A Vengeance
You forget to change the double quotes surrounding “shortcut icon”. Try to retype that too, and you can press shift + refresh to reload your browser cache to see the latest result.
Hey, thanks for helpingout. Anyway I have changed what you’ve told me to. I have cleaned all the cookies and stuffs. It hasn’t come out yet. Maybe i need to wait, just hoping for the best..xD Using PNG is alright, right?
- c H i E n -s last blog post..It’s A Vengeance
You’re welcome. PNG is alright. I checked your blog and I’m able to view your little pinky flower favicon. ^_^
Thanks! It saved me so much time! Great for new blogger like me!