diff --git a/dist/img/rapid_favicon-dev.svg b/dist/img/rapid_favicon-dev.svg
new file mode 100644
index 000000000..457ee53ae
--- /dev/null
+++ b/dist/img/rapid_favicon-dev.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<circle cx="8" cy="8" r="8" fill="#888"/>
+<rect width="1.66" height=".53" x="3.51" y="7.01" fill="#fff" rx=".26" ry=".26"/>
+<rect width="1.66" height=".53" x="5.6" y="7.01" fill="#fff" rx=".26" ry=".26"/>
+<rect width="1.66" height=".53" x="7.7" y="7.01" fill="#fff" rx=".26" ry=".26"/>
+<path d="M11.65 5.06c-1.16-.6-2.53-.38-3.43.46H3.08c-.19 0-.35.16-.35.35s.16.35.35.35h7.11c.21-.01.42.02.63.1a1.5 1.5 0 0 1 .7 2.22c-.39.59-1.15.83-1.81.57a1.55 1.55 0 0 1-.83-.8H4.4c-.19 0-.35.16-.35.35s.16.35.35.35h3.57c.19 0 .35.16.35.35s-.16.35-.35.35H5.94c-.19 0-.35.16-.35.35s.16.35.35.35h1.51c.19 0 .35.16.35.35s-.15.34-.33.35H7.1c-.19 0-.35.16-.35.35s.16.35.35.35h.5c.05.23.09.41.12.53.02.08.11.13.19.1.76-.29 4.13-1.67 5-3.34a3 3 0 0 0-1.28-4.05z" fill="#fff"/>
+</svg>
diff --git a/modules/core/UiSystem.js b/modules/core/UiSystem.js
index 43c9b15fc..1d06f94c1 100644
--- a/modules/core/UiSystem.js
+++ b/modules/core/UiSystem.js
@@ -93,21 +93,7 @@ export class UiSystem extends AbstractSystem {
       .then(() => {
         window.addEventListener('resize', this.resize);
 
-        // If we detect this is Rapid Canary, change the title and favicon.
-        const detected = utilDetect();
-        if (/\/canary$/.test(detected.host)) {
-          urlhash.titleBase = 'Rapid Canary';
-
-          const $head = select('head');
-          let $favicon = $head.select(`link[rel~='icon']`);
-          if (!$favicon.size()) {
-            $favicon = $head
-              .append('link')
-              .attr('rel', 'icon')
-              .attr('type', 'image/svg');
-          }
-          $favicon.attr('href', assets.getFileURL('img/rapid_favicon-canary.svg'));
-        }
+        this._checkEnvironment();  // are we in a dev or staging environment?
 
         // Create UI components
         this.ApiStatus = new UiApiStatus(context);
@@ -524,6 +510,37 @@ dims = vecAdd(dims, [overscan * 2, overscan * 2]);
   }
 
 
+  /**
+   * _checkEnvironment
+   * This adjusts the favicon and document title if we detect a development or staging environment.
+   * called by `initAsync()`
+   */
+  _checkEnvironment() {
+    const context = this.context;
+    const assets = context.systems.assets;
+    const urlhash = context.systems.urlhash;
+    const detected = utilDetect();
+
+    const $head = select('head');
+    let $favicon = $head.select(`link[rel~='icon']`);
+    if (!$favicon.size()) {
+      $favicon = $head
+        .append('link')
+        .attr('rel', 'icon')
+        .attr('type', 'image/svg');
+    }
+
+    if (/\/canary/.test(detected.host)) {
+      urlhash.titleBase = 'Rapid Canary';
+      $favicon.attr('href', assets.getFileURL('img/rapid_favicon-canary.svg'));
+
+    } else if (/(localhost|127\.0\.0\.1)/.test(detected.host)) {
+      urlhash.titleBase = 'Rapid Dev';
+      $favicon.attr('href', assets.getFileURL('img/rapid_favicon-dev.svg'));
+    }
+  }
+
+
   /**
    * _copyRect
    * ClientRects are immutable, so copy them to an Object in case we need to trim the height/width.