why won't favicon load in firefox?

Question

I am using the following:

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

It is a true 'ico'. When I visit http://mydomain.com, the icon loads. But when I visit the 'www' subdomain: www.mydomain.com...it won't load. Any ideas what is going on?

Answer 1

for firefox you have to use a special tag:

<link rel="image/x-icon" type="image/png" href="/favicon/favicon-196x196.png" />

Now when you drag it to bookmark bar the icon shows.

Answer 2

The protocol relative URL could be a good option (archived, you never know).

It is about network-path reference (explanation there), try:

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

Answer 3

For me putting two link refs in the header worked.
FF did not display the icon until the second line was added

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

Removing or leaving in the first / made no difference to how FF handled the icon. The console reported

[Exception... "Favicon at "https://<myhost>/favicon.ico" failed to load: 
Forbidden."  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: 
resource:///modules/FaviconLoader.jsm :: onStopRequest :: line 227"  data: no]

But it loaded the .png file anyway, without complaining in the browser window.

Answer 4

Firefox looks for "favicon.png" rather than "favicon.ico" in root folder of your website. I recommend including both for compatibility with more browsers.

Answer 5

This is a result of how Firefox currently handles the caching of the favicon file. To solve you have a few options:

Add GET parameters

You can add an arbitrary GET parameter and value to the end of your favicon URI

(Tip: This trick can be used for any other css/js files when you want to make sure the user's browser is not serving a locally cached version.)

<link rel="shortcut icon" href="/images/favicon.ico?updated=20150818" />

Rename the file

Rename your favicon file and reference the renamed file in your href attribute.

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

Hard Refresh

A hard refresh may work on some browsers if you are only concerned with updating your local machines favicon. Usually Ctrl+Shift+R or Ctrl+F5 for Windows/*NIX and Command+R or Command+Shift+R on Mac will do the trick.

Explanation: The end result is you need to force the browser to pull a fresh copy of the file instead of using a locally cached file. Adding a ?somevariable=uniquevalue to the end of the file URI tricks your browser into thinking it's dealing with a new file, and new files by nature can't already be cached. The same effect is created when you rename a file.

Extra nerdy technical notes: Using a timestamp, or unique file version number for the GET parameter value is best because it will encourage variable uniqueness. It's possible if the user has already loaded that URI with the exact same GET parameter and value (?updated=20150818 in my example), the browser will not pull a fresh copy, because it may understand it's still dealing with the same file.

The option to cache files based on the GET parameters in a URI is browser specific as the rules are somewhat left up to the browser vendor's to discern between how they handle that particular caching instance (see RFC at http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13.9). So, just keep in mind it's possible in some browsers if you are using a date as a value, you may want to include the time as well if you are changing your file multiple times throughout the day.

Answer 6

I found that I had to clear my Firefox cache [CTRL]+[SHIFT]+[DEL], and then restart Firefox before I could see the favicon, which I put in the root of the web server and called favicon.ico.

Note that in recent versions of Firefox the favicon is only displayed on the tab icon and bookmark, not in the address bar icon.

Answer 7

For security reasons favicons are not used in the address bar anymore starting with firefox 15, but are still used in tabs and bookmarks etc

See http://www.ghacks.net/2012/04/25/mozilla-to-remove-favicons-from-firefox-url-bar/

Answer 8

This problem is annoying... I usually just add a 16x16 PNG favicon to solve this. Firefox's way to deal with favicons seems a bit odd and that workaround is, to me, the simplest. Hope this helps.

Answer 9

It's part of a bigger firefox bug. If I am in mysite.com and say link rel="shortcut icon" href="/myicon.ico" it works. But this is the only way it works. If am in mysite.com and say link rel="shortcut icon" href="myicon.ico" or any other relative link, it fails. HOWEVER, if I am in www.mysite.com and use relative links, they work fine. Further, if I am in mysite.com and say link rel="shortcut icon" href="http://www.mysite.com/mypath/myicon.ico" it works. Firefox has forgotten how to deal with websites where www.mysite.com IS mysite.com. It used to work, and it doesn't anymore. You can also see that if you flip between www.mysite.com and mysite.com links will change from "visited" to "unvisited" style. FF is broken on this one, and has been for a couple of versions now, though once it worked.

Answer 10

you can try to put the icon to the root.

Answer 11

Fireworks often picks up the favicon.ico file automatically without any code, so long as it is the same folder as the document. Try moving your file up a level to avoid referencing issues.

Answer 12

Have you tried

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

? What is the directory structure for www subdomain? Can you access other image files using the absolute path?

Answer 13

Perhaps the first slash in

href="/images/favicon.ico"

is causing a problem?

Answer 14

This sounds like a configuration issue on your end which we can't solve without more information. Have you tried using an absolute URL instead of a relative one?

Example:

<link rel="shortcut icon" href="http://mydomain.com/images/favicon.ico" />