Improve favicons

Following http://stackoverflow.com/questions/2268204/favicon-dimensions
advice on the best range of icons to offer, and using the site linked
there to generate everything.

app/assets/favicons/browserconfig.xml.erb

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="<%= image_path("mstile-70x70.png") %>"/>
+      <square150x150logo src="<%= image_path("mstile-150x150.png") %>"/>
+      <square310x310logo src="<%= image_path("mstile-310x310.png") %>"/>
+      <wide310x150logo src="<%= image_path("mstile-310x150.png") %>"/>
+      <TileColor>#00a300</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

app/assets/favicons/manifest.json.erb

@@ -0,0 +1,41 @@
+{
+	"name": "OpenStreetMap",
+	"icons": [
+		{
+			"src": "<%= image_path("android-chrome-36x36.png").gsub("/", "\\/") %>",
+			"sizes": "36x36",
+			"type": "image\/png",
+			"density": "0.75"
+		},
+		{
+			"src": "<%= image_path("android-chrome-48x48.png").gsub("/", "\\/") %>",
+			"sizes": "48x48",
+			"type": "image\/png",
+			"density": "1.0"
+		},
+		{
+			"src": "<%= image_path("android-chrome-72x72.png").gsub("/", "\\/") %>",
+			"sizes": "72x72",
+			"type": "image\/png",
+			"density": "1.5"
+		},
+		{
+			"src": "<%= image_path("android-chrome-96x96.png").gsub("/", "\\/") %>",
+			"sizes": "96x96",
+			"type": "image\/png",
+			"density": "2.0"
+		},
+		{
+			"src": "<%= image_path("android-chrome-144x144.png").gsub("/", "\\/") %>",
+			"sizes": "144x144",
+			"type": "image\/png",
+			"density": "3.0"
+		},
+		{
+			"src": "<%= image_path("android-chrome-192x192.png").gsub("/", "\\/") %>",
+			"sizes": "192x192",
+			"type": "image\/png",
+			"density": "4.0"
+		}
+	]
+}

app/views/layouts/_head.html.erb

@@ -11,12 +11,18 @@
     <%= stylesheet_link_tag "large-#{dir}", :media => "screen" %>
     <%= favicon_link_tag "favicon.ico" %>
   <![endif]-->
-  <%= favicon_link_tag "osm_logo_57.png", :rel => "apple-touch-icon", :sizes => "57x57", :type => "image/png" %>
-  <%= favicon_link_tag "osm_logo_72.png", :rel => "apple-touch-icon", :sizes => "72x72", :type => "image/png" %>
-  <%= favicon_link_tag "osm_logo_114.png", :rel => "apple-touch-icon", :sizes => "114x114", :type => "image/png" %>
-  <%= favicon_link_tag "osm_logo_144.png", :rel => "apple-touch-icon", :sizes => "144x144", :type => "image/png" %>
-  <%= favicon_link_tag "osm_logo_228.png", :rel => "icon", :sizes => "228x228", :type => "image/png" %>
-  <%= tag("meta", { :name => "msapplication-TileImage", :content => image_path("osm_logo_144.png") }) %>
+  <% [57, 60, 72, 76, 114, 120, 144, 152, 180].each do |size| -%>
+  <%= favicon_link_tag "apple-touch-icon-#{size}x#{size}.png", :rel => "apple-touch-icon", :sizes => "#{size}x#{size}", :type => "image/png" %>
+  <% end -%>
+  <%= favicon_link_tag "favicon-32x32.png", :sizes => "32x32", :type => "image/png" %>
+  <%= favicon_link_tag "favicon-194x194.png", :sizes => "194x194", :type => "image/png" %>
+  <%= favicon_link_tag "favicon-96x96.png", :sizes => "96x96", :type => "image/png" %>
+  <%= favicon_link_tag "android-chrome-192x192.png", :sizes => "192x192", :type => "image/png" %>
+  <%= favicon_link_tag "favicon-16x16.png", :sizes => "16x16", :type => "image/png" %>
+  <%= tag("link", { :rel => "manifest", :href => asset_path("manifest.json") }) %>
+  <%= tag("meta", { :name => "msapplication-TileColor", :content => "#00a300" }) %>
+  <%= tag("meta", { :name => "msapplication-TileImage", :content => image_path("mstile-144x144.png") }) %>
+  <%= tag("meta", { :name => "theme-color", :content => "#ffffff" }) %>
   <%= tag("link", { :rel => "publisher", :href => "https://plus.google.com/111953119785824514010" }) %>
   <%= tag("link", { :rel => "search", :type => "application/opensearchdescription+xml", :title => "OpenStreetMap Search", :href => asset_path("osm.xml") }) %>
   <%= tag("meta", { :name => "description", :content => "OpenStreetMap is the free wiki world map." }) %>