coder · BrunoQuaresma · Jul 14, 2022 · Jul 13, 2022 · Jul 14, 2022
@@ -22,9 +22,14 @@
     data-statuscode="{{ .APIResponse.StatusCode }}"
     data-message="{{ .APIResponse.Message }}"
   />
-  <link rel="mask-icon" href="/static/favicon.svg" color="#000000" crossorigin="use-credentials" />
-  <link rel="alternate icon" type="image/png" href="/favicon.png" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <!-- We need to set data-react-helmet to be able to override it in the workspace page -->
+  <link
+    rel="alternate icon"
+    type="image/png"
+    href="/favicons/favicon.png"
+    data-react-helmet="true"
+  />
+  <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" data-react-helmet="true" />
 </head>
 
 <body>

@@ -10,6 +10,7 @@ import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
 import { Workspace } from "../../components/Workspace/Workspace"
 import { firstOrItem } from "../../util/array"
 import { pageTitle } from "../../util/page"
+import { getFaviconByStatus } from "../../util/workspace"
 import { selectUser } from "../../xServices/auth/authSelectors"
 import { XServiceContext } from "../../xServices/StateContext"
 import { workspaceMachine } from "../../xServices/workspace/workspaceXService"
@@ -50,10 +51,13 @@ export const WorkspacePage: React.FC = () => {
   } else if (!workspace) {
     return <FullScreenLoader />
   } else {
+    const favicon = getFaviconByStatus(workspace.latest_build)
     return (
       <>
         <Helmet>
           <title>{pageTitle(`${workspace.owner_name}/${workspace.name}`)}</title>
+          <link rel="alternate icon" type="image/png" href={`/favicons/${favicon}.png`} />
+          <link rel="icon" type="image/svg+xml" href={`/favicons/${favicon}.svg`} />
         </Helmet>
 
         <Workspace

@@ -281,3 +281,41 @@ export const defaultWorkspaceExtension = (
     deadline: fourHoursFromNow.format(),
   }
 }
+
+// You can see the favicon designs here: https://www.figma.com/file/YIGBkXUcnRGz2ZKNmLaJQf/Coder-v2-Design?node-id=560%3A620
+
+type FaviconType =
+  | "favicon"
+  | "favicon-success"
+  | "favicon-error"
+  | "favicon-warning"
+  | "favicon-running"
+
+export const getFaviconByStatus = (build: TypesGen.WorkspaceBuild): FaviconType => {
+  const status = getWorkspaceStatus(build)
+  switch (status) {
+    case undefined:
+      return "favicon"
+    case "started":
+      return "favicon-success"
+    case "starting":
+      return "favicon-running"
+    case "stopping":
+      return "favicon-running"
+    case "stopped":
+      return "favicon"
+    case "deleting":
+      return "favicon"
+    case "deleted":
+      return "favicon"
+    case "canceling":
+      return "favicon-warning"
+    case "canceled":
+      return "favicon"
+    case "error":
+      return "favicon-error"
+    case "queued":
+      return "favicon"
+  }
+  throw new Error("unknown status " + status)
+}