Steps on how to add a favicon to your blog or webpage


what's favicon? it is a short name for favorite icon. besides, it is also known as a website icon, or shortcut icon. [get to know more about favicon here]

kekeke... no worries, it's another simple HTML lesson here. the steps are really easy in adding favicon to your blog or webpage. =)

STEP 1:

you will have to upload your image and get the image direct URL.
the format of your image can be in JPEG, GIF, PNG, BMP or other common image format.

[hints: to make sure it looks nice, try to resize your image into 16 x 16 pixels, 'cause when it appears as an icon, it'll display in 16 x 16 pixels.] =)

here's some free image hosting website who can host your image for free:
ImageShack | Picasion | Photobucket

then, to add an icon that displays in:
the favorites/bookmarks list [proceed to STEP 2]
the location window of the browser [proceed to STEP 3]

STEP 2:

the one that displays in the favorites/bookmarks list:

<link rel='shortcut icon' href='ImageDirectURL' />

* add the above coding into your blog or webpage under the <HEAD> tag
(before the <BODY> tag)
* replace the word which has highlighted in red with the image direct URL that you have uploaded.

example:
<link rel='shortcut icon' href='http://picasion.com/pic2/ca68e7efe880e7110351db9120ee3faf.gif' />

output:
have a look at the bookmarks list, it will appear as the image shown below.

STEP 3:

the one that displays in the location window of the browser

<link rel='icon' href='ImageDirectURL' />

* add the above coding into your blog or webpage under the <HEAD> tag
(before the <BODY> tag)
* replace the word which has highlighted in red with the image direct URL that you have uploaded.

example:
<link rel='icon' href='http://picasion.com/pic2/ca68e7efe880e7110351db9120ee3faf.gif' />

output:
the icon will appear beside the URL.

10 comments:

Anonymous said...

hey..thanks alot..

♥ Renise said...

kekeke.... you are welcome shun2u. xD

أكرم حسني said...

thanks for the tips!

♥ Renise said...

hehe... you are welcome aqram =)

Clarice said...

thx u for telling.
i had this earlier. haha
anywhr, nice update.

♥ Renise said...

kekeke... thx autumn xD

Anonymous said...

You are posting many great tips on blog optimization which is really helpful.

Keep work hard on it.

All the best

♥ Renise said...

kekeke... thanks. xD

LynnToh said...

hey renise

found your blog when I was surfing aimlessly =D

and this post is great =D

i put a lemon for my favcon xD

♥ Renise said...

haha... cute~ xD
thanks for visiting anyway. =)

Renise does not warrant for any legal liability or responsibility for accuracy, completeness or usefulness of any information, opinion, comment, product or process published in this blog. External links which link to other Internet sites for the convenience of blog readers, Renise is not responsible for the availability or content of the external sites for its accuracy, completeness or usefulness of the information published. The content in this blog is just for readers to enjoy their free time in reading.

One click a day, please

Interesting Blogs

Awesome Followers

the Fans

Blogger's Badge

BlogMalaysia.com

Misc

blog lovers online ♥