used proper favicon website

Author: rlaker

Favicon.ico

@@ -1,5 +1,11 @@
 <!-- start custom head snippets -->
 
 <!-- insert favicons. use https://realfavicongenerator.net/ -->
-<link rel="shortcut icon" href="Favicon.ico">
+<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="/site.webmanifest">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="theme-color" content="#ffffff">
 <!-- end custom head snippets -->

_includes/head/custom.html

@@ -31,7 +31,7 @@ I also created this [poster](/files/oceans_poster.pdf) to explain my second firs
 
 <img src="/files/psp_corotation_anti.gif" alt="Parker Solar Probe Corotation" class="center">
 
-Inspired by [@matthen2](https://twitter.com/matthen/), and adapting his mathematica [code](https://pastebin.com/McQ5qwXr) to show why Parker Solar Probe's orbit exhibits a loop when viewed in a frame corotating with the Sun's surface. Code can be seen on [github](https://github.com/rlaker/animations/).
+Inspired by [@matthen2](https://twitter.com/matthen/), and adapting his mathematica [code](https://pastebin.com/McQ5qwXr) to show why Parker Solar Probe's orbit exhibits a loop when viewed in a frame corotating with the Sun's surface. Code can be seen on [Github](https://github.com/rlaker/animations/) <i class="fab fa-github"></i>.
 
 The animation shows one orbit of Earth (blue) and 3 orbits of Parker Solar Probe. The orbit of PSP is merely an ellipse, rather than being based on gravity, as this allows the animation to loop. The Sun rotates 12 times in this animation, similar to the real rotation rate of 27 days.
 

_pages/animations.md

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

android-chrome-192x192.png

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}