Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
364 views
in Technique[技术] by (71.8m points)

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...