Add proper favicon

public/site.webmanifest

@@ -0,0 +1,2 @@
+{"name":"Michael Bradley's Website","short_name":"Michael Bradley","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#0dcdcd","background_color":"#000000"}
+

src/Head.tsx

@@ -18,12 +18,8 @@ const Styles = () => (
 		<meta name="theme-color" content="#eaeaea" media="(prefers-color-scheme: light)" />
 	</>
 );
-
-// TODO: Find better icon than GH avatar
-// <link rel="icon" href="https://avatars.githubusercontent.com/u/68788583?s=48&v=4" />
 const SEO = () => (
 	<>
-		<link rel="icon" href="data:," />
 		<meta name="keywords" content="Michael Bradley,personal website,programmer,coder,software developer" />
 		<meta name="description" content="Michael Bradley's personal website" />
 		<meta name="subject" content="Self-advertisement" />
@@ -60,12 +56,22 @@ const OpenGraph = () => (
 	</>
 );
 
+const Favicon = () => (
+	<>
+		<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" />
+	</>
+);
+
 const Head = () => (
 	<>
 		<Preamble />
 		<Styles />
 		<SEO />
 		<OpenGraph />
+		<Favicon />
 	</>
 );