How to make a Favicon.ico and display it the browser address bar

Collapse
This topic is closed.
X
This is a sticky topic.
X
X
Collapse
 
  • Page of 5
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 5 template Next
  • FPRob
    Colonel

    • Aug 2006
    • 955
    #1

    How to make a Favicon.ico and display it the browser address bar

    What is a Favicon.ico

    A Favicon is a tiny little image that displays in your browser address bar (and everybody else will see it too) when your site loads into the browser.. Like this....




    How to make a Favicon.ico

    First you need to make you Icon, you can draw one for free by clicking the following link, then enter your email address and it will be sent to you. http://www.favicon.co.uk/


    How to display a Favicon.ico

    Code:
    <LINK REL="SHORTCUT ICON" HREF="http://[COLOR=red][COLOR=black]wwwFirst, copy the file that has been sent you (called favicon.ico) into exactly the same place as your index.html page.
 
Then, edit the HTML on your index.html page and the HEAD of the page. The HEAD of the page is located at the top. It starts with this.....
 

    
	
    Code:
    
	
    <head>
    

    and it ends with this
 

    
	
    Code:
    
	
    </head>
    

    When you have located that part of the page enter the following line of code, it must be located in the HEAD of the page.
 
    [COLOR=black].[B]yourwebsiteaddress.com/favicon.ico[/B][/COLOR]">
    You are almost done. Publish the index page AND the favicon.ico file and hey presto, a neat little address bar for your site.


    Please note:

    Internet Explorer is not good at displaying favicons. The is just a Microsoft thing that cannot be avoided although it will display when it feels like it. All other browsers will work perfectly.
    [/COLOR][/COLOR]

    FPRULES
    Tags: None
    • Stuck
  • beegud2
    Major General

    • Apr 2006
    • 2156
    #2
    Re: How to make a Favicon.ico and display it the browser address bar

    Huh...you learn something new everyday...very cool...nicely done...(especially on so little sleep).

    Good going mate.
    Beezz
    sigpic


    ___________________
    http://www.beezworld.com
    http://www.bzzybeezwordz.blogspot.com

    Comment

    • FPRob
      Colonel

      • Aug 2006
      • 955
      #3
      Re: How to make a Favicon.ico and display it the browser address bar

      <takes a bow> <still hasnt been to sleep and for some reason doesnt feel tired anymore either> LOL

      FPRULES

      Comment

      • beegud2
        Major General

        • Apr 2006
        • 2156
        #4
        Re: How to make a Favicon.ico and display it the browser address bar

        Originally posted by FPRob
        <takes a bow> <still hasnt been to sleep and for some reason doesnt feel tired anymore either> LOL
        Yo man .. the crash is going to hit you hard...lol...hope you are near a bed and away from heavy machinery...been there, done that ...lol
        Beezz
        sigpic


        ___________________
        http://www.beezworld.com
        http://www.bzzybeezwordz.blogspot.com

        Comment

        • pemdas21
          Special Status

          • May 2006
          • 247
          #5
          Re: How to make a Favicon.ico and display it the browser address bar

          Hey, I use a favicon.ico! check mine out at http://www.electronics4dummies.com

          Comment

          • beegud2
            Major General

            • Apr 2006
            • 2156
            #6
            Re: How to make a Favicon.ico and display it the browser address bar

            Originally posted by pemdas21
            Hey, I use a favicon.ico! check mine out at http://www.electronics4dummies.com
            Very nice....
            Beezz
            sigpic


            ___________________
            http://www.beezworld.com
            http://www.bzzybeezwordz.blogspot.com

            Comment

            • FPRob
              Colonel

              • Aug 2006
              • 955
              #7
              Re: How to make a Favicon.ico and display it the browser address bar

              HI Pemdas... Good job.. Although just as a little tip for you... I couldn't tell what the favicon pip was until the larger pic loaded on your index page. Pics with a lot of detail dont come out very well as icons. you ricon does add lots of professionalism to the site but I would definitle recommend making a few more icons with varying pictures to see which one turns out at the best quality.

              :)

              and.. LOL, a day after writing this favicon tip I made a new site and the favicon wont work at all LOL.. Grrrrrr :)

              FPRULES

              Comment

              • Collectors-info
                General

                • Feb 2006
                • 8703
                #8
                Re: How to make a Favicon.ico and display it the browser address bar

                Originally posted by FPRob
                <takes a bow> <still hasnt been to sleep and for some reason doesnt feel tired anymore either> LOL

                Sorry Rob, Am I missing something. I can only get the MS explorer icon to show when I click on the links. The Square paper with the e symbol across it..?????? Any ideas.

                Chris
                Regards Chris.

                Collectables, Collecting, collectors-info.com
                www.chrismorris.co.uk
                House build project

                Comment

                • FPRob
                  Colonel

                  • Aug 2006
                  • 955
                  #9
                  Re: How to make a Favicon.ico and display it the browser address bar

                  EDIT... SEE MY POST BELOW THIS ONE

                  Yes mate..The answer is that IE is a load of Junk LOL. It really is not good with Favicons although. If you added the line of code to the HEAD of your index page (from my original post). It might perform a bit better.

                  Also, another sly little tip that sometimes works in IE....

                  Try dragging the little square white page icon out of the address bar and onto the web page itself. Doing this repeatedly will sometimes force the favicon to display.

                  Occcasionally it might just take a day or two for the browser and server to conect in a way that we like and you may find it will appear automatically.

                  If you have followed all the steps in the orignal post, try adding the index page to your fravourites/bookmarks and see if the favicon appears there Chris.

                  Hope it works out but I guarantee you will have more success in other browsers.

                  FPRULES

                  Comment

                  • FPRob
                    Colonel

                    • Aug 2006
                    • 955
                    #10
                    Re: How to make a Favicon.ico and display it the browser address bar

                    OH MY GOD I have made a mistake in the orginial post. Just looking back through it.......

                    THIS.....

                    Code:
                    <LINK REL="SHORTCUT ICON" HREF="[COLOR=Red][B]http://www.yourwebsiteaddress.com[/B][/COLOR]">

                    SHOULD READ AS FOLLOWS                     (add /favicon.ico to the end of your websites address)

                    Code:
                    <LINK REL="SHORTCUT ICON" HREF="[B][COLOR=Red]http://www.yourwebsiteaddress.com/favicon.ico[/COLOR][/B]">

                    FPRULES

                    Comment

                    • Collectors-info
                      General

                      • Feb 2006
                      • 8703
                      #11
                      Re: How to make a Favicon.ico and display it the browser address bar

                      Cheers Rob, will give it a try.

                      Chris
                      Regards Chris.

                      Collectables, Collecting, collectors-info.com
                      www.chrismorris.co.uk
                      House build project

                      Comment

                      • FPRob
                        Colonel

                        • Aug 2006
                        • 955
                        #12
                        Re: How to make a Favicon.ico and display it the browser address bar

                        Any luck Chris? I feel like a bit of an ass for writing such an in depth tip and getting something as simple as the URL wrong at the same time but... Hopefully you got it working.

                        Everybody, for advice on favicons (and due to my confusing mistake above), feel free to email me and I will set everything clear.

                        FPRULES

                        Comment

                        • Collectors-info
                          General

                          • Feb 2006
                          • 8703
                          #13
                          Re: How to make a Favicon.ico and display it the browser address bar

                          No problem. I have popped it in my things to do folder just for the moment, but as soon as I changed browsers all was working fine. It’s a pain when you change browsers as you can see the parts that where forgotten when testing in other browsers. You know the bits that move around the page on your site when you change browsers.

                          Cheers

                          Chris
                          Regards Chris.

                          Collectables, Collecting, collectors-info.com
                          www.chrismorris.co.uk
                          House build project

                          Comment

                          • FPRob
                            Colonel

                            • Aug 2006
                            • 955
                            #14
                            Re: How to make a Favicon.ico and display it the browser address bar

                            Yes that ios a common problem but a definite good reason to use different browsers as the new problems that you saw would obviously be happening for other visitors to your site. It does create extra work unfortunately but in the end you will end up with a more perfected site which means that it will be enjoyed more and more by your visitors.

                            :)

                            FPRULES

                            Comment

                            • Collectors-info
                              General

                              • Feb 2006
                              • 8703
                              #15
                              Re: How to make a Favicon.ico and display it the browser address bar

                              Hi Rob, remembered your post & found this one on my travels.
                              http://tools.dynamicdrive.com/favicon/

                              Chris.
                              Regards Chris.

                              Collectables, Collecting, collectors-info.com
                              www.chrismorris.co.uk
                              House build project

                              Comment

                              Previous 1 5 template Next

                              Find your perfect domain name

                              Working...
                              X