Add Favicon (devcontainers#176)

* Add favicon file

* change favicon .png -> .ico

* extract css theme color for use site

* use jekyll site to provide css color

* set meta theme color to change title bar color

Author: jarrodcolburn

_config.yml

@@ -7,6 +7,7 @@ description: >
 url: https://devcontainers.github.io # the base hostname & protocol for your site
 git_address: https://github.com/devcontainers/devcontainers.github.io
 git_edit_address: https://github.com/devcontainers/devcontainers.github.io/settings/pages/blob/gh-pages
+theme_color: 2753E3
 
 # Build settings
 markdown: kramdown

_includes/head.html

@@ -11,7 +11,8 @@
     <link rel="stylesheet" href="{{ "/css/bootswatch/cosmo/bootstrap.min.css" | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ "/css/fontawesome-all.min.css" | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
-    <link rel="shortcut icon" href="{{ "/img/favicon.png" | prepend: site.baseurl }}">
+    <link rel="shortcut icon" href="{{ "/img/favicon.ico" | prepend: site.baseurl }}">
+    <meta name="theme-color" content="#{{ site.theme_color }}">
 
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
     <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />

css/main.scss

@@ -24,7 +24,7 @@ body {
 }
 
 .bg-primary {
-	background-color: #2753e3 !important;
+	background-color: #{{ site.theme_color }} !important;
   }
 
 .header-container {
@@ -442,15 +442,15 @@ pre[class=highlight] {
 }
 
 .nav .nav-link {
-	color: #2753e3 !important;
+	color: #{{ site.theme_color }} !important;
   }
 
 .nav .nav-link:hover {
 	color: #1034a8 !important;
 }
 
 a {
-	color: #2753e3;
+	color: #{{ site.theme_color }};
 }
 
 a:hover {