Define brand image in CSS instead of an <img> tag to allow it to be styled; add high resolution tentacle brand image for retina/high-res displays; create non-clashing light version of tentacle brand image to be used when darker custom colors are chosen in settings

octoprint/static/css/octoprint.less

@@ -5,7 +5,6 @@ body {
 }
 
 .navbar-inner-text (@base) {
-  @text-color: contrast(@base, #333333, #f2f2f2);
   text-shadow: 0 1px 0 contrast(@base, lighten(@base, 15%), darken(@base, 15%));
   color: @text-color;
   @caret-color: average(@base, @text-color);
@@ -22,9 +21,32 @@ body {
   }
 }
 
+.brand (@color, @dark, @light) when (@color = @dark) {
+	span {
+	  background-image: url(../img/tentacle-20x20.png);
+	  
+	  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+	    background-image: url(../img/tentacle-20x20@2x.png);
+	  }
+	}
+}
+.brand (@color, @dark, @light) when (@color = @light) {
+	span {
+	  background-image: url(../img/tentacle-20x20-light.png);
+	  
+	  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+	    background-image: url(../img/tentacle-20x20-light@2x.png);
+	  }
+    }
+}
+
 .navbar-inner-color (@base) {
   @top: lighten(@base, 25%);
   @bottom: darken(@base, 15%);
+  
+  @text-color-light: #f2f2f2;
+  @text-color-dark: #333333;
+  @text-color: contrast(@base, @text-color-dark, @text-color-light);
 
   background-color: @base; /* fallback color if gradients are not supported */
   background-image: -webkit-linear-gradient(top, @top, @bottom); /* For Chrome and Safari */
@@ -36,6 +58,10 @@ body {
   .brand, .nav>li>a {
     .navbar-inner-text(@base);
   }
+  
+  .brand {
+  		.brand(@text-color, @text-color-dark, @text-color-light);
+  }
 
   .nav {
     li.dropdown.open>.dropdown-toggle, li.dropdown.active>.dropdown-toggle, li.dropdown.open.active>.dropdown-toggle {
@@ -78,9 +104,12 @@ body {
     @base: #7728FF;
     .navbar-inner-color(@base);
   }
-
-  .brand img {
-    vertical-align: bottom;
+  
+  .brand span {
+	  background-size: 20px 20px;
+	  background-position: left center;
+	  padding-left: 24px;
+	  background-repeat: no-repeat;
   }
 }
 

octoprint/templates/index.jinja2

@@ -34,7 +34,7 @@
         <div id="navbar" class="navbar navbar-fixed-top">
             <div class="navbar-inner" data-bind="css: appearance.color">
                 <div class="container">
-                    <a class="brand" href="#"><img src="{{ url_for('static', filename='img/tentacle-20x20.png') }}"> <span data-bind="text: appearance.brand">OctoPrint</span></a>
+                    <a class="brand" href="#"> <span data-bind="text: appearance.brand">OctoPrint</span></a>
                     <div class="nav-collapse">
                         <ul class="nav pull-right">
                             <li style="display: none;" data-bind="visible: loginState.isAdmin">