diff --git a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js
index 2651660bf..61c6e9a7e 100644
--- a/packages/node_modules/@node-red/editor-api/lib/editor/theme.js
+++ b/packages/node_modules/@node-red/editor-api/lib/editor/theme.js
@@ -24,7 +24,10 @@ var defaultContext = {
     page: {
         title: "Node-RED",
         favicon: "favicon.ico",
-        tabicon: "red/images/node-red-icon-black.svg"
+        tabicon: {
+            icon: "red/images/node-red-icon-black.svg",
+            colour: "#8f0000"
+        }
     },
     header: {
         title: "Node-RED",
@@ -123,9 +126,13 @@ module.exports = {
             }
 
             if (theme.page.tabicon) {
-                url = serveFile(themeApp,"/tabicon/",theme.page.tabicon)
+                let icon = theme.page.tabicon.icon || theme.page.tabicon
+                url = serveFile(themeApp,"/tabicon/", icon)
                 if (url) {
-                    themeContext.page.tabicon = url;
+                    themeContext.page.tabicon.icon = url;
+                }
+                if (theme.page.tabicon.colour) {
+                    themeContext.page.tabicon.colour = theme.page.tabicon.colour
                 }
             }
 
diff --git a/packages/node_modules/@node-red/editor-client/templates/index.mst b/packages/node_modules/@node-red/editor-client/templates/index.mst
index 0fc2014c8..334e9f95e 100644
--- a/packages/node_modules/@node-red/editor-client/templates/index.mst
+++ b/packages/node_modules/@node-red/editor-client/templates/index.mst
@@ -23,7 +23,7 @@
 -->
 <title>{{ page.title }}</title>
 <link rel="icon" type="image/png" href="{{ page.favicon }}">
-<link rel="mask-icon" href="{{ page.tabicon }}" color="#8f0000">
+<link rel="mask-icon" href="{{ page.tabicon.icon }}" color="{{ page.tabicon.colour }}">
 <link rel="stylesheet" href="vendor/jquery/css/base/jquery-ui.min.css">
 <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
 <link rel="stylesheet" href="red/style.min.css">
diff --git a/test/unit/@node-red/editor-api/lib/editor/theme_spec.js b/test/unit/@node-red/editor-api/lib/editor/theme_spec.js
index 3fb2356ab..716ee8357 100644
--- a/test/unit/@node-red/editor-api/lib/editor/theme_spec.js
+++ b/test/unit/@node-red/editor-api/lib/editor/theme_spec.js
@@ -41,7 +41,9 @@ describe("api/editor/theme", function () {
         context.should.have.a.property("page");
         context.page.should.have.a.property("title", "Node-RED");
         context.page.should.have.a.property("favicon", "favicon.ico");
-        context.page.should.have.a.property("tabicon", "red/images/node-red-icon-black.svg");
+        context.page.should.have.a.property("tabicon");
+        context.page.tabicon.should.have.a.property("icon", "red/images/node-red-icon-black.svg");
+        context.page.tabicon.should.have.a.property("colour", "#8f0000");
         context.should.have.a.property("header");
         context.header.should.have.a.property("title", "Node-RED");
         context.header.should.have.a.property("image", "red/images/node-red.svg");
@@ -58,7 +60,10 @@ describe("api/editor/theme", function () {
                 page: {
                     title: "Test Page Title",
                     favicon: "/absolute/path/to/theme/favicon",
-                    tabicon: "/absolute/path/to/theme/tabicon",
+                    tabicon: {
+                        icon: "/absolute/path/to/theme/tabicon",
+                        colour: "#8f008f"
+                    },
                     css: "/absolute/path/to/custom/css/file.css",
                     scripts: "/absolute/path/to/script.js"
                 },
@@ -108,7 +113,9 @@ describe("api/editor/theme", function () {
         context.should.have.a.property("page");
         context.page.should.have.a.property("title", "Test Page Title");
         context.page.should.have.a.property("favicon", "theme/favicon/favicon");
-        context.page.should.have.a.property("tabicon", "theme/tabicon/tabicon");
+        context.page.should.have.a.property("tabicon")
+        context.page.tabicon.should.have.a.property("icon", "theme/tabicon/tabicon");
+        context.page.tabicon.should.have.a.property("colour", "#8f008f")
         context.should.have.a.property("header");
         context.header.should.have.a.property("title", "Test Header Title");
         context.header.should.have.a.property("url", "http://nodered.org");
@@ -142,6 +149,27 @@ describe("api/editor/theme", function () {
         settings.projects.should.have.a.property("enabled", false);
     });
 
+    it("picks up backwards compatible tabicon setting", async function () {
+        theme.init({
+            editorTheme: {
+                page: {
+                    tabicon: "/absolute/path/to/theme/tabicon",
+                }
+            }
+        });
+
+        theme.app();
+
+        var context = await theme.context();
+        context.should.have.a.property("page");
+        context.page.should.have.a.property("tabicon");
+        context.page.tabicon.should.have.a.property("icon", "theme/tabicon/tabicon");
+        // The colour property should remain as default in this case as the
+        // legacy format for defining tabicon doesn't allow specifying a colour
+        context.page.tabicon.should.have.a.property("colour", "#8f0000");
+
+    });
+
     it("test explicit userMenu set to true in theme setting", function () {
       theme.init({
           editorTheme: {