added favicon, although should redo to add it as a pure svg, although purple to dark for browser tabs. Maybe lighter purple for dark mode?

.eleventy.js

@@ -11,6 +11,10 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPassthroughCopy({
         "./projects/FrontendMentor": "FrontendMentor",
     });
+    eleventyConfig.addPassthroughCopy({
+        "./src/assets/faviconstuff": "/",
+    });
+
     //eleventyConfig.addPassthroughCopy({
     //    "./src/assets/images": "img",
     //});

.gitignore

@@ -30,6 +30,21 @@ src/_includes/css
 # my chosen output directory.
 www
 
+#### From FrontEnd Mentor gitignore. Just to avoid accidentally uploading design files
+#
+# Avoid accidental upload of the Sketch and Figma design files
+#####################################################
+## Please do not remove lines 5 and 6 - thanks! 🙂 ##
+#####################################################
+*.sketch
+*.fig
+
+# Avoid accidental XD upload if you convert the design file
+###############################################
+## Please do not remove line 12 - thanks! 🙂 ##
+###############################################
+*.xd
+.prettierignore
 
 # ---> macOS
 # General

src/assets/faviconstuff/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>

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

@@ -0,0 +1,40 @@
+<?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="798.000000pt" height="798.000000pt" viewBox="0 0 798.000000 798.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,798.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4008 5944 c-2 -1 -34 -5 -72 -9 -38 -3 -72 -8 -75 -9 -6 -4 -103
+-17 -128 -19 -7 0 -13 -3 -13 -6 0 -3 -10 -6 -22 -7 -24 -1 -82 -11 -110 -20
+-17 -5 -47 -12 -88 -20 -14 -3 -34 -8 -45 -11 -11 -4 -24 -8 -30 -9 -5 -1 -39
+-9 -75 -19 -36 -9 -74 -18 -85 -20 -11 -1 -27 -5 -35 -8 -8 -3 -28 -9 -45 -13
+-16 -4 -32 -8 -35 -9 -3 -1 -25 -5 -50 -10 -25 -5 -47 -9 -50 -10 -112 -23
+-142 -26 -202 -18 -94 13 -240 7 -306 -13 -74 -21 -152 -77 -195 -139 -57 -83
+-124 -274 -142 -405 -2 -14 -4 -25 -5 -25 -1 0 -3 -11 -6 -25 -2 -14 -8 -47
+-14 -75 -13 -70 -39 -276 -56 -447 -3 -31 -7 -69 -9 -85 -2 -15 -4 -31 -4 -35
+-1 -7 -66 -44 -83 -47 -8 -2 -39 -15 -121 -50 -26 -11 -50 -20 -54 -20 -3 0
+-9 -3 -12 -8 -3 -4 -32 -21 -65 -37 -111 -56 -294 -175 -304 -198 -2 -5 -8 -8
+-13 -8 -11 0 -147 -136 -174 -175 -11 -16 -25 -33 -31 -40 -25 -25 -94 -184
+-107 -245 -38 -180 11 -375 144 -573 57 -84 255 -278 359 -352 47 -33 91 -65
+98 -72 7 -7 19 -13 27 -13 7 0 15 -4 17 -8 10 -27 333 -193 518 -266 25 -10
+54 -22 65 -27 40 -18 289 -100 345 -114 8 -2 60 -16 115 -30 120 -32 108 -30
+170 -40 28 -5 52 -10 55 -10 42 -11 61 -15 94 -20 21 -3 49 -8 62 -11 13 -3
+36 -7 51 -9 15 -2 44 -6 63 -8 19 -3 60 -8 90 -11 30 -3 75 -9 100 -11 205
+-24 824 -24 980 0 14 2 57 7 95 10 84 9 106 11 165 20 25 3 61 8 80 10 19 2
+44 6 55 8 18 4 57 11 135 23 14 3 48 9 75 14 28 6 59 12 70 14 11 2 79 18 150
+36 72 17 137 33 145 35 33 8 218 65 260 80 25 9 52 18 60 20 66 15 390 162
+495 225 28 16 57 33 65 37 34 15 199 143 250 194 68 67 120 128 120 140 0 5 4
+9 10 9 5 0 9 3 8 8 -1 4 6 20 16 35 34 51 68 160 73 239 14 193 -72 374 -269
+563 -119 115 -234 205 -350 275 -32 19 -238 124 -248 126 -3 0 -18 6 -35 13
+-54 23 -105 40 -105 35 0 -2 -13 2 -29 10 -15 8 -39 17 -52 20 -91 18 -85 13
+-109 89 -13 40 -27 77 -30 82 -4 6 -10 24 -14 40 -4 17 -13 44 -21 60 -7 17
+-28 68 -46 115 -107 277 -279 598 -409 764 -77 97 -198 223 -278 287 -58 47
+-275 169 -299 169 -5 0 -29 7 -54 15 -25 9 -55 18 -67 20 -12 3 -30 7 -39 9
+-67 15 -354 31 -365 20z"/>
+</g>
+</svg>

src/assets/faviconstuff/site.webmanifest

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

src/index.html

@@ -7,6 +7,14 @@
     <title>Practice Projects</title>
     <link rel="stylesheet" href="./FrontendMentor/reset.css" />
     <link rel="stylesheet" href="./css/style.css" />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
+    <link rel="manifest" href="./site.webmanifest">
+    <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#845bd5">
+    <meta name="msapplication-TileColor" content="#845bd5">
+    <meta name="theme-color" content="#ffffff">
 </head>
 
 <body>
@@ -355,7 +363,7 @@
             <p>
                 Intended for just little snippets of code that look useful
             </p>
-            <a href="./playground.html">The Playground</a>
+            <a href="./playground">The Playground</a>
         </div>
     </main>
     <footer>