0

It has been four days since I have been trying to use my theoretical HTML and CSS knowledge to create a personal webpage. Since I am still a beginner I did not host it and I am still under the process of creation. I tried to create a favicon for my webpage so that it appears instead of the default "white paper with a fold on the top right."

Here is the code I have written:

     <head>
             <title>RAMYA VEMUGANTI</title>
             <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     </head>
     <body>
            <div  id="header">
                <h1>Ramya Vemuganti</h1>
               <hr/>
            </div>
     </body>
Tobias Kienzler
  • 25,759
  • 22
  • 127
  • 221
RamyaV
  • 35
  • 5
  • Guessing it doesn't work. Does the file path in the source code link to the image ok? – Jonnny Jul 27 '13 at 18:39
  • Also what browser are you using? – Jonnny Jul 27 '13 at 18:41
  • 1
    The "white paper with a fold" .. isn't that what Google Chrome has. And I think Google Chrome only shows the favicon in the tab, not in the address bar. Is it showing in the tab? – putvande Jul 27 '13 at 18:56
  • @putvande Well my icon shows at neither the tab nor the address bar.So I don't know what went wrong. – RamyaV Jul 27 '13 at 18:57
  • @Jonnny I am using chrome and I have re-checked the image path and I am sure it is alright. – RamyaV Jul 27 '13 at 18:58

1 Answers1

0

A few things:

  1. <link> tag should be inside of <head> tag
  2. You have two closing <head> tags
  3. Your <div> content should by wrapped in a <body> tag BELOW the <head> tag
  4. Make sure "favicon.ico" exists in the root location of your web server

and the tag should look like:

<link rel="icon" type="image/png" href="/favicon.ico" />
DeweyOx
  • 719
  • 5
  • 14
  • With a `.ico` you should have `type="image/x-icon"` instead of `type="image/png"`. The `type="image/png"` is only necessary with a favicon that is really a PNG (which is not supported by all browsers I think). – putvande Jul 27 '13 at 18:49
  • True - was a copy and paste from my current project. Can we verify which browsers that doesn't work in? This is a good answer http://stackoverflow.com/questions/37073/what-is-currently-the-best-way-to-get-a-favicon-to-display-in-all-browsers-that – DeweyOx Jul 27 '13 at 18:51
  • I know it isn't a good source but http://en.wikipedia.org/wiki/Favicon has some info about browser support – putvande Jul 27 '13 at 18:52
  • I am currently using Chrome and I will edit the code in my question and clear the errors.Thank you @DeweyOx – RamyaV Jul 27 '13 at 18:53