40

I placed my favicon here:

http://www.vittoriosastarsnursery.com/favicon.ico

But for some reason it doesn't want to show in Firefox. It did work in IE, but I'm more concerned about getting it working in Firefox.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
TheGateKeeper
  • 4,420
  • 19
  • 66
  • 101
  • 'who cares about IE' ..apparently 39% of web users care about it as of July 2011 :( http://en.wikipedia.org/wiki/Usage_share_of_web_browsers – Chandu Sep 06 '11 at 18:34
  • Must be something wrong with my pc then, will try from other pcs and post back. Edit: Just checked and its working from other pcs. Must be my firefox then :) – TheGateKeeper Sep 06 '11 at 18:50
  • @Chandu - not anymore. – ocodo Jul 02 '22 at 05:42

12 Answers12

115

Suddenly I found answer here

You should add "?" to your favicon path and it works! Even with path such as images/favicon.ico. Just try:

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

Other browsers works too.

Remember to restart mozilla, because of it's own cache, that is not connected with css and other caching.

updated:

Another way is set redirect from favicon.ico to /images/favicon.ico (301 works)

FeroxTL
  • 4,718
  • 3
  • 16
  • 14
  • 1
    Seems to be very strange, but this helps really, for both IE and FF – DotNet Fan Jan 24 '16 at 13:45
  • 1
    Any explanation for this? – zzzzzzz May 11 '17 at 02:58
  • 1
    I also wonder why this works - ??? I didn't even had to restart firefox, refreshing the page was enough! :) – Cold_Class Jun 28 '17 at 09:18
  • @Cold_Class sometimes it works. Another way to make it work is to make redirect from favicon.ico to /images/favicon.ico (301 works) – FeroxTL Jun 29 '17 at 10:45
  • 2
    This is not magic, this is hack, but so many browsers are adamant at keeping the old favicon that this is the only viable solution. It does however create problems with some servers (older IIS) as per default they do not support GET query on static resources -- keep that in mind – Ivan Hušnjak Sep 01 '17 at 10:06
  • Can anyone explain what that question mark is doing to make that work? This actually worked for me. – PaulG Feb 09 '19 at 00:18
  • @PaulG that's kind of a magic. I think it's troubles of some caching mechanism in mozilla – FeroxTL Mar 17 '19 at 16:48
46

I can see it in Chrome, Firefox, and IE. My friend had a problem like this when we were testing back in college. It was just a weird caching thing that made her think it wasn't working right. I'm sure that everyone besides you will be able to see that it works fine.

Try opening the Dev Tools (CMD + Option + i on Mac) and hard refresh the page (hold the refresh button until options appear).

You could always try restarting your browser after clearing the cache and see if that helps.

thenewjames
  • 966
  • 2
  • 14
  • 25
Jamie
  • 1,579
  • 8
  • 34
  • 74
6

Two things to consider

  • If it's working in some browsers and not in others it's likely going to be a cache issue. Clear your cache and refresh, or for more in depth info: How do I force a favicon refresh
  • If favicon.ico is in the project's root folder but not being recognized by any browsers I would check out the .htaccess, or whatever equivalent of .htaccess depending on server type etc.
Community
  • 1
  • 1
DrewT
  • 4,983
  • 2
  • 40
  • 53
6
<link rel="icon" href="http://khachmeruk.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://khachmeruk.com/favicon.ico" type="image/x-icon">
GuyFromOverThere
  • 471
  • 1
  • 6
  • 14
4

For those who suffer from this problem, try move your favicon file to home directory. It worked for me and solved my problem.

Erdem Zengin
  • 51
  • 4
4

https://github.com/ritwickdey/vscode-live-server/issues/77

I was facing this problem with VS-Code live server, as discussed above it's browser cache issue, there is popular github thread on this.

just try the trick:

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

Happy learning

Abhishek Raj
  • 478
  • 7
  • 17
3

If you don't want to spend hours. trying to figure out why your favicon is not showing up, make sure to always place it in the root of your project folder and add a link in the <head></head> section of your page like so:

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

Folder Structure

--app
-----img
-----js
-----css
-----favicon.ico
AllJs
  • 1,760
  • 4
  • 27
  • 48
2

It is just a caching issue. Just change the file name and it will show up immediately... otherwise do nothing and it will show up eventually. Browsers are just very persistent with the favicon caching.

Jeremy
  • 239
  • 2
  • 14
1

I had this problem too. it turns out (for me at least) that blocking users / agents with no referrer via .htaccess caused the problem.

Daymon
  • 11
  • 1
1

It works for me in FireFox. When running identify (part of the ImageMagick package), it reports this problem: identify: invalid colormap index 'favicon.ico' @ error/image.c/SyncImage/3906

Perhaps opening the file in a graphics editor and re-saving it would clean up this error.

Dylan Tack
  • 725
  • 6
  • 9
0

Something that hasn't been mentioned that seems to have been the cause of my issue was the image file size. The image I was using was 4254px X 3850px at 1.3MB. It worked fine in Chrome desktop but not on Chrome mobile or Firefox. Changing the dimensions to 120px X 120px reduced the file size to 9.1KB and the favicon now works well.

P.s. This only works if your code has no issues.

K_Wainaina
  • 219
  • 3
  • 7
-1

For those who have tried everything and the favicon still does not show up:

  1. Put it in your sites Root Directory
  2. Rename it "favicon.ico"

  3. Make sure your code is like such:

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

    1. IF you still have the same problem, put the whole website in ANOTHER DIRECTORY, like a Memory Stick (that fixed it for me :) ).

    2. REMEMBER: You HAVE to put the icon code in the of EVERY page. :)

Scinzon
  • 1
  • 1