Forums »
HTMLForums And Topics Discussions Help for Hyper Text MarkUp Language »
How To Put An Icon On Your Browser URL Address Bar Favicon.ico

How To Put An Icon On Your Browser URL Address Bar Favicon.ico

Description: this tutorial will show you how to put a little icon on your browser whether it is internet explorer firefox chrome and other browsers on the address bar

Tags: how ,to ,put ,an ,icon ,on ,your ,browser ,url ,address ,bar ,faviconico

Posted On Sun Sep 03, 2006 By webmaster In HTMLForums And Topics Discussions Help for Hyper Text MarkUp Language Forums

Have you ever noticed that when you visit some web site, there is an icon small (little) image that shows (appears) at the top of your browser?

If you have, today you are going to learn how to install an icon picture for your web site, so when users visit your website, you can put your logo. Even better when a visitor bookmarks your url, the browser automatically saves in their favorites to identify your site.

Here is how to do this:

1. If you have windows, open paint. You can find it in:
Start > Programs > Accessories

2. Set the dimensions to 24x24 pixels: in Image > Attributes (Control - E)

3. Set Width to 24 and Height to 24 and Click Ok.

4. To help you create and edit your image better, zoom paint to the highest zoom which is 800%.
To do this, go to View > Zoom > Custom and Select 800%

5. Create your logo or whatever you want your icon to look like:

6. After you have created your image, save as "favicon.ico"

7. Now all you have to do is upload the favicon.ico image to your website root directory. The root directory is the main folder where all your files reside at, like your main index page. Some hosting companies will provide a directory called "html" or "public" or "web" "public_html". You MUST upload to your website root directory, otherwise, your browser will look for the favicon.ico image, will not find it and it will not display it on your browser.

put the following HTML code in between your <head> tags with the follwowing code:

CODE:

8. Now that you have uploaded to your root directory, you are done.
DEMO: http://www.wallpaperama.com/favicon.ico

NOTE: There might other easy ways to do this, but this is the only way I know of. If you have a better suggestion, please help us by posting it here.

UPDATE: here are two options also:

If you have benefit from this small quick and easy to use step-by-step tutorial, we would appreciate if you link to wallpaperama.com Why link to us? The more sites that link to us, the more people like you will be able to find this free and helpful post.

Thanks,

Wallpaperama Team

abbeygbemga Sat Apr 27, 2013

thanks. it worked perfectly

Pradeep Mon May 21, 2012

If you want to edit are create your logo use Paint application, which come default in Win OS. Else use Adobe Photoshop. Then upload it to FAVICON to convert it to .ico. Now download the ICON pack RAR-file. Extract it and upload the Icon file to your website host FTP Root, that where your index.html is located. then open and edit index.html and paste provided in the ReadMe.txt file. After that come back to FAVICON sit and select the "Validate your favicon, after installing". And now enter you site address. And now you can see your Logo/Icon.

David Sun May 20, 2012

Forgive me for asking silly questions but Im having hard time uploading favicom to my root directory. Im confused and do not know what to do. Could you help me with step by step instructions. Thank you

Ramesh Sat May 12, 2012

I know that some of you are having a hard in replacing the internet explorer icon in the url with yours.

Please, do this as internet explorer keeps your old page cash with the icon name that was used previously. So, rename the icon evertime you try refreshing the page with your new icon. And, make sure you change the name in the html file for the icon. Hope that helps! You must see the icon now once you do it.

Pratham Fri May 04, 2012

thanks alot.. it worked.. :)

Harshana Mon Apr 23, 2012

Thank you!

Danneleskry Wed Apr 11, 2012

Hello, thanks yous for nicest won. I see, you so I help you and my fireplace cannot place above. How I do that? My fireplace has no photo above like frame, but no frame, so I would enjoy company to help assist in awe over nice icon over fireplace in den? We all awe in den. Happy day.

Sppond Sun Apr 08, 2012

Thanks you help me alot :)

tony Tue Apr 03, 2012

what do u mean: "between your head" ?

Jason Thu Mar 29, 2012

I kepp getting different code from other places, what does shortcut icon mean. Do i type that or do i insert something into it? PLEASE HELP ME!!

tomex Tue Mar 27, 2012

Paste it inside the <head></head> tags

Bhavana Tue Mar 27, 2012

I tried, but it doesn't work. I don't understand where should I pest that code. & most imp. thing is that "favicon.ico" this file does not display for editing ....... please help me out ....!!!!

mohit Fri Mar 23, 2012

how do we do this on a wordpress website??

adi Sun Mar 04, 2012

thank you it worked great

Apoorv Sat Mar 03, 2012

very good....easy method ...thanks

austa Sat Mar 03, 2012

thank its great but short line of code...so cool

Avinash Mon Feb 27, 2012

thank u so much... this ill help me a lot

cora Tue Feb 14, 2012

RRRRRRRRUUUU ya doing for the mac, scrictly speaking, i'm writing this in 2012!!!!!!!!!!!
i really mean it just please do it for the mac
xxx thanks

Rishank Mon Feb 13, 2012

I find it and u did it.Well tute from your side.Thanx

Ctechnology24 Wed Feb 01, 2012

Thank you very much, it helped me a lot because I am currently developing a site for our software engineering project God bless

Ram Sat Jan 28, 2012

thank u very much

Mohak`` Mon Jan 16, 2012

thnk u it was very nice !!!!!

for some interesting posts visit
harka

bijay Sun Jan 15, 2012

plz help me guys.....

bijay Sun Jan 15, 2012

i changed the size of my favicon.ico and then uploaded...but still the size is not changing..can u help me with that...?

abhinav Thu Jan 12, 2012

Thank you very much.
IT helped me very much.

spektor Sun Jan 08, 2012

cool thanks

Kishor Tue Jan 03, 2012

so simple dude tax a lot...........

Derek Sat Dec 31, 2011

Great. 1st one I found that was so simple and did exactly as you said it would.

Tanveer Mon Dec 26, 2011

I love you man..... This was so easy to learn. Fantastic and great work.

Nash Fri Dec 16, 2011

Very helpful! Thank you. :)

Mark Sat Dec 10, 2011

You rock as well shasme

Shasme Thu Dec 01, 2011

I so appreciate the step-by-step instructions on installing my Favicon on my website! I've been trying for a while using various techniques; but this was the most simple method. Wallpaperama Rocks!!

Kathan Fri Nov 25, 2011

this is really very very helpful for me .... thanx from heart ...

Gurmeet Wed Nov 16, 2011

this favicon works in my offline test but not in online . when i open my website there is no favicon in address bar.

Devesh Sun Oct 30, 2011

it was very helpful

Information

Title: How To Put An Icon On Your Browser URL Address Bar Favicon.ico

Info: This Post Has Been Viewed 0 Times Since
Date: Sun Sep 03, 2006
Author webmaster Received 70 Replies #3177

Penelope Cruz Is Personality No 78 On The Web