Simplify favicon

README.md

@@ -14,3 +14,17 @@ All commands are run from the root of the project, from a terminal:
 | `npm run preview` | Preview the build locally                  |
 | `npm run format`  | Run formatter                              |
 | `npm run upgrade` | Upgrade astro                              |
+
+## Favicon
+
+Additionally, here are the steps for creating the favicons from the SVG (inspired by [this](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)):
+
+```bash
+inkscape ./public/icon.svg --export-width=32 --export-filename=./tmp.png
+magick ./tmp.png ./public/favicon.ico
+rm ./tmp.png
+inkscape --export-type="png" --export-width=140 --export-filename="./tmp.png" ./public/icon.svg
+# FFFFF0 matches "ivory" from the CSS
+magick ./tmp.png -background "#fffff0" -gravity center -extent 180x180 ./public/apple-touch-icon.png
+rm ./tmp.png
+```

src/components/Head.astro

@@ -87,28 +87,9 @@ if (title !== undefined) {
       />
     ) : undefined
   }
-  <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="/manifest.json" /><link
-    rel="mask-icon"
-    href="/safari-pinned-tab.svg"
-    color="#fffff8"
-  /><meta name="msapplication-TileColor" content="#fffff8" /><meta
-    name="theme-color"
-    content="#fffff8"
-  />
+  <link rel="icon" href="/favicon.ico" sizes="32x32" />
+  <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
   <!-- title -->
   <title>{actualTitle}</title>