From b03f1f71b7bfc1b3e76bd349ba88862509c63bc6 Mon Sep 17 00:00:00 2001
From: Rafid Muhymin Wafi <rafidmuhymin@gmail.com>
Date: Mon, 16 Aug 2021 17:28:38 -0400
Subject: Adding favicon to examples (#1084)

---
 examples/blog-multiple-authors/public/favicon.ico       | Bin 0 -> 15406 bytes
 .../blog-multiple-authors/src/components/MainHead.astro |   4 ++++
 examples/blog/public/favicon.ico                        | Bin 0 -> 15406 bytes
 examples/blog/src/components/BaseHead.astro             |   1 +
 examples/docs/public/favicon.ico                        | Bin 0 -> 15406 bytes
 examples/docs/src/layouts/Main.astro                    |   8 +++-----
 examples/framework-lit/public/favicon.ico               | Bin 0 -> 15406 bytes
 examples/framework-lit/src/pages/index.astro            |   3 +++
 examples/framework-multiple/public/favicon.ico          | Bin 0 -> 15406 bytes
 examples/framework-multiple/public/favicon.svg          |  11 +++++++++++
 examples/framework-multiple/src/pages/index.astro       |   4 ++++
 examples/framework-preact/public/favicon.ico            | Bin 0 -> 15406 bytes
 examples/framework-preact/public/favicon.svg            |  11 +++++++++++
 examples/framework-preact/src/pages/index.astro         |   4 ++++
 examples/framework-react/public/favicon.ico             | Bin 0 -> 15406 bytes
 examples/framework-react/public/favicon.svg             |  11 +++++++++++
 examples/framework-react/src/pages/index.astro          |   4 ++++
 examples/framework-solid/public/favicon.ico             | Bin 0 -> 15406 bytes
 examples/framework-solid/public/favicon.svg             |  11 +++++++++++
 examples/framework-solid/src/pages/index.astro          |   4 ++++
 examples/framework-svelte/public/favicon.ico            | Bin 0 -> 15406 bytes
 examples/framework-svelte/public/favicon.svg            |  11 +++++++++++
 examples/framework-svelte/src/pages/index.astro         |   4 ++++
 examples/framework-vue/public/favicon.ico               | Bin 0 -> 15406 bytes
 examples/framework-vue/public/favicon.svg               |  11 +++++++++++
 examples/framework-vue/src/pages/index.astro            |   4 ++++
 examples/portfolio/public/favicon.ico                   | Bin 0 -> 15406 bytes
 examples/portfolio/public/favicon.svg                   |  11 +++++++++++
 examples/portfolio/src/components/MainHead.astro        |   4 ++++
 examples/snowpack/src/pages/tutorials/react.md          |   2 +-
 examples/snowpack/src/pages/tutorials/svelte.md         |   2 +-
 examples/starter/public/favicon.ico                     | Bin 0 -> 15406 bytes
 examples/starter/src/pages/index.astro                  |   5 ++++-
 examples/with-markdown-plugins/public/favicon.ico       | Bin 0 -> 15406 bytes
 examples/with-markdown-plugins/src/layouts/main.astro   |   4 ++++
 examples/with-markdown/public/favicon.ico               | Bin 0 -> 15406 bytes
 examples/with-markdown/public/favicon.svg               |  11 +++++++++++
 examples/with-markdown/src/layouts/main.astro           |   4 ++++
 examples/with-nanostores/public/favicon.ico             | Bin 0 -> 15406 bytes
 examples/with-nanostores/src/pages/index.astro          |   3 ++-
 examples/with-tailwindcss/public/favicon.ico            | Bin 0 -> 15406 bytes
 examples/with-tailwindcss/public/favicon.svg            |  11 +++++++++++
 examples/with-tailwindcss/src/pages/index.astro         |   4 ++++
 43 files changed, 158 insertions(+), 9 deletions(-)
 create mode 100644 examples/blog-multiple-authors/public/favicon.ico
 create mode 100644 examples/blog/public/favicon.ico
 create mode 100644 examples/docs/public/favicon.ico
 create mode 100644 examples/framework-lit/public/favicon.ico
 create mode 100644 examples/framework-multiple/public/favicon.ico
 create mode 100644 examples/framework-multiple/public/favicon.svg
 create mode 100644 examples/framework-preact/public/favicon.ico
 create mode 100644 examples/framework-preact/public/favicon.svg
 create mode 100644 examples/framework-react/public/favicon.ico
 create mode 100644 examples/framework-react/public/favicon.svg
 create mode 100644 examples/framework-solid/public/favicon.ico
 create mode 100644 examples/framework-solid/public/favicon.svg
 create mode 100644 examples/framework-svelte/public/favicon.ico
 create mode 100644 examples/framework-svelte/public/favicon.svg
 create mode 100644 examples/framework-vue/public/favicon.ico
 create mode 100644 examples/framework-vue/public/favicon.svg
 create mode 100644 examples/portfolio/public/favicon.ico
 create mode 100644 examples/portfolio/public/favicon.svg
 create mode 100644 examples/starter/public/favicon.ico
 create mode 100644 examples/with-markdown-plugins/public/favicon.ico
 create mode 100644 examples/with-markdown/public/favicon.ico
 create mode 100644 examples/with-markdown/public/favicon.svg
 create mode 100644 examples/with-nanostores/public/favicon.ico
 create mode 100644 examples/with-tailwindcss/public/favicon.ico
 create mode 100644 examples/with-tailwindcss/public/favicon.svg

diff --git a/examples/blog-multiple-authors/public/favicon.ico b/examples/blog-multiple-authors/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/blog-multiple-authors/public/favicon.ico differ
diff --git a/examples/blog-multiple-authors/src/components/MainHead.astro b/examples/blog-multiple-authors/src/components/MainHead.astro
index fbdaa2965..5ad9256e8 100644
--- a/examples/blog-multiple-authors/src/components/MainHead.astro
+++ b/examples/blog-multiple-authors/src/components/MainHead.astro
@@ -24,6 +24,10 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop
 <!-- RSS -->
 <link rel="alternate" type="application/rss+xml" href="/feed/posts.xml">
 
+<!-- Favicon -->
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
 <!-- SEO -->
 <link rel="canonical" href={canonicalURL}>
 {next && <link rel="next" aria-label="Previous Page" href={new URL(next, canonicalURL).href}>}
diff --git a/examples/blog/public/favicon.ico b/examples/blog/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/blog/public/favicon.ico differ
diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro
index b060d78ed..90d338745 100644
--- a/examples/blog/src/components/BaseHead.astro
+++ b/examples/blog/src/components/BaseHead.astro
@@ -11,6 +11,7 @@ const { title, description, permalink } = Astro.props;
 <meta name="viewport" content="width=device-width" />
 
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
 
 <!-- Primary Meta Tags -->
 <title>{title}</title>
diff --git a/examples/docs/public/favicon.ico b/examples/docs/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/docs/public/favicon.ico differ
diff --git a/examples/docs/src/layouts/Main.astro b/examples/docs/src/layouts/Main.astro
index a00552b36..837b53048 100644
--- a/examples/docs/src/layouts/Main.astro
+++ b/examples/docs/src/layouts/Main.astro
@@ -23,12 +23,10 @@ const githubEditUrl = `https://github.com/USER/REPO/blob/main/${currentFile}`
     <title>{content.title}</title>
     
     <link rel="stylesheet" href="/index.css" />
-    <link rel="stylesheet" href="/theme.css" />
-    <link rel="stylesheet" href="/code.css" />
     <script src="/theme.js" />
-    <link rel="icon" 
-          type="image/svg+xml" 
-          href="/favicon.svg">
+    
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
 
     <style>
       body {
diff --git a/examples/framework-lit/public/favicon.ico b/examples/framework-lit/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/framework-lit/public/favicon.ico differ
diff --git a/examples/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro
index 3fc3ef029..7f81d48e3 100644
--- a/examples/framework-lit/src/pages/index.astro
+++ b/examples/framework-lit/src/pages/index.astro
@@ -7,6 +7,9 @@ import '../components/Counter.js';
 <!doctype html>
 <html lang="en">
 <head>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+    
     <title>Demo</title>
 </head>
 <body>
diff --git a/examples/framework-multiple/public/favicon.ico b/examples/framework-multiple/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/framework-multiple/public/favicon.ico differ
diff --git a/examples/framework-multiple/public/favicon.svg b/examples/framework-multiple/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/framework-multiple/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro
index 1319941cb..12b744ba7 100644
--- a/examples/framework-multiple/src/pages/index.astro
+++ b/examples/framework-multiple/src/pages/index.astro
@@ -15,6 +15,10 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
     <style>
         :global(:root) {
             font-family: system-ui;
diff --git a/examples/framework-preact/public/favicon.ico b/examples/framework-preact/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/framework-preact/public/favicon.ico differ
diff --git a/examples/framework-preact/public/favicon.svg b/examples/framework-preact/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/framework-preact/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro
index cde3929b9..27ecae54d 100644
--- a/examples/framework-preact/src/pages/index.astro
+++ b/examples/framework-preact/src/pages/index.astro
@@ -13,6 +13,10 @@ import Counter from '../components/Counter.jsx'
       name="viewport"
       content="width=device-width"
     />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
     <style>
       :global(:root) {
         font-family: system-ui;
diff --git a/examples/framework-react/public/favicon.ico b/examples/framework-react/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/framework-react/public/favicon.ico differ
diff --git a/examples/framework-react/public/favicon.svg b/examples/framework-react/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/framework-react/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/framework-react/src/pages/index.astro b/examples/framework-react/src/pages/index.astro
index a074348aa..666cf6819 100644
--- a/examples/framework-react/src/pages/index.astro
+++ b/examples/framework-react/src/pages/index.astro
@@ -15,6 +15,10 @@ const someProps = {
       name="viewport"
       content="width=device-width"
     />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
     <style>
       :global(:root) {
         font-family: system-ui;
diff --git a/examples/framework-solid/public/favicon.ico b/examples/framework-solid/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/framework-solid/public/favicon.ico differ
diff --git a/examples/framework-solid/public/favicon.svg b/examples/framework-solid/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/framework-solid/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/framework-solid/src/pages/index.astro b/examples/framework-solid/src/pages/index.astro
index 591b641e9..c50f5ace7 100644
--- a/examples/framework-solid/src/pages/index.astro
+++ b/examples/framework-solid/src/pages/index.astro
@@ -9,6 +9,10 @@ import Counter from '../components/Counter.tsx';
       name="viewport"
       content="width=device-width"
     />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
     <style>
       :global(:root) {
         font-family: system-ui;
diff --git a/examples/framework-svelte/public/favicon.ico b/examples/framework-svelte/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/framework-svelte/public/favicon.ico differ
diff --git a/examples/framework-svelte/public/favicon.svg b/examples/framework-svelte/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/framework-svelte/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/framework-svelte/src/pages/index.astro b/examples/framework-svelte/src/pages/index.astro
index b71ce9bc0..6d0529786 100644
--- a/examples/framework-svelte/src/pages/index.astro
+++ b/examples/framework-svelte/src/pages/index.astro
@@ -13,6 +13,10 @@ import Counter from '../components/Counter.svelte'
       name="viewport"
       content="width=device-width"
     />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
     <style>
       :global(:root) {
         font-family: system-ui;
diff --git a/examples/framework-vue/public/favicon.ico b/examples/framework-vue/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/framework-vue/public/favicon.ico differ
diff --git a/examples/framework-vue/public/favicon.svg b/examples/framework-vue/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/framework-vue/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/framework-vue/src/pages/index.astro b/examples/framework-vue/src/pages/index.astro
index 5d7005f52..6b854d94d 100644
--- a/examples/framework-vue/src/pages/index.astro
+++ b/examples/framework-vue/src/pages/index.astro
@@ -13,6 +13,10 @@ import Counter from '../components/Counter.vue'
       name="viewport"
       content="width=device-width"
     />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
     <style>
       :global(:root) {
         font-family: system-ui;
diff --git a/examples/portfolio/public/favicon.ico b/examples/portfolio/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/portfolio/public/favicon.ico differ
diff --git a/examples/portfolio/public/favicon.svg b/examples/portfolio/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/portfolio/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro
index 181da7d28..275a9b692 100644
--- a/examples/portfolio/src/components/MainHead.astro
+++ b/examples/portfolio/src/components/MainHead.astro
@@ -4,6 +4,10 @@ const { title = 'Jeanine White: Personal Site' } = Astro.props;
 
 <meta charset="UTF-8">
 <title>{title}</title>
+
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
 <link rel="stylesheet" type="text/css" href="/global.css">
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">
diff --git a/examples/snowpack/src/pages/tutorials/react.md b/examples/snowpack/src/pages/tutorials/react.md
index eced71003..0b9f38701 100644
--- a/examples/snowpack/src/pages/tutorials/react.md
+++ b/examples/snowpack/src/pages/tutorials/react.md
@@ -118,7 +118,7 @@ The `mount` configuration changes where Snowpack looks for and builds files. Eve
 ```diff
   mount: {
 -   /* ... */
-+   // directory name: 'build directory',
++   // directory name: 'build directory'
 +   public: '/',
 +   src: '/dist',
   },
diff --git a/examples/snowpack/src/pages/tutorials/svelte.md b/examples/snowpack/src/pages/tutorials/svelte.md
index 36a46e1e9..dd6ae73f0 100644
--- a/examples/snowpack/src/pages/tutorials/svelte.md
+++ b/examples/snowpack/src/pages/tutorials/svelte.md
@@ -172,7 +172,7 @@ The `mount` configuration changes where Snowpack scan for and builds files. Head
 
   mount: {
 -   /* ... */
-+   // directory name: 'build directory',
++   // directory name: 'build directory'
 +   public: '/',
 +   src: '/dist',
   },
diff --git a/examples/starter/public/favicon.ico b/examples/starter/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/starter/public/favicon.ico differ
diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro
index 3030ff096..1d7db0fa3 100644
--- a/examples/starter/src/pages/index.astro
+++ b/examples/starter/src/pages/index.astro
@@ -18,7 +18,10 @@ let title = 'My Astro Site';
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width">
     <title>{title}</title>
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+    
     <link rel="stylesheet" href="/style/global.css">
     <link rel="stylesheet" href="/style/home.css">
 
diff --git a/examples/with-markdown-plugins/public/favicon.ico b/examples/with-markdown-plugins/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/with-markdown-plugins/public/favicon.ico differ
diff --git a/examples/with-markdown-plugins/src/layouts/main.astro b/examples/with-markdown-plugins/src/layouts/main.astro
index a55693970..410ab1037 100644
--- a/examples/with-markdown-plugins/src/layouts/main.astro
+++ b/examples/with-markdown-plugins/src/layouts/main.astro
@@ -5,6 +5,10 @@ const { content } = Astro.props;
 <html lang={ content.lang || 'en' }>
   <head>
     <meta charset="utf-8" />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
     <title>{content.title}</title>
     <link rel="stylesheet" href="/global.css" />
     <style>
diff --git a/examples/with-markdown/public/favicon.ico b/examples/with-markdown/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/with-markdown/public/favicon.ico differ
diff --git a/examples/with-markdown/public/favicon.svg b/examples/with-markdown/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/with-markdown/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro
index b413aa826..ed53cadb8 100644
--- a/examples/with-markdown/src/layouts/main.astro
+++ b/examples/with-markdown/src/layouts/main.astro
@@ -5,6 +5,10 @@ const { content } = Astro.props;
 <html lang={ content.lang || 'en' }>
   <head>
     <meta charset="utf-8">
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
     <title>{content.title}</title>
     <link rel="stylesheet" href="/styles/global.css">
   </head>
diff --git a/examples/with-nanostores/public/favicon.ico b/examples/with-nanostores/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/with-nanostores/public/favicon.ico differ
diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro
index b4d99028c..51c6bb6a1 100644
--- a/examples/with-nanostores/src/pages/index.astro
+++ b/examples/with-nanostores/src/pages/index.astro
@@ -14,7 +14,8 @@ import AdminsPreact from '../components/AdminsPreact.jsx';
     <meta name="viewport" content="width=device-width">
     <title>Astro</title>
 
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
 
     <link rel="stylesheet" href="/style/global.css">
     <link rel="stylesheet" href="/style/home.css">
diff --git a/examples/with-tailwindcss/public/favicon.ico b/examples/with-tailwindcss/public/favicon.ico
new file mode 100644
index 000000000..6f864efe3
Binary files /dev/null and b/examples/with-tailwindcss/public/favicon.ico differ
diff --git a/examples/with-tailwindcss/public/favicon.svg b/examples/with-tailwindcss/public/favicon.svg
new file mode 100644
index 000000000..542f90aec
--- /dev/null
+++ b/examples/with-tailwindcss/public/favicon.svg
@@ -0,0 +1,11 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        #flame { fill: #FF5D01; }
+        #a { fill: #000014; }
+        @media (prefers-color-scheme: dark) {
+            #a { fill: #fff; }
+        }
+    </style>
+    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" />
+    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+</svg>
diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro
index d70b3457b..e073e8527 100644
--- a/examples/with-tailwindcss/src/pages/index.astro
+++ b/examples/with-tailwindcss/src/pages/index.astro
@@ -8,6 +8,10 @@ import Button from '../components/Button.astro';
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
+
     <title>Astro + TailwindCSS</title>
     <link rel="stylesheet" type="text/css" href="/global.css">
   </head>
-- 
cgit v1.2.3