add favicons

Signed-off-by: Ivan Boothe <git@rootwork.org>
rootwork · Feb 11, 2022 · 0abba49 · 0abba49
1 parent 92e22d8
commit 0abba49
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 6 deletions.
diff --git a/src/index.html b/src/index.html
@@ -90,17 +90,39 @@
     <!-- <meta property="og:url" content="https://www.example.com/page"> -->
     <!-- <link rel="canonical" href="https://www.example.com/page"> -->
 
-    <!-- <link> and <meta> favicon tags
+    <!-- <link> favicon tags
          Customize these as necessary for your project. Resources:
          https://www.npmjs.com/package/modern-favicons
          https://www.npmjs.com/package/favicons
          https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
+         https://realfavicongenerator.net/
+         https://realfavicongenerator.net/svg-favicon/
+         https://favicon.io/favicon-generator/
+         https://blog.tomayac.com/2019/09/21/prefers-color-scheme-in-svg-favicons-for-dark-mode-icons/
+
+         favicon.ico: 32×32
+         favicon.svg: optionally include <style> tags to serve a dark-mode version
+         apple-touch-icon.png: 180×180
+         site.webmanifest: contains links to icon-*.png images
+
+    -->
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+
+    <!-- <meta> theme color
+         Used to style some browser chrome (Safari, Chrome on Android, desktop
+         Chrome for PWAs, Firefox OS, Opera). Often matches a color from the
+         favicon. Customize for your project as necessary. Resources:
+         https://css-tricks.com/meta-theme-color-and-trickery/
+         https://blog.jim-nielsen.com/2021/theme-color-in-css/
+         https://developers.google.com/web/fundamentals/design-and-ux/browser-customization#meta_theme_color_for_chrome_and_opera
+         https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
+         https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color
+         https://caniuse.com/meta-theme-color
     -->
-    <!-- <link rel="icon" href="/favicon.ico"> -->
-    <!-- <link rel="icon" href="/favicon.svg" type="image/svg+xml"> -->
-    <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->
-    <!-- <link rel="manifest" href="/my.webmanifest"> -->
-    <!-- <meta name="theme-color" content="#FF00FF"> -->
+    <meta name="theme-color" content="#991b1d" />
   </head>
   <body class="bg-gray-200">
     <header

diff --git a/src/root/apple-touch-icon.png b/src/root/apple-touch-icon.png
diff --git a/src/root/favicon.ico b/src/root/favicon.ico
diff --git a/src/root/favicon.svg b/src/root/favicon.svg
diff --git a/src/root/icon-192.png b/src/root/icon-192.png
diff --git a/src/root/icon-512.png b/src/root/icon-512.png
diff --git a/src/root/site.webmanifest b/src/root/site.webmanifest
@@ -0,0 +1,6 @@
+{
+  "icons": [
+    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
+    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
+  ]
+}