Add favicon

Gemfile

@@ -1,10 +1,11 @@
 source 'https://rubygems.org'
 
-ruby "2.1.2"
+ruby "2.1.4"
 
 gem "middleman", "~> 3.3.6"
 gem "middleman-livereload", "~> 3.3.4"
 gem "middleman-syntax", :github => "middleman/middleman-syntax"
+gem "middleman-favicon-maker"
 gem "middleman-deploy"
 
 gem "bourbon"

Gemfile.lock

@@ -37,12 +37,15 @@ GEM
       sass (>= 3.3.0, < 3.5)
     compass-import-once (1.0.5)
       sass (>= 3.2, < 3.5)
+    docile (1.1.5)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     erubis (2.7.0)
     eventmachine (1.0.3)
     execjs (2.2.2)
+    favicon_maker (1.3)
+      docile (~> 1.1)
     ffi (1.9.6)
     haml (4.0.5)
       tilt
@@ -85,6 +88,9 @@ GEM
       middleman-core (>= 3.2)
       net-sftp
       ptools
+    middleman-favicon-maker (3.7)
+      favicon_maker (~> 1.3)
+      middleman-core (>= 3.0.0)
     middleman-livereload (3.3.4)
       em-websocket (~> 0.5.1)
       middleman-core (~> 3.2)
@@ -152,6 +158,7 @@ DEPENDENCIES
   bourbon
   middleman (~> 3.3.6)
   middleman-deploy
+  middleman-favicon-maker
   middleman-livereload (~> 3.3.4)
   middleman-syntax!
   neat

config.rb

@@ -23,6 +23,31 @@
 configure :build do
   activate :minify_css
   activate :minify_javascript
+  activate :favicon_maker, icons: { "_favicon_template.png" =>
+      [
+        { icon: "apple-touch-icon-152x152-precomposed.png" },             # Same as apple-touch-icon-57x57.png, for retina iPad with iOS7.
+        { icon: "apple-touch-icon-144x144-precomposed.png" },             # Same as apple-touch-icon-57x57.png, for retina iPad with iOS6 or prior.
+        { icon: "apple-touch-icon-120x120-precomposed.png" },             # Same as apple-touch-icon-57x57.png, for retina iPhone with iOS7.
+        { icon: "apple-touch-icon-114x114-precomposed.png" },             # Same as apple-touch-icon-57x57.png, for retina iPhone with iOS6 or prior.
+        { icon: "apple-touch-icon-76x76-precomposed.png" },               # Same as apple-touch-icon-57x57.png, for non-retina iPad with iOS7.
+        { icon: "apple-touch-icon-72x72-precomposed.png" },               # Same as apple-touch-icon-57x57.png, for non-retina iPad with iOS6 or prior.
+        { icon: "apple-touch-icon-60x60-precomposed.png" },               # Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7.
+        { icon: "apple-touch-icon-57x57-precomposed.png" },               # iPhone and iPad users can turn web pages into icons on their home screen. Such link appears as a regular iOS native application. When this happens, the device looks for a specific picture. The 57x57 resolution is convenient for non-retina iPhone with iOS6 or prior. Learn more in Apple docs.
+        { icon: "apple-touch-icon-precomposed.png", size: "57x57" },      # Same as apple-touch-icon.png, expect that is already have rounded corners (but neither drop shadow nor gloss effect).
+        { icon: "apple-touch-icon.png", size: "57x57" },                  # Same as apple-touch-icon-57x57.png, for "default" requests, as some devices may look for this specific file. This picture may save some 404 errors in your HTTP logs. See Apple docs
+        { icon: "favicon-196x196.png" },                                  # For Android Chrome M31+.
+        { icon: "favicon-160x160.png" },                                  # For Opera Speed Dial (up to Opera 12; this icon is deprecated starting from Opera 15), although the optimal icon is not square but rather 256x160. If Opera is a major platform for you, you should create this icon yourself.
+        { icon: "favicon-96x96.png" },                                    # For Google TV.
+        { icon: "favicon-32x32.png" },                                    # For Safari on Mac OS.
+        { icon: "favicon-16x16.png" },                                    # The classic favicon, displayed in the tabs.
+        { icon: "favicon.png", size: "16x16" },                           # The classic favicon, displayed in the tabs.
+        { icon: "favicon.ico", size: "64x64,32x32,24x24,16x16" },         # Used by IE, and also by some other browsers if we are not careful.
+        { icon: "mstile-70x70.png", size: "70x70" },                      # For Windows 8 / IE11.
+        { icon: "mstile-144x144.png", size: "144x144" },
+        { icon: "mstile-150x150.png", size: "150x150" },
+        { icon: "mstile-310x310.png", size: "310x310" },
+      ]
+    }
 end
 
 activate :deploy do |deploy|