Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

HTML Favicon.ico won't show on Google Chrome

Tags:

html

hyperlink

google-chrome

favicon

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
Sign in to Comment

Related questions

Accessing localStorage from a webWorker
How to generate lighter/darker color with PHP?
HTML - How to do a Confirmation popup to a Submit button and then send the request?
How to get all checked checkboxes
angular/material2 mat-spinner resize
Draw an X in CSS
What is the difference between aria-label and title attributes?
Why do browsers insert tbody element into table elements?
Why is the Bootstrap grid layout preferable to an HTML table?
What is gZip compression?
Is it possible to use text-overflow:ellipsis on multiline text?
Is it possible to trigger share menu on smartphones (via HTML/JS)?
Reading cookie expiration date
Why does HTML5 recommend putting the code element inside pre?
Declare CSS style outside the "HEAD" element of an "HTML" page?
Centering a canvas
JQuery Slider, how to make "step" size change
COMPLETE list of HTML tag attributes which have a URL value?
JavaScript: getting ImageData without canvas
HTML multiple select box

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!