ggg7
ggg7

Reputation:

why won't favicon load in firefox?

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?

Upvotes: 20

Views: 48204

Answers (14)

chovy
chovy

Reputation: 75864

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.

Upvotes: 0

quantme
quantme

Reputation: 3657

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" />

Upvotes: 0

russell newton
russell newton

Reputation: 109

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.

Upvotes: 1

Kamyar
Kamyar

Reputation: 93

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

Upvotes: 0

LWurm
LWurm

Reputation: 542

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.

Upvotes: 4

Matthew Lock
Matthew Lock

Reputation: 13556

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.

enter image description here

Upvotes: 18

themihai
themihai

Reputation: 8651

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/

Upvotes: 2

Armel Larcier
Armel Larcier

Reputation: 16037

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.

Upvotes: 0

RCB
RCB

Reputation: 119

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.

Upvotes: 11

M. Utku ALTINKAYA
M. Utku ALTINKAYA

Reputation: 2272

you can try to put the icon to the root.

Upvotes: 1

Patrick Beardmore
Patrick Beardmore

Reputation: 1032

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.

Upvotes: 0

Nemanja Boric
Nemanja Boric

Reputation: 22187

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?

Upvotes: 0

David Koelle
David Koelle

Reputation: 20834

Perhaps the first slash in

href="/images/favicon.ico"
is causing a problem?

Upvotes: 0

Lucas Jones
Lucas Jones

Reputation: 20203

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" />

Upvotes: 3

Related Questions