💄 Update favicon

Author: ujibang

_includes/head.html

@@ -36,24 +36,12 @@
    <!--iframeResizer-->
   <script src="/assets/js/iframe-resizer.parent.js"></script>
    <!-- Favicons ================================================== -->
-   <link rel="apple-touch-icon" sizes="57x57" href="{{ "/images/favicon/apple-icon-57x57.png" | prepend: site.baseurl }}">
-   <link rel="apple-touch-icon" sizes="60x60" href="{{ "/images/favicon/apple-icon-60x60.png" | prepend: site.baseurl }}">
-   <link rel="apple-touch-icon" sizes="72x72" href="{{ "/images/favicon/apple-icon-72x72.png" | prepend: site.baseurl }}">
-   <link rel="apple-touch-icon" sizes="76x76" href="{{ "/images/favicon/apple-icon-76x76.png" | prepend: site.baseurl }}">
-   <link rel="apple-touch-icon" sizes="114x114" href="{{ "/images/favicon/apple-icon-114x114.png" | prepend: site.baseurl }}">
-   <link rel="apple-touch-icon" sizes="120x120" href="{{ "/images/favicon/apple-icon-120x120.png" | prepend: site.baseurl }}">
-   <link rel="apple-touch-icon" sizes="144x144" href="{{ "/images/favicon/apple-icon-144x144.png" | prepend: site.baseurl }}">
-   <link rel="apple-touch-icon" sizes="152x152" href="{{ "/images/favicon/apple-icon-152x152.png" | prepend: site.baseurl }}">
-   <link rel="apple-touch-icon" sizes="180x180" href="{{ "/images/favicon/apple-icon-180x180.png" | prepend: site.baseurl }}">
-   <link rel="icon" type="image/png" sizes="192x192" href="{{ "/images/favicon/android-icon-192x192.png" | prepend: site.baseurl }}">
-   <link rel="icon" type="image/png" sizes="32x32" href="{{ "/images/favicon/favicon-32x32.png" | prepend: site.baseurl }}/">
-   <link rel="icon" type="image/png" sizes="96x96" href="{{ "/images/favicon/favicon-96x96.png" | prepend: site.baseurl }}">
-   <link rel="icon" type="image/png" sizes="16x16" href="{{ "/images/favicon/favicon-16x16.png" | prepend: site.baseurl }}">
-   <link rel="manifest" href="{{ "/images/favicon/manifest.json" | prepend: site.baseurl }}">
-   <meta name="msapplication-TileColor" content="#ffffff">
-   <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
-   <meta name="theme-color" content="#ffffff">
-   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
-   <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
-   {% include plausible.html %}
+  <link rel="icon" type="image/png" href="/images/favicon/favicon-96x96.png" sizes="96x96" />
+  <link rel="icon" type="image/svg+xml" href="/images/favicon/favicon.svg" />
+  <link rel="shortcut icon" href="/images/favicon/favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png" />
+  <link rel="manifest" href="/images/favicon/site.webmanifest" />
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
+  {% include plausible.html %}
 </head>

images/favicon/android-icon-144x144.png

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/images/favicon/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/images/favicon/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}