Add favicons

_includes/head.html

@@ -11,25 +11,14 @@
   </title>
 
   <link rel="stylesheet" href="{{ 'styles.css' | relative_url }}">
-  {% if site.mobile-icons %}
-  <!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
-  <link rel="apple-touch-icon" sizes="57x57" href="{{ '/assets/touch-icon-iphone-precomposed.png' | relative_url }}">
-  <!-- iPad and iPad mini @1x -->
-  <link rel="apple-touch-icon" sizes="76x76" href="{{ '/assets/touch-icon-ipad-precomposed.png' '| relative_url }}">
-  <!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s -->
-  <link rel="apple-touch-icon" sizes="120x120" href="{{ '/assets/touch-icon-iphone-retina-precomposed.png' | relative_url }}">
-  <!-- iPad and iPad mini @2x -->
-  <link rel="apple-touch-icon" sizes="152x152" href="{{ '/assets/touch-icon-ipad-retina-precomposed.png' | relative_url }}">
-  <!-- iPad Pro -->
-  <link rel="apple-touch-icon" sizes="167x167" href="{{ '/assets/touch-icon-ipad-pro-precomposed.png' | relative_url }}">
-  <!-- iPhone 6 Plus and iPhone 6s Plus -->
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/touch-icon-iphone-6-plus-precomposed.png' | relative_url }}">
-  <!-- Android Devices High Resolution -->
-  <link rel="icon" sizes="192x192" href="{{ '/assets/icon-hd.png' | relative_url }}">
-  <!-- Android Devices Normal Resolution -->
-  <link rel="icon" sizes="128x128" href="{{ '/assets/icon.png' | relative_url }}">
-  {% endif %}
-  <!-- Desktop Browser Icon -->
-  <link rel="shortcut icon" href="{{ '/assets/favicon.ico' | relative_url }}">
+
+  <!-- favicons from https://realfavicongenerator.net -->
+  <link rel="icon" type="image/png" href="{{ '/assets/favicon-96x96.png' | relative_url }}" sizes="96x96" />
+  <link rel="icon" type="image/svg+xml" href="{{ '/assets/favicon.svg' | relative_url }}" />
+  <link rel="shortcut icon" href="{{ '/assets/favicon.ico' | relative_url }}" />
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/apple-touch-icon.png' | relative_url}}" />
+  <meta name="apple-mobile-web-app-title" content="Transvasive" />
+  <link rel="manifest" href="{{ '/assets/site.webmanifest' | relative_url }}" />
+
   <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ 'atom.xml' | relative_url }}">
 </head>

assets/site.webmanifest

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