Use SVG favicon with PNG fallback for Apple

diff --git a/apple-touch-icon.png b/apple-touch-icon.png
new file mode 100644 (file)
index 0000000..a1554f7
Binary files /dev/null and b/apple-touch-icon.png differ

diff --git a/favicon.ico b/favicon.ico
deleted file mode 100644 (file)
index a34cb40..0000000
Binary files a/favicon.ico and /dev/null differ

diff --git a/favicon.svg b/favicon.svg
new file mode 100644 (file)
index 0000000..506290a
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 24 24" fill="#005ce6" xmlns="http://www.w3.org/2000/svg">
+<path d="m15.79 0 8.2 6.83-5.47 4.55-8.2-6.83z"/>
+<path d="m5.48 8.59 8.2 6.83-5.47 4.55-8.2-6.83z"/>
+<path d="m18.535 13.25 3.854-3.129 1.285 1.043-5.139 4.172z"/>
+<path d="m0.96453 17.951 1.1832-0.981 5.9161 4.904 5.9162-4.904v1.962l-5.9162 4.904z"/>
+</svg>

diff --git a/index.html b/index.html
index 3d5365fc0d659e3be6e05632b102320e9e86fe9e..d267c275b44e73d81d0b68343a3b5ed3cc659fa8 100644 (file)
--- a/index.html
+++ b/index.html
@@ -12,7 +12,8 @@
   <meta property="og:image" content="https://og-image.ardislu.dev/Notes%20on%20**web%20development**%2C%20**crypto**%2C%20**self-hosting**%2C%20and%20**tech**%20in%20general..png">
   <meta property="og:image:alt" content="Website logo above the text 'notes on web development, crypto, self-hosting, and tech in general.'">
   <meta name="twitter:card" content="summary_large_image">
-  <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" sizes="180x180">
   <link rel="manifest" href="/manifest.webmanifest">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/styles/default.min.css">
   <link rel="stylesheet" href="/style.css">