Search code examples
htmlfaviconboilerplate

fav icon does not work in html5 Boilerplate


the fav icon in html5 Boilerplate doesn't work (doesn't show up)

I have tried it on localhost and also on a server but in both the cases it didn't worked. Whats the to make it work .?


Solution

  • HTML5 Boilerplate doesn't use link elements for icons by default. Instead, it relies on the browser finding either favicon.ico or apple-touch-icon.png in the root directory.

    If you put HTML5 Boilerplate in a sub-directory, whether in localhost or on a server, either no favicon will appear or an existing favicon in the server's root directory will appear. A quick fix for this is to add this line of code in the <head> section of index.html :

    <link rel="icon" type="image/png" href="apple-touch-icon.png">
    

    Even better would be to create a 16x16 PNG image (e.g. favicon.png) instead of using the 57x57 apple-touch-icon.png, which gets resized and therefore loses clarity.

    See the Favicons and Touch Icons section of the user guide for more details.