added favicons generated by https://realfavicongenerator.net/

web/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

web/safari-pinned-tab.svg

@@ -0,0 +1,42 @@
+<?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.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3357 6944 c-1 -1 -42 -5 -92 -9 -49 -3 -101 -8 -115 -10 -14 -2 -50
+-6 -80 -10 -30 -3 -77 -10 -105 -15 -27 -5 -68 -12 -90 -15 -127 -18 -439
+-109 -635 -185 -84 -33 -330 -154 -396 -196 -258 -162 -383 -261 -579 -458
+-311 -312 -542 -683 -715 -1146 -53 -140 -123 -392 -143 -515 -3 -16 -10 -52
+-15 -80 -6 -27 -13 -75 -17 -105 -3 -30 -8 -62 -10 -70 -17 -65 -39 -418 -38
+-630 0 -153 10 -412 17 -460 3 -14 7 -56 11 -95 4 -38 8 -77 10 -85 1 -8 5
+-36 9 -61 10 -67 17 -106 42 -239 73 -381 273 -864 497 -1200 49 -74 154 -214
+179 -242 7 -7 42 -47 78 -88 35 -41 68 -77 72 -80 4 -4 43 -40 85 -81 232
+-225 553 -435 843 -553 36 -15 74 -31 85 -36 11 -5 49 -19 85 -30 36 -12 74
+-26 85 -31 41 -17 284 -82 353 -94 18 -3 63 -12 100 -19 37 -8 90 -17 117 -20
+28 -4 57 -9 65 -11 8 -2 47 -6 85 -9 39 -3 104 -8 145 -12 148 -12 501 -6 625
+11 17 3 50 7 75 9 60 7 114 15 175 26 28 5 66 12 85 15 76 12 282 68 410 111
+840 283 1445 863 1794 1722 73 179 157 456 186 612 6 30 12 66 15 80 21 105
+47 311 62 490 14 180 7 703 -11 850 -2 14 -7 57 -10 95 -4 39 -9 77 -11 85 -2
+8 -6 37 -10 63 -27 215 -117 549 -212 782 -444 1094 -1287 1750 -2453 1910
+-136 19 -286 28 -473 29 -98 0 -179 0 -180 0z m408 -1068 c28 -4 59 -8 70 -10
+11 -2 40 -7 65 -11 391 -62 799 -306 1064 -636 194 -243 361 -616 431 -966 3
+-13 7 -35 10 -50 6 -26 30 -179 39 -248 14 -97 21 -248 21 -460 0 -301 -10
+-424 -51 -655 -38 -207 -111 -462 -169 -585 -7 -17 -22 -50 -33 -75 -35 -82
+-123 -234 -192 -330 -212 -299 -525 -532 -864 -645 -59 -20 -117 -38 -127 -41
+-11 -2 -29 -6 -41 -9 -55 -13 -200 -35 -274 -43 -124 -12 -394 -6 -490 12 -11
+2 -39 7 -64 11 -77 11 -267 64 -346 95 -418 167 -765 493 -959 904 -57 121
+-77 169 -104 246 -13 36 -27 74 -31 85 -5 11 -11 31 -14 45 -4 14 -17 68 -31
+120 -31 122 -56 251 -70 369 -4 30 -8 63 -11 74 -22 118 -22 724 0 844 2 10 7
+41 10 68 4 28 8 61 11 75 2 14 7 42 10 63 11 77 37 194 70 308 189 656 572
+1113 1115 1329 55 22 198 67 235 74 85 17 211 38 265 44 73 9 378 7 455 -2z"/>
+<path d="M3374 4235 c-359 -78 -614 -404 -599 -765 17 -423 363 -742 785 -725
+120 5 192 24 305 80 206 101 341 275 400 515 18 72 13 276 -8 351 -73 260
+-280 465 -537 535 -83 22 -263 27 -346 9z"/>
+</g>
+</svg>

web/themes/custom/materiotheme/materiotheme.theme

@@ -90,6 +90,76 @@ function materiotheme_preprocess_html(&$vars) {
   //   ],
   // ];
   // $vars['page']['#attached']['html_head'][] = [$gv, "google-site-verification"];
+
+
+  // <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  $ati = array(
+    '#tag' => 'meta',
+    '#attributes' => array(
+      'rel' => 'apple-touch-icon',
+      'sizes' => "180x180",
+      'href' => '/apple-touch-icon.png',
+    ),
+  );
+  $vars['page']['#attached']['html_head'][] = [$ati, 'ati'];
+
+  // <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  $icon32 = array(
+    '#tag' => 'meta',
+    '#attributes' => array(
+      'rel' => 'icon',
+      'type' => "image/png",
+      'sizes' => "32x32",
+      'href' => '/favicon-32x32.png',
+    ),
+  );
+  $vars['page']['#attached']['html_head'][] = [$icon32, 'icon32'];
+
+  // <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  $icon16 = array(
+    '#tag' => 'meta',
+    '#attributes' => array(
+      'rel' => 'icon',
+      'type' => "image/png",
+      'sizes' => "16x16",
+      'href' => '/favicon-16x16.png',
+    ),
+  );
+  $vars['page']['#attached']['html_head'][] = [$icon16, 'icon16'];
+
+  // <link rel="manifest" href="/site.webmanifest">
+
+  // <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+  $safaripinnedtab = array(
+    '#tag' => 'meta',
+    '#attributes' => array(
+      'rel' => 'mask-icon',
+      'color' => "#69ccce",
+      'href' => '/safari-pinned-tab.svg',
+    ),
+  );
+  $vars['page']['#attached']['html_head'][] = [$safaripinnedtab, '$safaripinnedtab'];
+
+  // <meta name="msapplication-TileColor" content="#da532c">
+  $ms = array(
+    '#tag' => 'meta',
+    '#attributes' => array(
+      'name' => 'msapplication-TileColor',
+      'content' => "#69ccce"
+    ),
+  );
+  $vars['page']['#attached']['html_head'][] = [$ms, '$ms'];
+
+  // <meta name="theme-color" content="#ffffff">
+  $tc = array(
+    '#tag' => 'meta',
+    '#attributes' => array(
+      'name' => 'theme-color',
+      'content' => "#69ccce"
+    ),
+  );
+  $vars['page']['#attached']['html_head'][] = [$tc, '$tc'];
+
 }
 
 function materiotheme_preprocess_page(&$vars){