Stage/prod different favicons, howto?

Seems like a simple thing:

I want a blue icon for my production deployment, and a green one for “stage”.

The icon is in /public/favicon.ico. I’m deploying with mupx and have a setting in settings.json.

How do I copy /public/favicon-stage.ico to /public/favicon.ico at server startup? Or is there a better way?



Instead of handling this at runtime, I’d recommend handling it at deployment time. Wrap your mupx deploy command in a shell script that first copies the proper favicon.ico into place. Something like:

cp ./public/favicon-stage.ico ./public/favicon.ico
mupx deploy --config=mup-staging.json

Save this as then run it for your staging deployments as ./ (you could then expand on this to handle production as well).

1 Like

Hi @hwillson,

Thanks, I tried that out, but ran into this:

  1. Developing app and run server - switch to dev icon
  2. Deploy the app - switch to stage icon
  3. Dev instance is watching and rebuilds with stage icon.

Since the reason to do this is to know your not messing up a “production” instance, misinformation is worse than no information.

Is there a way to do this with: registerBuildPlugin()? I poked around github for some examples, but didn’t find anything complete…

FYI, cross-posted here

Why do it so “complicated”?

Just use NODE_ENV to detect what environment should run and use e.g. env-settings package to handle two different fav-icon links or whatever.

Have a look at or checkout our package

Should be easy to handle favicon-prod.ico and favicon-dev.ico

It needs to be just complicated enough to work.

Env-settings is an interesting package, but I don’t see how it adjusts the favicon.ico. How to you affect the favicon with it?

Modern browsers make a GET /favicon.ico on sites they visit. That request is served statically from the /public folder.

So I need to either change the file in /public or change the static file server. Do you know how to do that?


Normal browsers are looking for CSS link rel=“icon” entries to locate your favicon image

<link rel="icon" type="image/png" href="/my-icon.png">

So with that you may use

<link rel="icon" type="image/png" href="{{Meteor.settings.public.favicon}}">

Have not tested but give it a try.


1 Like

@tomfreudenberg Hmmm… It appears {head> isn’t a template, so variables can’t be used. I get this in the main doc:\'favicon\'%7D%7D-16x16.png?v=2

So, I think changing the request is off the table. That leaves changing the file, or changing the response.

Right, but can’t you just switch the icon back after deploying as part of the shell script? Maybe I’m not fully understanding your setup/environment, but what about:

cp ./public/favicon-stage.ico ./public/favicon.ico
mupx deploy --config=mup-staging.json
cp ./public/favicon-prod.ico ./public/favicon.ico

Or something similar (sure DEV might be toggled for a few seconds, but it will be switched back when the deploy is done)?

@hwilson, yes, that’ll work great. I passed it over without really thinking about it. Thanks for pointing it out :slight_smile:

Just one for the ENV - why not changing some color / text / icon inside your navbar or screen to show up DEV or PROD state and just leave the icon untouched? Just my 2cents.