diff --git a/_includes/header.html b/_includes/header.html
index f7adbfe..267853e 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,66 +1,10 @@
 <header class="site-header">
 
   <div class="wrapper">
-    <div class="logo-container">
-
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 90 90">
-  <style>
-    /* <![CDATA[ */
-#logo-square-top {
-  animation-duration: 1.5s;
-  animation-name: logo-slidevert;
-  animation-iteration-count: infinite;
-  fill: #EC7357;
-}
-#logo-square-right {
-  animation-duration: 1.5s;
-  animation-name: logo-slidehor;
-  animation-iteration-count: infinite;
-  fill: #30A9DE;
-}
-
-@keyframes logo-slidevert {
-  0%, 100%{
-    transform: translate(0, 0);
-  }
-
-  25%, 50%, 75%{
-    transform: translate(0, 10px);
-  }
-}
-
-@keyframes logo-slidehor {
-  0%, 25%, 75%, 100%{
-    transform: translate(0, 0);
-  }
-
-  50%{
-    transform: translate(10px, 0);
-  }
-}
-    /* ]]> */
-  </style>
-
-  <symbol id="logo-square" viewBox="0 0 20 20">
-    <rect x="0" y="0" width="20" height="20" />
-  </symbol>
-
-  <symbol id="logo-background" viewBox="0 0 90 90">
-    <rect x="0" y="0" width="90" height="90" />
-  </symbol>
-
-  <use href="#logo-background" x="0" y="0" width="90" height="90" fill="#fdfdfd" />
-
-  <use id="logo-square-top" href="#logo-square" x="20" y="0" width="19" height="19" />
-  <use href="#logo-square" x="0" y="30" width="19" height="19" fill="#566270" />
-  <use href="#logo-square" x="20" y="30" width="19" height="19" fill="#566270" />
-  <use href="#logo-square" x="40" y="30" width="19" height="19" fill="#566270" />
-  <use id="logo-square-right" href="#logo-square" x="60" y="30" width="19" height="19" />
-  <use href="#logo-square" x="20" y="50" width="19" height="19" fill="#566270" />
-  <use href="#logo-square" x="20" y="70" width="19" height="19" fill="#566270" />
-  <use href="#logo-square" x="40" y="70" width="19" height="19" fill="#566270" />
-</svg>
-    </div>
+    <picture class="logo-container">
+<source srcset="/images/logo.svg" type="image/svg+xml">
+<img src="/images/logo-90x90.png">
+    </picture>
 
     <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
 
diff --git a/_sass/_indietechrocks.scss b/_sass/_indietechrocks.scss
index 34548b1..0ddcbde 100644
--- a/_sass/_indietechrocks.scss
+++ b/_sass/_indietechrocks.scss
@@ -7,8 +7,6 @@ table {
   height: 50px;
   margin: 0 16px 0 0;
   float: left;
-  background: url(/images/logo-50x50.png);
-  background-repeat: none;
 }
 
 table.products {
diff --git a/images/logo.svg b/images/logo.svg
index 7e4175b..4c6d5ea 100644
--- a/images/logo.svg
+++ b/images/logo.svg
@@ -1,51 +1,59 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 90 90">
-  <style>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300">
+<style>
     /* <![CDATA[ */
-#logo-square-top {
-  animation-duration: 1.5s;
-  animation-name: logo-slidevert;
-  animation-iteration-count: infinite;
-  fill: #EC7357;
+[href="#logo-square"]{
+	fill: #566270;
 }
-#logo-square-right {
-  animation-duration: 1.5s;
-  animation-name: logo-slidehor;
-  animation-iteration-count: infinite;
-  fill: #30A9DE;
+
+[id|="logo-square"]{
+	animation-duration: 1.5s;
+
+	animation-iteration-count: infinite;
 }
 
-@keyframes logo-slidevert {
+#logo-square-top{
+	animation-name: slidevert;
+	fill: #EC7357;
+}
+
+#logo-square-right{
+	animation-name: slidehor;
+	fill: #30A9DE;
+}
+
+@keyframes slidevert {
   0%, 100%{
     transform: translate(0, 0);
   }
 
   25%, 50%, 75%{
-    transform: translate(0, 10px);
+    transform: translate(0, 20px);
   }
+
 }
 
-@keyframes logo-slidehor {
+@keyframes slidehor {
   0%, 25%, 75%, 100%{
     transform: translate(0, 0);
   }
 
   50%{
-    transform: translate(10px, 0);
+    transform: translate(20px, 0);
   }
+
 }
     /* ]]> */
-  </style>
-
-  <symbol id="logo-square" viewBox="0 0 20 20">
-    <rect x="0" y="0" width="20" height="20" />
-  </symbol>
-
-  <use id="logo-square-top" href="#logo-square" x="20" y="0" width="19" height="19" />
-  <use href="#logo-square" x="0" y="30" width="19" height="19" fill="#566270" />
-  <use href="#logo-square" x="20" y="30" width="19" height="19" fill="#566270" />
-  <use href="#logo-square" x="40" y="30" width="19" height="19" fill="#566270" />
-  <use id="logo-square-right" href="#logo-square" x="60" y="30" width="19" height="19" />
-  <use href="#logo-square" x="20" y="50" width="19" height="19" fill="#566270" />
-  <use href="#logo-square" x="20" y="70" width="19" height="19" fill="#566270" />
-  <use href="#logo-square" x="40" y="70" width="19" height="19" fill="#566270" />
+</style>
+<symbol id="logo-square" viewBox="0 0 60 60">
+<rect x="0" y="0" width="60" height="60" />
+</symbol>
+
+<use id="logo-square-top" href="#logo-square" x="90" y="20" width="60" height="60" />
+<use href="#logo-square" x="30" y="100" width="60" height="60" />
+<use href="#logo-square" x="90" y="100" width="60" height="60" />
+<use href="#logo-square" x="150" y="100" width="60" height="60" />
+<use id="logo-square-right" href="#logo-square" x="210" y="100" width="60" height="60" />
+<use href="#logo-square" x="90" y="160" width="60" height="60" />
+<use href="#logo-square" x="90" y="220" width="60" height="60" />
+<use href="#logo-square" x="150" y="220" width="60" height="60" />
 </svg>