23

I'm trying to figure out how to add a favicon to my meteor app. Per the docs I should put it in the /public directory, but there isn't really much more info than that. I put my favicon.ico file there and referenced it in the header of my html file, but the browser doesn't load it. If I open up the dev tools on chrome though, it shows the file loading (i.e., go to localhost:3000/favicon.ico). Anyone have any suggestions on what I might be missing?

the
  • 21,007
  • 11
  • 68
  • 101
bgmaster
  • 2,313
  • 4
  • 28
  • 41

3 Answers3

44

It should work. Probably either an issue with the path or caching on localhost.

Here's how the favicon should be linked:

<link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">

(Note: the / in the beginning; its important!)

the
  • 21,007
  • 11
  • 68
  • 101
alanning
  • 5,198
  • 2
  • 34
  • 33
  • If you go directly to `http://localhost:3000/favicon.ico` in your browser while your app is running, do you see your favicon? – alanning Nov 19 '13 at 13:48
  • 3
    If I would go to localhost:3000/favicon.ico, I would see the image. It appears though that adding "?v=2" to the href fixed it. Could you explain what that does? I've never needed it in the past. – bgmaster Nov 20 '13 at 02:44
  • 11
    That "?v=2" is a cache-busting hack. Sometimes browsers cache more aggressively that you want so the "?v=2" makes the browser think its a different URL and redownloads the file. If you make changes to your favicon you can change it again; something like "?v=3". – alanning Nov 20 '13 at 19:49
  • You could also see this caching behavior with other resources (js files, images, etc) depending on what headers the server sends. This link has a nice overview: https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers – alanning Nov 22 '13 at 02:47
  • don't forget to restart your meteor server to see the results. – mepler Jun 12 '16 at 16:14
  • 1
    Thank you so much !! 4years after it saved my life – Jerome Apr 19 '17 at 13:00
5

Not sure what your path is like. Everything in the public folder is slapped together and accessible at root, so perhaps try /favicon.png.

Daniel Bernhard
  • 382
  • 3
  • 11
3

I added the favicon.ico in the /public/ directory of my meteor project and it showed up for me!

didn't have to add any lines of code

also if its caching issue maybe rename the favicon.ico to favicon2.ico

sandman
  • 31
  • 4
  • If it *isn't* showing up, it's probably because another favicon is still cached. Use the ubiquitously used hack where you put `v=2` as a query string like in the answer. – JackHasaKeyboard Nov 13 '17 at 02:22