Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Favicon.ico won't show on Google Chrome

I am making a HTML page and one of the things I wanted was a favicon appearing next to the title.

I'm using Google Chrome, I see favicons working on other websites, but the favicon on my website won't show up. The site is in a folder on my desktop named site.

The favicon.ico file is 16x16, and I used an online generator to make it.

This is the code:

<!DOCTYPE html> <html>      <head>         <title></title>         <link rel="shortcut icon" href="/favicon.ico" />     </head>     <body>     </body> </html> 
like image 315
Nick Avatar asked Dec 08 '12 18:12

Nick


People also ask

Where do I put favicon ICO in HTML?

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".

Why is my favicon not updating?

You will have to delete your cache from your browser, close your browser and reopen it. That should fix it. I don't believe your favicons will get refreshed on your favorites until you revisit that page, and assuming that you had previously cleared your browsers cache.

How do I fix my favicon?

Resetting the page or clearing the cache on your site or browser may be sufficient to fix the issue. If that doesn't work, try other options. Different graphic formats are used to create a favicon, but some of them are not supported by all browsers and their versions. In this case, it is recommended to use .


1 Answers

Since you have a leading / in your href, you are referencing a file that will be in the root-folder. In case you have your page in a folder on your computer, not serving it from a local webserver, the leading / will tell the browser to look in the root folder of your filesystem. So the browser expect the file to be at C:/favicon.ico or similar, which is probably not what you've expected.

If you have the favicon.ico in the same folder as the web page, you could just remove the leading slash, and the icon should be visible.

<link rel="shortcut icon" href="favicon.ico" /> 

Update:

As a debug option, your could try to add a tag that you know works. I borrowed this snippet from the StackOverflow source. Try replacing your link tag with this and see if you get the SO logo as your favicon.

<link rel="shortcut icon"        href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"> 

Update 2:

It appears that there is a bug reported on Chromium where the favicon isn't displayed if the file is loaded locally, without being served through a webserver.

like image 59
Christofer Eliasson Avatar answered Sep 23 '22 14:09

Christofer Eliasson