diff --git a/src/browser/index.jsx b/src/browser/index.jsx
index 671c683b..5e706109 100644
--- a/src/browser/index.jsx
+++ b/src/browser/index.jsx
@@ -461,10 +461,10 @@ var showUnreadBadgeWindows = function(unreadCount, mentionCount) {
   };
 
   if (mentionCount > 0) {
-    const dataURL = badge.createDataURL(mentionCount.toString());
+    const dataURL = badge.createDataURL(mentionCount.toString(), "#FF1744"); // Material Red A400
     sendBadge(dataURL, 'You have unread mention (' + mentionCount + ')');
   } else if (unreadCount > 0) {
-    const dataURL = badge.createDataURL('•');
+    const dataURL = badge.createDataURL('•', "#00e5ff"); // Material Cyan A400
     sendBadge(dataURL, 'You have unread channels');
   } else {
     sendBadge(null, 'You have no unread messages');
diff --git a/src/browser/js/badge.js b/src/browser/js/badge.js
index 0b0b168e..0dfaf95f 100644
--- a/src/browser/js/badge.js
+++ b/src/browser/js/badge.js
@@ -1,6 +1,6 @@
 'use strict';
 
-var createDataURL = function(text) {
+var createDataURL = function(text, color) {
   const scale = 2; // should rely display dpi
   const size = 16 * scale;
   const canvas = document.createElement('canvas');
@@ -9,10 +9,11 @@ var createDataURL = function(text) {
   const ctx = canvas.getContext('2d');
 
   // circle
-  ctx.fillStyle = "#FF1744"; // Material Red A400
+  ctx.fillStyle = color;
   ctx.beginPath();
   ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
   ctx.fill();
+  ctx.stroke();
 
   // text
   ctx.fillStyle = "#ffffff"