Cross platform favicon

_includes/head.html

@@ -3,10 +3,19 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   {%- seo -%}
-  <link rel="shortcut icon" type="image/png" href="{{ '/assets/favicon.png' | relative_url }}"/>
-  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
   <link rel="stylesheet" href="{{ '/assets/fontawesome/css/fontawesome-all.min.css' | relative_url }}">
 
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/favicon/apple-touch-icon.png' | relative_url }}">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/favicon/favicon-32x32.png' | relative_url }}">
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/favicon/favicon-16x16.png' | relative_url }}">
+  <link rel="manifest" href="{{ '/assets/favicon/site.webmanifest' | relative_url }}">
+  <link rel="mask-icon" href="{{ '/assets/favicon/safari-pinned-tab.svg' | relative_url }}" color="#5bbad5">
+  <link rel="shortcut icon" href="{{ '/assets/favicon/favicon.ico' | relative_url }}">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="msapplication-config" content="{{ '/assets/favicon/browserconfig.xml' | relative_url }}">
+  <meta name="theme-color" content="#ffffff">
+
   {%- include css-imports.html -%}
 
   {%- if jekyll.environment == "review" -%}
@@ -16,7 +25,7 @@
       data-merge-request-id='{{site.mr_id}}'
       data-mr-url='{{site.gitlab_host}}'
       id='review-app-toolbar-script'
-      src='{{site.gitlab_host}}/assets/webpack/visual_review_toolbar.js'></script> 
+      src='{{site.gitlab_host}}/assets/webpack/visual_review_toolbar.js'></script>
   {%- endif -%}
 
   {%- if jekyll.environment == 'production' and site.google_analytics -%}

assets/favicon/browserconfig.xml

+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/assets/favicon/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

assets/favicon/safari-pinned-tab.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M650 6006 c-4 -3 -5 -5112 -1 -5177 1 -14 35 -15 314 -14 171 1 314
+3 317 4 3 0 5 527 4 1171 l0 1170 45 1 c201 2 882 -2 946 -6 389 -25 578 -121
+692 -350 19 -38 61 -152 68 -185 2 -8 8 -35 14 -60 5 -25 12 -58 15 -75 7 -35
+43 -308 51 -380 3 -27 7 -68 10 -90 2 -22 7 -62 10 -90 11 -96 16 -140 21
+-173 2 -18 6 -54 9 -80 3 -26 8 -62 10 -79 6 -43 14 -95 19 -136 33 -234 75
+-461 109 -592 l13 -50 342 0 c302 0 341 1 337 15 -90 294 -167 645 -200 915
+-4 28 -8 57 -10 65 -2 8 -7 40 -10 70 -7 61 -14 122 -20 160 -2 14 -6 55 -10
+92 -3 37 -7 75 -9 85 -2 10 -7 52 -10 93 -4 41 -9 84 -11 95 -2 11 -7 49 -10
+84 -12 141 -38 268 -81 400 -88 269 -230 415 -509 522 -75 29 -95 40 -79 45
+195 55 435 221 559 386 108 144 210 355 241 499 32 151 37 190 39 342 4 310
+-53 525 -203 757 -115 178 -298 342 -473 423 -54 25 -192 74 -234 83 -64 15
+-167 34 -205 39 -25 3 -61 9 -80 12 -40 7 -2023 17 -2030 9z m1875 -610 c242
+-38 392 -112 506 -248 115 -138 167 -303 174 -548 7 -268 -64 -477 -214 -630
+-96 -98 -210 -150 -381 -175 -25 -4 -56 -9 -70 -12 -14 -3 -305 -7 -647 -10
+l-623 -5 0 821 0 821 608 -4 c334 -2 625 -6 647 -10z"/>
+<path d="M5225 5994 c-396 -67 -626 -306 -661 -684 l-6 -68 84 -4 c45 -2 130
+-1 188 2 l105 5 3 30 c25 231 206 399 440 407 308 9 482 -149 484 -440 2 -315
+-211 -493 -594 -495 l-96 0 -1 -159 c0 -87 3 -158 7 -158 4 -1 61 -2 127 -4
+186 -5 297 -31 385 -90 149 -100 221 -249 215 -447 -7 -240 -144 -416 -368
+-473 -78 -20 -241 -14 -327 13 -181 56 -282 195 -295 405 l-1 29 -199 0 -199
+-1 -1 -38 c-1 -86 23 -202 62 -298 69 -168 189 -284 386 -376 134 -62 198 -74
+387 -75 180 0 230 5 334 37 290 88 496 301 571 593 20 75 26 253 12 336 -19
+116 -71 239 -135 319 -48 59 -49 60 -106 103 -61 48 -120 75 -221 103 -44 12
+-73 23 -65 24 39 4 60 12 140 51 149 74 272 217 331 386 26 75 36 254 20 347
+-57 326 -288 551 -631 617 -92 17 -281 18 -375 3z"/>
+</g>
+</svg>

assets/favicon/site.webmanifest

+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/assets/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}