SVG Favicon (#84)

* init

* fixes corner widget

* use svg as mask icon for safari

* use gui skull

* remove mask favicon from safari

* adds favicon to challenges

* updates shortstack projects to copy favicons to dist

* add favicon build action and update readme

Author: argyleink

.github/workflows/main.yml

@@ -55,6 +55,9 @@ jobs:
 
     - name: Build Theme Switch
       run: cd theme-switch && npm install && npm run build
+
+    - name: Build SVG Favicon
+      run: cd svg-favicon && npm install && npm run build
 
     - name: Deploy to Firebase
       uses: w9jds/firebase-action@master

README.md

@@ -63,4 +63,8 @@ and expand the diversity of our skills.**
 14. Theme Switch
   [`Demo`](https://gui-challenges.web.app/theme-switch/dist/) 
   [`YouTube`](https://www.youtube.com/watch?v=kZiS1QStIWc) 
-  [`Article`](https://web.dev/building-a-theme-switch-component/) 
+  [`Article`](https://web.dev/building-a-theme-switch-component/)  
+14. SVG Favicon
+  [`Demo`](https://gui-challenges.web.app/svg-favicon/dist/) 
+  [`YouTube`](#)(coming soon) 
+  [`Article`](https://web.dev/building-an-adaptive-favicon/)(coming soon) 

breadcrumbs/favicon.ico

@@ -9,6 +9,8 @@
     <meta name="theme-color" content="deeppink" media="(prefers-color-scheme: light)">
     <meta name="theme-color" content="Canvas" media="(prefers-color-scheme: dark)">
     <meta name="description" content="🙂">
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
     <meta name="color-scheme" content="dark light">
     <link rel="stylesheet" href="/style.css">
     <script type="module" src="/index.js"></script>

breadcrumbs/favicon.svg

@@ -9,6 +9,9 @@
     <meta name="theme-color" content="#ff69b4">
     <meta name="description" content="💀🤘">
 
+    <link rel="icon" href="favicon.ico" sizes="any">
+    <link rel="icon" href="favicon.svg" type="image/svg+xml">
+
     <link rel="preload" href="//unpkg.com/[email protected]/themes/prism-atom-dark.css" as="style" onload="this.rel='stylesheet'">
     <link rel="stylesheet" href="bundle.css">
     <script src="bundle.js" type="module" defer></script>

breadcrumbs/index.html

@@ -15,7 +15,7 @@
     "prod:server": "browser-sync dist --no-open --no-notify --no-ghost-mode",
     "build:pre:js": "rollup -c --environment NODE_ENV:production",
     "build:pre:css": "postcss app/css/index.css -o dist/bundle.css --env production",
-    "build:post:copy": "cp app/index.html dist/index.html",
+    "build:post:copy": "cp app/{index.html,favicon.ico,favicon.svg} dist/",
     "build": "rm -rf dist && concurrently npm:build:pre:* && concurrently npm:build:post:*",
     "start": "concurrently --kill-others npm:dev:*",
     "production": "npm run build && npm run prod:server"

centering/app/favicon.ico

@@ -9,6 +9,9 @@
     <meta name="theme-color" content="#222">
     <meta name="description" content="🙂">
 
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+
     <link rel="stylesheet" href="/style.css">
     <script type="module" src="/index.js"></script>
   </head>

centering/app/favicon.svg

@@ -9,6 +9,8 @@
     <meta name="theme-color" content="hsl(221 90% 98%)" media="(prefers-color-scheme: light)">
     <meta name="theme-color" content="Canvas" media="(prefers-color-scheme: dark)">
     <meta name="description" content="🙂">
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="/style.css">
     <script type="module" src="/index.js"></script>
   </head>

centering/app/index.html

@@ -10,6 +10,9 @@
     <meta name="description" content="🙂">
     <meta name="color-scheme" content="dark light">
 
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+
     <link rel="stylesheet" href="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/blokk/blokk.css">
     <link rel="stylesheet" href="/style.css">
     <script type="module" src="/index.js"></script>

centering/package.json

@@ -9,6 +9,8 @@
     <meta name="theme-color" content="hsl(221 90% 98%)" media="(prefers-color-scheme: light)">
     <meta name="theme-color" content="Canvas" media="(prefers-color-scheme: dark)">
     <meta name="description" content="🙂">
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="https://storage.googleapis.com/atoms-sandbox.google.com.a.appspot.com/blokk/blokk.css">
     <link rel="stylesheet" href="/style.css">
     <script type="module" src="/index.js"></script>