add favicon

src/assets/favicon/browserconfig.xml

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

src/assets/favicon/favicon.svg

@@ -0,0 +1,20 @@
+<svg width="660" height="662" viewBox="0 0 660 662" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+      .bg {
+        fill: #453959;
+      }
+      .play {
+          fill: #fff;
+      }
+      @media (prefers-color-scheme: dark) {
+        .bg {
+          fill: #fff;
+        }
+        .play {
+            fill: #453959;
+        }
+      }
+    </style>
+  <path class="bg" fill="#453959" d="M660 .25V504L0 660.25V157.501L660 .251z" />
+  <path class="play" fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M454.851 330.657a1.001 1.001 0 010 1.686l-178.107 113.79a1 1 0 01-1.539-.842V217.709a1 1 0 011.539-.842l178.107 113.79z"/>
+</svg>

src/assets/favicon/manifest.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Eldritch Radio",
+    "short_name": "Eldritch Radio",
+    "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": "#635776",
+    "background_color": "#635776",
+    "display": "standalone"
+}

src/assets/favicon/safari-pinned-tab.svg

@@ -0,0 +1,51 @@
+<?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="662.000000pt" height="662.000000pt" viewBox="0 0 662.000000 662.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,662.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M6550 6604 c-30 -8 -67 -16 -82 -19 -15 -3 -38 -9 -52 -15 -15 -5
+-26 -7 -26 -5 0 2 -12 0 -26 -5 -14 -6 -40 -12 -57 -15 -18 -2 -86 -18 -152
+-34 -190 -47 -367 -89 -404 -96 -19 -3 -43 -11 -55 -17 -11 -6 -22 -10 -24 -9
+-3 3 -45 -6 -207 -45 -77 -18 -151 -35 -165 -38 -14 -2 -25 -5 -25 -6 0 -1 -9
+-3 -21 -5 -21 -5 -340 -80 -384 -92 -14 -3 -33 -8 -44 -10 -10 -2 -64 -15
+-120 -29 -55 -14 -112 -28 -126 -31 -13 -2 -63 -13 -110 -24 -47 -12 -96 -23
+-109 -25 -14 -3 -29 -7 -33 -10 -5 -3 -24 -8 -41 -11 -18 -2 -54 -11 -82 -18
+-27 -8 -61 -16 -75 -19 -14 -2 -83 -18 -155 -36 -154 -38 -162 -40 -197 -45
+-15 -2 -31 -6 -36 -9 -5 -3 -19 -7 -33 -10 -13 -2 -44 -9 -69 -15 -44 -11 -62
+-16 -107 -26 -50 -11 -60 -14 -123 -30 -36 -9 -76 -19 -90 -21 -14 -2 -41 -8
+-60 -14 -19 -5 -84 -22 -145 -36 -60 -14 -119 -28 -130 -31 -11 -2 -29 -6 -40
+-8 -11 -1 -49 -11 -85 -20 -36 -9 -72 -18 -80 -20 -8 -2 -62 -15 -120 -28 -58
+-14 -130 -31 -160 -37 -30 -7 -62 -15 -70 -18 -8 -3 -24 -7 -35 -9 -11 -2 -37
+-8 -58 -14 -21 -5 -50 -12 -65 -14 -15 -2 -67 -15 -117 -28 -49 -13 -93 -24
+-98 -25 -23 -5 -75 -17 -290 -68 -44 -10 -55 -13 -97 -23 -25 -7 -56 -14 -70
+-17 -14 -2 -33 -7 -42 -10 -9 -3 -25 -6 -35 -8 -10 -2 -38 -9 -63 -16 -25 -7
+-54 -14 -65 -16 -11 -1 -60 -12 -110 -24 -49 -12 -97 -24 -105 -26 -8 -2 -44
+-11 -80 -20 -36 -9 -78 -18 -93 -20 -16 -2 -33 -6 -38 -10 -5 -3 -22 -8 -37
+-10 -15 -3 -52 -11 -82 -19 -30 -8 -66 -16 -80 -18 -14 -3 -45 -10 -70 -17
+-25 -7 -56 -14 -69 -17 -14 -2 -28 -6 -31 -8 -4 -2 -22 -7 -41 -10 -19 -3 -61
+-13 -94 -22 -33 -8 -69 -17 -80 -19 -11 -2 -29 -6 -40 -9 -11 -2 -58 -14 -105
+-25 -47 -11 -96 -23 -110 -26 -14 -3 -29 -7 -35 -8 -5 -2 -27 -6 -47 -11 l-38
+-7 0 -2514 c0 -1383 2 -2514 5 -2514 3 0 92 21 198 46 105 25 203 48 217 50
+14 3 32 7 40 11 8 3 24 7 35 9 11 1 88 19 170 39 83 20 177 42 210 50 33 8
+107 25 165 39 161 39 323 77 343 81 10 2 26 6 35 9 9 3 28 7 42 10 14 2 57 12
+95 21 79 19 76 18 165 40 36 9 74 18 85 21 18 3 72 16 85 19 3 1 23 5 45 10
+22 5 42 10 45 10 3 1 16 5 30 8 66 17 238 58 265 63 17 3 48 10 70 16 47 13
+61 17 95 23 14 2 61 13 104 25 44 11 90 22 103 24 12 3 26 7 30 9 5 3 25 8 46
+11 41 6 202 44 227 53 8 3 25 7 37 9 12 1 60 12 106 24 47 11 94 23 106 25 11
+3 30 7 41 10 49 12 67 16 90 21 14 3 33 7 42 10 23 7 59 15 83 19 11 2 20 4
+20 5 0 1 8 3 17 5 9 2 47 11 84 20 69 17 87 21 138 31 16 2 33 7 38 10 5 3 19
+8 31 10 35 5 105 21 197 44 103 25 118 29 150 35 14 2 61 14 105 26 44 11 91
+22 105 24 14 2 26 4 28 6 1 1 5 2 10 3 38 9 164 39 192 46 19 6 105 26 190 46
+85 20 200 46 255 59 55 13 143 33 195 45 52 12 102 24 110 27 8 4 18 6 21 5 4
+-1 22 3 40 9 19 6 45 12 59 15 14 3 90 21 170 40 80 20 154 37 165 40 11 2 29
+6 40 8 11 2 76 18 145 34 69 17 177 43 240 57 63 15 133 32 155 38 46 12 50
+13 90 20 17 3 53 12 82 20 28 8 54 12 57 10 3 -3 8 0 11 8 3 8 4 1144 3 2525
+l-3 2511 -55 -13z"/>
+</g>
+</svg>

src/index.html

@@ -6,6 +6,15 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Eldritch Radio</title>
     <link rel="stylesheet" href="/assets/scss/style.scss">
+
+    <link rel="icon" href="/assets/favicon/favicon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/assets/favicon/manifest.webmanifest">
+    <link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#635776">
+    <meta name="msapplication-TileColor" content="#635776">
+    <meta name="theme-color" content="#635776">
 </head>
 <body>
     <script src="main.js"></script>