How do I get my favicon to work?

StackOverflow https://stackoverflow.com/questions/23374487

Pergunta

I'm creating a website and I have a favicon that I want to use for it. It is in the same folder as my index.html file. I was wondering how to actually use the favicon for my website. I did set it up so that it is 16 by 16 pixels and has a .ico extension. By the way I am hosting my website locally for testing purposes using MAMP.

Here is a picture of my folder with the favicon in it: enter image description here

I was wondering what I have to do with it to make it work.

Here is my index.html file:

<html>
    <head>
        <meta charset="UTF-8">
        <title>LFX Music</title>
    </head>

    <body>
    </body>
</html>

Do I need to put the favicon code inside every file that has an html head tag? If so do I put the same code inside every file even if they are in different folders? Say I wanted to put it in the about.html file that is in the child folder, "about", then what would the code be?

Also while I'm at it, even though it doesn't really matter, what is good folder naming etiquette? For instance I have the "_images" folder and inside that I have a folder called "favicons". Should I call the folder "favicons", "_favicons", or "__favicons" to keep up with the way I'm currently structuring my assets folders?

Thank you so much!

Foi útil?

Solução 

<html>
  <head>
    <meta charset="UTF-8">
    <title>LFX Music</title>
    <link rel="shortcut icon" href="favicon.ico">
  </head>

  <body>
  </body>
</html>

and about folders, name them however you like.

I have setup e.g.

images
css
js

...

Outras dicas

As long is the file is named FAVICON.ICO and in the root, and it actually IS an .ICO file, built to the correct specs, it should work without having to add a single thing to your code.

And by "correct specs", I mean, don't just take a PNG and rename it and expect it to work. An .ICO is actually it's own specific format.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top