Use a different favicon based on workspace status

Problem to solve

The Gitpod logo is used as a favicon for the website, dashboard, and workspaces regardless of workspace state.

Given the upcoming changes with the usage-based pricing, having a better view of the running workspaces which consume credits or errored workspaces that need attention could be useful to provide better 🅰️ visibility of system status and 🅱️ user control.

Proposal

Let's update the workspace favicon based on the workspace status.

We can use the existing workspace status icon used in the workspaces list to mimic this behavior. Although these icons are not quite accessible (https://github.com/gitpod-io/gitpod/issues/4225), they are still a good next iteration and can be improved later on.

Re-posting from https://github.com/gitpod-io/gitpod/issues/7477#issuecomment-1141049961:

A boring (simple) solution as a good MVC (minimum viable change) for resolving this could be updating the favicon based on the workspace status or start phase. Title is used to indicate the status, not intended for implementation.

Running	Starting, Stopping, Timing out	Error	Stopped & Timed out

Alternatively, we could introduce toned down favicon icon form the error and stopped phases.

Error	Stopped & Timed out

Start by locating the existing workspace status icon used in the workspaces list and the favicon handling for the website, dashboard, and workspaces. Compare the proposed states and decide which status-to-favicon mapping is in scope; done means the favicon reflects the workspace status in each relevant interface.