diff --git a/client/scss/components/_logo.scss b/client/scss/components/_logo.scss
index 18482da7c..4f96ab4f1 100644
--- a/client/scss/components/_logo.scss
+++ b/client/scss/components/_logo.scss
@@ -11,8 +11,23 @@
 .logo {
     display: block;
     color: #aaa;
-    padding: 0.9em 1.2em;
     -webkit-font-smoothing: auto;
+    position: relative;
+
+    &:hover {
+        color: $color-white;
+    }
+}
+
+@include media-breakpoint-down(xs) {
+    .logo {
+        padding: 0 1.2em;
+        margin: 0.9em 0;
+        height: 28px;
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
 }
 
 // Desktop styling (override mobile styling):
@@ -24,24 +39,62 @@
 }
 
 .wagtail-logo-container__mobile {
-    .wagtail-logo {
-        width: 20px;
+    position: relative;
+
+    .wagtail-logo,
+    .wagtail-logo-container__background {
         float: left;
+    }
+
+    .wagtail-logo,
+    .wagtail-logo-container-inner {
+        width: 20px;
+    }
+
+    .wagtail-logo {
         border: 0;
         margin-right: 1em;
     }
 
+    .wagtail-logo-container__background {
+        width: 28px;
+        margin-right: 5px;
+    }
+
+    .wagtail-logo-container-inner {
+        height: 20px;
+        margin-left: 4px;
+        margin-top: 3px;
+        position: absolute;
+    }
+
     &:hover {
         color: $color-white;
     }
 }
 
 .wagtail-logo-container__desktop {
-    display: block;
-    margin: auto;
-    width: 60px;
-    height: 75px;
     position: relative;
+    width: 80px;
+    height: 80px;
+
+    .wagtail-logo-container__background {
+        position: absolute;
+        top: -3px;
+        left: 0;
+    }
+
+    .wagtail-logo-container-inner {
+        width: 45px;
+        height: 75px;
+        margin: auto;
+        position: relative;
+    }
+}
+
+.wagtail-logo-container-inner,
+.wagtail-logo-container__desktop.animated-logo-container {
+    display: block;
     transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);
 
     .wagtail-logo {
diff --git a/wagtail/admin/static_src/wagtailadmin/images/logo-background.svg b/wagtail/admin/static_src/wagtailadmin/images/logo-background.svg
new file mode 100644
index 000000000..afad9a1ec
--- /dev/null
+++ b/wagtail/admin/static_src/wagtailadmin/images/logo-background.svg
@@ -0,0 +1,3 @@
+<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <circle id="Oval" fill="#007D7E" cx="40" cy="40" r="40"></circle>
+</svg>
\ No newline at end of file
diff --git a/wagtail/admin/static_src/wagtailadmin/js/core.js b/wagtail/admin/static_src/wagtailadmin/js/core.js
index 1b478ade2..9f49d7e39 100644
--- a/wagtail/admin/static_src/wagtailadmin/js/core.js
+++ b/wagtail/admin/static_src/wagtailadmin/js/core.js
@@ -122,7 +122,7 @@ $(function() {
     function initLogo() {
         var sensitivity = 8; // the amount of times the user must stroke the wagtail to trigger the animation
 
-        var $logoContainer = $('.wagtail-logo-container__desktop');
+        var $logoContainer = $('.animated-logo-container');
         var mouseX = 0;
         var lastMouseX = 0;
         var dir = '';
diff --git a/wagtail/admin/templates/wagtailadmin/base.html b/wagtail/admin/templates/wagtailadmin/base.html
index 36c9a7a8c..184b12987 100644
--- a/wagtail/admin/templates/wagtailadmin/base.html
+++ b/wagtail/admin/templates/wagtailadmin/base.html
@@ -8,11 +8,14 @@
                 {% block branding_logo %}
                     {# Mobile-only logo: #}
                     <div class="wagtail-logo-container__mobile u-hidden@sm">
-                        <img class="wagtail-logo wagtail-logo__full" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
+                        <img class="wagtail-logo-container__background" src="{% versioned_static 'wagtailadmin/images/logo-background.svg' %}" alt=""/>
+                        <div class="wagtail-logo-container-inner">
+                          <img class="wagtail-logo wagtail-logo__full" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
+                        </div>
                     </div>
 
                     {# Desktop logo (animated): #}
-                    {% include "wagtailadmin/shared/animated_logo.html" %}
+                    {% include "wagtailadmin/shared/animated_logo_background.html" %}
                 {% endblock %}
                 <span class="u-hidden@sm">{% trans "Dashboard" %}</span>
             </a>
diff --git a/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html b/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html
index 9fdb1a070..bb4350f3a 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html
@@ -1,8 +1,8 @@
 {% load wagtailadmin_tags %}
 
-<div class="wagtail-logo-container__desktop u-hidden@xs">
-    <img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
-    <img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
-    <img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
-    <img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
+<div class="wagtail-logo-container__desktop animated-logo-container u-hidden@xs">
+  <img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
+  <img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
+  <img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
+  <img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
 </div>
diff --git a/wagtail/admin/templates/wagtailadmin/shared/animated_logo_background.html b/wagtail/admin/templates/wagtailadmin/shared/animated_logo_background.html
new file mode 100644
index 000000000..6965683eb
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/shared/animated_logo_background.html
@@ -0,0 +1,11 @@
+{% load wagtailadmin_tags static %}
+
+<div class="wagtail-logo-container__desktop u-hidden@xs">
+  <img class="wagtail-logo wagtail-logo-container__background" src="{% static 'wagtailadmin/images/logo-background.svg' %}" alt=""/>
+  <div class="wagtail-logo-container-inner animated-logo-container">
+    <img class="wagtail-logo wagtail-logo__body" src="{% static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
+    <img class="wagtail-logo wagtail-logo__tail" src="{% static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
+    <img class="wagtail-logo wagtail-logo__eye--open" src="{% static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
+    <img class="wagtail-logo wagtail-logo__eye--closed" src="{% static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
+  </div>
+</div>