Search code examples
htmlwebfaviconmetahead

How do I get my favicon to work?

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!

Solution 
  • <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

...