diff --git a/src/scripts/common/utils/graphics.js b/src/scripts/common/utils/graphics.js
new file mode 100644
index 00000000..1b9ddc42
--- /dev/null
+++ b/src/scripts/common/utils/graphics.js
@@ -0,0 +1,30 @@
+function createBadgeDataUrl (text) {
+  const canvas = document.createElement('canvas');
+  canvas.height = 140;
+  canvas.width = 140;
+
+  const context = canvas.getContext('2d');
+  context.fillStyle = 'red';
+  context.beginPath();
+  context.ellipse(70, 70, 70, 70, 0, 0, 2 * Math.PI);
+  context.fill();
+  context.textAlign = 'center';
+  context.fillStyle = 'white';
+
+  if (text.length > 2) {
+    context.font = 'bold 65px "Segoe UI", sans-serif';
+    context.fillText('' + text, 70, 95);
+  } else if (text.length > 1) {
+    context.font = 'bold 85px "Segoe UI", sans-serif';
+    context.fillText('' + text, 70, 100);
+  } else {
+    context.font = 'bold 100px "Segoe UI", sans-serif';
+    context.fillText('' + text, 70, 105);
+  }
+
+  return canvas.toDataURL();
+}
+
+export default {
+  createBadgeDataUrl
+};
diff --git a/src/scripts/renderer/webview/listeners.js b/src/scripts/renderer/webview/listeners.js
index a4d412b8..22682dc8 100755
--- a/src/scripts/renderer/webview/listeners.js
+++ b/src/scripts/renderer/webview/listeners.js
@@ -2,37 +2,11 @@ import {shell, remote} from 'electron';
 
 import webView from 'renderer/webview';
 import platform from 'common/utils/platform';
+import graphics from 'common/utils/graphics';
 import files from 'common/utils/files';
 import prefs from 'common/utils/prefs';
 import urls from 'common/utils/urls';
 
-function createBadgeDataUrl (text) {
-  const canvas = document.createElement('canvas');
-  canvas.height = 140;
-  canvas.width = 140;
-
-  const context = canvas.getContext('2d');
-  context.fillStyle = 'red';
-  context.beginPath();
-  context.ellipse(70, 70, 70, 70, 0, 0, 2 * Math.PI);
-  context.fill();
-  context.textAlign = 'center';
-  context.fillStyle = 'white';
-
-  if (text.length > 2) {
-    context.font = 'bold 65px "Segoe UI", sans-serif';
-    context.fillText('' + text, 70, 95);
-  } else if (text.length > 1) {
-    context.font = 'bold 85px "Segoe UI", sans-serif';
-    context.fillText('' + text, 70, 100);
-  } else {
-    context.font = 'bold 100px "Segoe UI", sans-serif';
-    context.fillText('' + text, 70, 105);
-  }
-
-  return canvas.toDataURL();
-}
-
 // Log console messages
 webView.addEventListener('console-message', function (event) {
   const msg = event.message.replace(/%c/g, '');
@@ -50,7 +24,7 @@ webView.addEventListener('page-title-updated', function () {
   let badgeDataUrl = null;
 
   if (platform.isWindows && count) {
-    badgeDataUrl = createBadgeDataUrl(count);
+    badgeDataUrl = graphics.createBadgeDataUrl(count);
   }
 
   log('notifying window of notif-count', count, !!badgeDataUrl || null);