Add favicon files (#33)

src/app.html

@@ -26,7 +26,12 @@
     />
     <meta name="twitter:image" content="TODO" />
     <meta name="twitter:image:alt" content="WebNative Template" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
+
+    <!-- See https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs for description. -->
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.webmanifest" />
 
     %sveltekit.head%
   </head>

static/icon.svg

@@ -0,0 +1,11 @@
+<svg width="119" height="119" viewBox="0 0 119 119" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_102_3)">
+<rect width="119" height="119" fill="#202124"/>
+<path d="M6.936 92.384L14.232 24.224C17.24 24.096 20.056 23.808 22.68 23.36C25.368 22.848 28.024 22.496 30.648 22.304C30.648 22.368 30.552 23.04 30.36 24.32C30.168 25.536 29.912 27.168 29.592 29.216C29.272 31.2 28.92 33.472 28.536 36.032C28.152 38.528 27.576 41.984 26.808 46.4C26.104 50.816 25.144 56.928 23.928 64.736H25.368C27.032 58.848 28.408 54.048 29.496 50.336C30.584 46.56 31.448 43.52 32.088 41.216C32.792 38.848 33.432 36.576 34.008 34.4C34.648 32.224 35.224 30.208 35.736 28.352C36.312 26.496 36.76 24.928 37.08 23.648H37.944C39.096 23.648 40.248 23.584 41.4 23.456C42.616 23.328 43.736 23.2 44.76 23.072C45.848 22.88 46.968 22.656 48.12 22.4C47.992 22.976 47.832 24.16 47.64 25.952C47.512 27.744 47.32 29.92 47.064 32.48C46.808 34.976 46.552 37.76 46.296 40.832C46.04 43.84 45.784 46.816 45.528 49.76C45.272 52.64 45.016 55.392 44.76 58.016C44.568 60.64 44.376 62.88 44.184 64.736H45.912L55.032 23.456C57.208 23.136 59.352 22.848 61.464 22.592C63.32 22.336 65.24 22.08 67.224 21.824C69.208 21.568 70.968 21.28 72.504 20.96C71.544 23.648 70.584 26.656 69.624 29.984C68.664 33.248 67.672 36.704 66.648 40.352C65.624 44 64.632 47.68 63.672 51.392C62.776 55.104 61.88 58.688 60.984 62.144C58.936 70.336 56.952 78.752 55.032 87.392L33.336 91.04L37.56 53.984H36.408L26.904 88.832L6.936 92.384ZM61.2323 92.48C63.0243 83.456 64.7523 74.656 66.4163 66.08C67.0563 62.496 67.7283 58.752 68.4323 54.848C69.2003 50.88 69.9043 47.008 70.5443 43.232C71.1843 39.392 71.7603 35.712 72.2723 32.192C72.8483 28.608 73.2963 25.344 73.6163 22.4C75.6003 22.272 77.5203 22.144 79.3763 22.016C81.0403 21.888 82.7363 21.792 84.4643 21.728C86.1923 21.6 87.7283 21.472 89.0723 21.344C89.9043 26.272 90.6403 30.976 91.2803 35.456C91.6003 37.376 91.9203 39.392 92.2403 41.504C92.6243 43.552 92.9763 45.536 93.2963 47.456C93.6163 49.376 93.9363 51.232 94.2563 53.024C94.5763 54.752 94.8963 56.288 95.2163 57.632C95.4723 56.288 95.7603 54.752 96.0803 53.024C96.4003 51.232 96.7523 49.376 97.1363 47.456C97.5203 45.472 97.9043 43.456 98.2883 41.408C98.7363 39.36 99.1523 37.376 99.5363 35.456C100.496 30.976 101.488 26.304 102.512 21.44L114.224 20C112.048 29.6 110.128 38.688 108.464 47.264C107.696 50.976 106.928 54.72 106.16 58.496C105.456 62.272 104.784 65.92 104.144 69.44C103.504 72.96 102.96 76.224 102.512 79.232C102.064 82.176 101.712 84.672 101.456 86.72C101.264 86.72 100.496 86.88 99.1523 87.2C97.8723 87.456 96.3683 87.776 94.6403 88.16C92.9763 88.544 91.2803 88.96 89.5523 89.408C87.8883 89.792 86.6403 90.112 85.8083 90.368C85.3603 85.184 84.8803 80.256 84.3683 75.584C84.1763 73.6 83.9523 71.552 83.6963 69.44C83.4403 67.328 83.1843 65.312 82.9283 63.392C82.7363 61.472 82.5123 59.68 82.2563 58.016C82.0643 56.288 81.8723 54.848 81.6803 53.696C81.4883 54.848 81.2323 56.256 80.9123 57.92C80.5923 59.584 80.2723 61.376 79.9523 63.296C79.6323 65.152 79.3123 67.104 78.9923 69.152C78.6723 71.136 78.3203 73.088 77.9363 75.008C77.1043 79.552 76.2083 84.288 75.2483 89.216L61.2323 92.48Z" fill="#E8EAED"/>
+</g>
+<defs>
+<clipPath id="clip0_102_3">
+<rect width="119" height="119" fill="white"/>
+</clipPath>
+</defs>
+</svg>

static/manifest.webmanifest

@@ -0,0 +1,6 @@
+{
+  "icons": [
+    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
+    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
+  ]
+}