diff --git a/_static/logo.html b/_static/logo.html
new file mode 100644
index 00000000..3ef47042
--- /dev/null
+++ b/_static/logo.html
@@ -0,0 +1,38 @@
+<meta charset="UTF-8" />
+<style>
+  .coala-logo-doc {
+    width: 632.5px;
+    height: 187.5px;
+  }
+
+  @media only screen and (max-device-width: 632px) {
+    .coala-logo-doc-header {
+      display: none;
+    }
+    .coala-logo-doc-low {
+      display: block;
+    }
+  }
+
+  @media only screen and (min-device-width: 633px) {
+    .coala-logo-doc-header {
+      display: block;
+    }
+    .coala-logo-doc-low {
+      display: none;
+      height: auto;
+    }
+  }
+</style>
+<body>
+  <div class="coala-logo-doc-header">
+    <img
+      width="632.5px"
+      height="187.5px"
+      src="_static/images/coala-header.png"
+    />
+  </div>
+  <div class="coala-logo-doc-low">
+    <img width="187.5px" height="187.5px" src="_static/images/coala_logo.svg" />
+  </div>
+</body>
diff --git a/index.rst b/index.rst
index 4b2019b9..aaee03e3 100644
--- a/index.rst
+++ b/index.rst
@@ -46,9 +46,8 @@ Welcome to the coala documentation!
 
 You might also want to look at `our website <http://coala.io/>`_.
 
-.. image:: _static/images/coala-header.png
-   :scale: 50
-   :align: center
+.. raw:: html
+   :file: _static/logo.html
 
 coala: Language Independent Code Analysis
 -----------------------------------------
