local (file://) website favicon works in Firefox, not in Chrome or Safari- why?

Question

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.)

Here's a discussion of the issue over at chromium's site. http://code.google.com/p/chromium/issues/detail?id=51270 — Matthew Adams, Jul 21 '12 at 07:59
I'm getting the sense that local favicons just aren't supported, but I'm not sure why. I bet this will come up for other web dev newbies, so I'm putting a bounty on it. — Matthew Adams, Aug 30 '12 at 05:49
You cannot mix file:// and http:// protocol. They behave different in so many ways. — yunzen, Aug 31 '12 at 13:43
I didn't mean mix, I'm sorry. I meant interchange. (sorry no native speaker) — yunzen, Aug 31 '12 at 15:06
@yunzen (No worries.) But those are transfer protocols, even if they are radically different, it seems like the actual content should be the same... right? — Matthew Adams, Aug 31 '12 at 15:47
(Barring a combination of the two protocols on one page for security concerns.) — Matthew Adams, Aug 31 '12 at 15:55
I should say, that file:// is not a protocol: (http://en.wikipedia.org/wiki/File_URI_scheme) — yunzen, Sep 04 '12 at 14:21
This is probably a dumb question, but you are going to the site over file:// right? — Patrick James McDougle, Sep 04 '12 at 15:52
@yunzen Ah. [URI scheme](http://en.wikipedia.org/wiki/URI_scheme) vs. protocol. Thanks. Think I should change the question to reflect this, or is it a common enough misconception that leaving "protocol" in will help other people that have this same problem find the question? — Matthew Adams, Sep 04 '12 at 16:05
@PatrickJamesMcDougle Yep, I'm using `file://`. (Fair question though.) — Matthew Adams, Sep 04 '12 at 16:06

n1k1ch · Accepted Answer · 2014-03-12T18:14:29.730

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

Nice! Plus, using this on the final site has the added benefit of getting rid of an extra `http` request and speeding things up slightly. — Matthew Adams, Oct 23 '12 at 17:03
Thanks! This works great in chrome/FF, but doesn't seem to work in IE10. Any tips? — Alex Pritchard, Apr 29 '13 at 21:38
The obvious downside of this is that it's never cached. You will have to include it on each and every page you send. — Ben, Nov 14 '13 at 00:14

score 12 · Answer 2 · edited Jun 20 '20 at 09:12

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:

Security in depth loca web pages (Chromium Blog)

General troubleshooting guide for your favicons:

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

edited Jun 20 '20 at 09:12

Community

1
1

answered May 04 '15 at 18:15

DominikAngerer

6,354
5
33
60

1

Good general favicon troubleshooting tips, but please don't spam your top answer on every somewhat related question. This answer sounds like you didn't really read my question or the other answers that are already here. – Matthew Adams May 04 '15 at 19:36
I read your question of course - also currently looking for a detailed information why it's not working on safari. And of course also the problems you are facing with the `file://` starting I currently try it. – DominikAngerer May 04 '15 at 20:38
Still want to figure out why it's not working on safari with the above example. Maybe digging deeper in the safari security "world" will give a good and satisfying answer. – DominikAngerer May 04 '15 at 20:39
I'm surprised the downloads directory is given special treatment. +1 – Matthew Adams May 04 '15 at 22:33
Yeah - It's really strange but using the same approach for safari it doesn't work. I also added an interesting article about locale file security + websites from chromium - it's really interessting because they also explain the idea/solution of the other browsers – DominikAngerer May 05 '15 at 06:28
Still can't get it running with safari - looks like there currently no way doing it with `file://`. Sorry. – DominikAngerer May 06 '15 at 17:25

score 7 · Answer 3 · answered Sep 04 '12 at 14:56

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.

score 2 · Answer 4 · answered Jul 05 '12 at 02:50

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.

answered Jul 05 '12 at 02:50

The Alpha

143,660
29
287
307

This didn't work for me, though I have seen some forum posts suggest using two tags like this makes favicon.ico play nicely with all browsers (seems like IE likes `"shortcut icon"` and most other browsers don't). – Matthew Adams Jul 05 '12 at 04:27
Doesn't work in Safari 16.3 when the index.html is in your local files – skiss Mar 08 '23 at 22:50

score 2 · Answer 5 · answered Apr 26 '20 at 07:03

2

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>

answered Apr 26 '20 at 07:03

MonkandMonkey

619
5
6

Didn't work for me in Safari 16.3 – skiss Mar 08 '23 at 22:51

score 1 · Answer 6 · answered Feb 10 '14 at 06:32

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.

answered Feb 10 '14 at 06:32

osolldav

11
1

Noob · Answer 7 · 2018-03-10T15:33:23.833

-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

edited Mar 10 '18 at 15:33

answered Feb 18 '18 at 02:53

Noob

1
1

local (file://) website favicon works in Firefox, not in Chrome or Safari- why?

The Question

Details

Update

7 Answers7

Local `file://` and chrome:

Local `file://` and Safari:

Interesting topic's:

General troubleshooting guide for your favicons:

Linked

local (file://) website favicon works in Firefox, not in Chrome or Safari- why?

The Question

Details

Update

7 Answers7

Local file:// and chrome:

Local file:// and Safari:

Interesting topic's:

General troubleshooting guide for your favicons:

Linked

Local `file://` and chrome:

Local `file://` and Safari: