37

The Question

When my website is local (using the file:// protocol), the favicon doesn't show up in Chrome or Safari, but it works in Firefox (all on a mac). However, when the exact same site is actually hosted, the favicon works fine in all of the browsers I tried. Why do the webkit browsers not display local favicons?

Details

The favicon.ico file is in the same directory as the index.html page. I am using the following code, although I've tried several variations of it:

   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Since the favicon works when accessed over http://, I doubt that there's something wrong with the way I'm including it, but you never know...

Update

I've found a few forum posts (nothing too official) that suggest that this is by design, but none of them give the rationale. Also, it sounds like some versions of IE have the same problem. Is there some security risk with local favicons? (I know that some browsers have issues with local cookies, for example.)

Disclaimer: There seem to be a ton of questions in a similar vein, but I haven't found exactly this one. (In fact I have basically the same question as this one, but none of the answers there worked for me.)

4

7 回答 7

37

You can use Base64 data of an image. Put something like this:

<link href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAD9/f0F/Pz8DP///wD///8P////Dv///xL///8P////A////wD///8A/v7+Cf///wX///8A////APv7+wr9/f0D+/v7Dv///wb///81+vv8i/v7/Iv3+PqL4+nxi+ru9JHy9Piu5+zzru3w9ZD+/v5x/v7+H////wr///8A9/f3H/7+/g7///8J////HNDX5Pyaq8j/m6zJ/5esy/+QpcX/larK/5uwzv+MoMH/mqrG/5qlv+7Q0Nty/f3+Af///wD///8A/v7+A////wz+/v6b2d/q/4abvf+Emr7/jKHD/5Gnyf+Uqsz/fpW5/4mXuP/U1OL/e3ui+MPE0l7///8A////AP///wD///8P////Xa680/9/lrr/kafJ/5yy0/+WrM7/nbPT/52uyv+ktM7/1NTi/8LC1f+lpr3n////AP///wD///8A////AP7+/mDo7PL/ytPi/5yv0fehsuXuuMvl0Kq81drS2uf8+/z9bff3+SG5uM1r8vL1ff///wD///8A////AP///wr+/v4H/v7+jufq8umIg/Sut7L9YKul/W7PzvlMnZn03Ozq/x/+/v4H////AP///wD///8A////AP///wD///8A5OH/IpuS/pF3cfPploz/hH5y/6F/dP+gl47/gkw++e7Hwv9Fta//XPj4/gf///8A////AP///wD///8A+vn/BoyB/pGlnf5vfHfxy4mA/JlIOf/lmZD+f1lK/89kWPrPmZD+f9zY/yu3sP5ar6j/ZP///wD///8A6uj/GbSt/l6imv9yVkf/1HBm+MJ5eOrlhX/1s2JY+dRpYPfPv7/zb4+F/41WR//Uloz/hI6E/47///8A////AOro/xmnn/9teW3/qH5y/6HKxf9B9/n7Fc3N9VfMyvlQraj6cbWv/1zj4f4h2tf/Lks7/+NmWP+/0s7/OP///wCvqP9kjoT/jo6E/46Sif+I+vn/Bt3a/ypsX/+5////AH90/6Dj4f4h0Mz/OrWv/1yyq/9gkon/iNzY/yv///8A19P/MvLx/g////8A////APX0/wxvYv6119P/MtzY/ytmWP+/oZj/df///wBQQP/dt7D+Wv///wD///8A////AP///wD///8A////AKyk/2makf9+UUL/283J/z/l4/8f1dH/M////wD///8At7D+Wv39/gH///8A////AP///wD///8A////AP///wDa1/8u2tf/LtrX/y719P8M////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A//8AAOAfAADgBwAA4AMAAPABAADwHwAA8d8AAPAfAADonwAA8CEAAOf5AADGvQAA/bcAAP3/AAD//wAA//8AAA==" rel="icon" type="image/x-icon" />

into the <head> section of an html file.
Base64 data can be received, for example, by favicon.cc

于 2012-10-23T15:13:32.650 回答
12

Local file:// and chrome:

For a local favicon in Chrome - according to an old thread found on linux command it should be possible to place a local favicon with the file:// if it's in the your /Downloads/ directory. So I tried it like this:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="shortcut icon" type="image/x-icon" href="file://localhost/Users/dominikangerer/Downloads/favicon.ico">
</head>
<body>
    <h1>Testing</h1>
</body>
</html>

I don't have a apache or anything running. It's simply the way chrome can access local files using the file://. If I try using the favicon from another part of my filesystem it doesn't seems to work - so maybe that's a solution for chrome.

enter image description here

Local file:// and Safari:

Still looking for a way - above code doesn't work for my up2date safari.

Interesting topic's:

General troubleshooting guide for your favicons:

Have a look at: https://stackoverflow.com/a/16375622/1581725

于 2015-05-04T18:15:38.493 回答
6

This is a known issue for years. Your code is right, and I don't think you'll find any way to allow Chrome or IE to include a favicon with a non-remotely way.

Some time ago, I tried a lot of ways, none works, and I wasn't able to find any browser documentation on this point.

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.png" type="image/png" />
<link rel="shortcut icon" href="C:/files/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file:///C:/files/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file:///C|/files/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file://localhost/C:/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file://127.0.0.1/C:/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="file://localhost/C|/favicon.ico" type="image/x-icon" />

For Chrome, favicons are stored in a file : User\AppData\Local\Google\Chrome\User Data\Default\Favicons. We can guess local favicons aren't stored in.

于 2012-09-04T14:56:52.830 回答
2

Once I've solved it using two lines of code

<link rel="icon" href="favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

and also keep the favicon.ico named exatly this and in the webroot folder, if it helps.

于 2012-07-05T02:50:12.133 回答
1

Well I have the problem similar with Google Chrome the favicon don't show correctly the problem was the .ico I was using was 16x16 and 32x32 I just used a bigger image and it works for all browsers.

于 2014-02-10T06:32:09.880 回答
1

I solved this by renaming favicon.ico as new_name.ico. And it works in Safari and Chrome.

<head>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='logo.ico') }}">
</head>
于 2020-04-26T07:03:20.560 回答
-1

Works In Chrome All you need is a folder with the icon and the website then the html should look like this (MAKE SURE THE ICON IS NAMED favicon.ico !)

link rel='shortcut icon' type='image/x-icon' href='C:\Website/favicon.ico

于 2018-02-18T02:53:57.463 回答