Welcome to IpohChai.com
Recent Comments
07
Feb

How to put a favicon next to url in browser

This is a tutorial on how to create a favicon for your blog or website.

I have always wondered how they put an icon next to the website address in the browser. Until recently when I saw the log file of my blog, there are many request for the file "favicon.ico" to my root directory.

ipoh chai.com logfile
This is the logfile on the activity of my blog. There have been numerous request for "favicon.ico" which I don't really understand what it means.

First of all, I don't have a favicon.ico file anywhere in my host and I really don't know what is the "favicon.ico" means, until I google it recently.

favicon on browser
A favicon is a small icon placed next to the web address bar in the browser. Look at the small blue color square next to the address.

favicon in browser bookmark
The favicon will also displayed in the favourites bookmark of the browser if you bookmark my website.

Finally, I understand that favicon.ico is an icon file which is used next to the url in the browser. Instead of that, it will also be saved in the browser bookmark too. So, I tried to dig deeper into the source to find out how can I create a favicon of my own and put it into my blog too.

The method is rather simple,
Step 1
Create an icon file. I found this free icon software very useful to create an icon file. The icon used in the browser is displayed in 16x16 pixel, a rather small size to put much things inside it. This program allows you to make a 32x32 pixel icon as well and the browser will shrink it to 16x16 pixel.

Once you are done with your icon, just upload it onto your web server. You may place the icon file in any directory in your web host since you just need to direct the file directory from your web page header.
In case if you are not using any webhosting, you could use any free photo album available all over the internet such as photobucket, flickr etc.

Step 2
Add the favicon tag into the website header. A favicon header tag looks something like this.
<link rel="icon" href="image/favicon.ico" type="image/ico"/>
This tag must be place between the <head> and </head>
You must make sure you put the correct directory where your icon file is located in the href="" reference or else it would not work.

Instead of using .ico file as the favicon, you could also use animated gif too. As what you found on my blog's favicon. It is an animated gif.
The favicon works pretty well on Mozilla Firefox but not on Internet Explorer. I'm not very sure why IE wouldn't support it, that would be another reason why you need to switch to Firefox hehe.

Del.icio.us Del.icio.us Del.icio.us Del.icio.us Del.icio.us




Read Also
My First Adsense Payment using Western Union
IpohChai.com revamp
How to make a Web 2.0 button using Microsoft Excel
rel=nofollow
IZEA RealRank vs Google PageRank




Comments
#1 lingghezhi (2007-02-10)
nice..very nice.
Thanks a lot dude!
#2 a well wisher (2007-02-18)
Veli the smart!!

At first I tried to look for the table of content menu but could find.

Then noticed you've "integrate" them with Goo*** Ads. Smart guy.
#3 www (2007-03-02)
Cool site. Thank you!!!
#4 hcfoo (2007-03-09)
Alternative you can go to http://www.myfavatar.com/

You just need to upload your picture and they will generate the code your you to be inserted after the <head> tag.
#5 Vlady (2007-08-24)
Thank you!
I was always wondering about this, now my question has been answered.
#6 rianne (2008-03-06)
where can i find the <head> tag? pls help.. i'm confused.. :'(
#7 ipohchai (2008-03-06)
rianne: the <head> tag is located in the template code. what type of blog you are using? blogspot, wordpress etc?
#8 can it work witjh dreamweaver? (2008-04-14)
does it work on dreamweaver email me: shenzhaohan@sinhin.com.sg, thanks for your help with favicon
#9 amila (2008-09-28)
wow buddy
this is working
so impress of you
#10 reg (2008-11-07)
I have made and coded the favicon but must be doing something wrong in dreamweaver anyone help here??
#11 ipohchai (2008-11-08)
reg: yeah, if you could describe whats the problem you have.
Please Comment
*Name
Homepage
*Your Comment Here
Subscribe Feed
Get Updates by Email

Enter your email:

Delivered by FeedBurner


Popular Post
Fo Guang Shan Dong Zen Temple
The beauty of Fo Guang Shan Dong Zen Temple Flora Festival 2007.

Arcade games of the past
Some of the well known arcade games which I enjoyed during my teenage time

Nasi Ganja - Addictive as Marijuana
The infamous addictive curry rice of Ipoh. What makes this food so addictive as it was like Marijuana!

How to put a favicon next to url in browser
This is a tutorial on how to create a favicon for your blog or website.

Yee Fatt Curry Mee is Delicious
Of all Ipoh food, this curry mee is a famous one. This curry mee has been operating longer than our country's independence yet, the taste of its curry is still unforgettable.

Big Apple Donut Kinta City
While Krispe Kreme and J.Co is being well known for their delicious donut, Big Apple is another new face in the donut maket and it is available at Kinta City, Ipoh.

YoYo Flavor Bercham
A restaurant with large varieties of food, drinks, free WiFi and sumore what? children playground!

Weekend at Sungai Klah Hot Spring Park
It has been a tiring working week. With so much issue in the line which never seems to come to an end and tonnes of assignments which never seems would finish. So much headache and I really wanted to set free and relax my mind.

IpohChai 2008 All Rights Reserved