diff --git a/web/_img/apple-touch-icon.png b/web/_img/apple-touch-icon.png
new file mode 100644
index 00000000..261a9daf
Binary files /dev/null and b/web/_img/apple-touch-icon.png differ
diff --git a/web/_img/favicon-dark.png b/web/_img/favicon-dark.png
new file mode 100644
index 00000000..11ea7313
Binary files /dev/null and b/web/_img/favicon-dark.png differ
diff --git a/web/_img/favicon-dark.svg b/web/_img/favicon-dark.svg
new file mode 100644
index 00000000..3896309a
--- /dev/null
+++ b/web/_img/favicon-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192"><defs><style>.cls-1 {fill: #ff4500;}.cls-2 {fill: white;}</style></defs><polygon class="cls-1" points="154 0 154 38 39 38 39 192 0 192 0 0 154 0"/><polygon class="cls-1" points="192 38 192 192 77 192 77 153 154 153 154 38 192 38"/><polygon class="cls-1" points="154 38 68.8 68.8 123.2 123.2 154 38"/><polygon class="cls-2" points="68.8 68.8 39 153 123.2 123.2 68.8 68.8"/></svg>
\ No newline at end of file
diff --git a/web/_img/favicon.png b/web/_img/favicon.png
new file mode 100644
index 00000000..286fa715
Binary files /dev/null and b/web/_img/favicon.png differ
diff --git a/web/_img/favicon.svg b/web/_img/favicon.svg
new file mode 100644
index 00000000..36164ba3
--- /dev/null
+++ b/web/_img/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192"><defs><style>.cls-1 {fill: #ff4500;}.cls-2 {fill: black;}</style></defs><polygon class="cls-1" points="154 0 154 38 39 38 39 192 0 192 0 0 154 0"/><polygon class="cls-1" points="192 38 192 192 77 192 77 153 154 153 154 38 192 38"/><polygon class="cls-1" points="154 38 68.8 68.8 123.2 123.2 154 38"/><polygon class="cls-2" points="68.8 68.8 39 153 123.2 123.2 68.8 68.8"/></svg>
\ No newline at end of file
diff --git a/web/_img/logo-100x100.png b/web/_img/logo-100x100.png
deleted file mode 100644
index c4c85d2c..00000000
Binary files a/web/_img/logo-100x100.png and /dev/null differ
diff --git a/web/_img/logo-transparent.svg b/web/_img/logo-transparent.svg
new file mode 100644
index 00000000..b051c684
--- /dev/null
+++ b/web/_img/logo-transparent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1 {fill: #ff4500;}.cls-2 {fill: black;}</style></defs><polygon class="cls-1" points="364 76 364 148 148 148 148 436 76 436 76 76 364 76"/><polygon class="cls-1" points="436 148 436 436 220 436 220 364 364 364 364 148 436 148"/><polygon class="cls-1" points="364 148 205 205 307 307 364 148"/><polygon class="cls-2" points="205 205 148 364 307 307 205 205"/></svg>
\ No newline at end of file
diff --git a/web/_img/logo.png b/web/_img/logo.png
index 63f3f124..d19f19e8 100644
Binary files a/web/_img/logo.png and b/web/_img/logo.png differ
diff --git a/web/_img/logo.svg b/web/_img/logo.svg
new file mode 100644
index 00000000..a53fd296
--- /dev/null
+++ b/web/_img/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#ff4500;}</style></defs><rect class="cls-1" width="512" height="512"/><polygon class="cls-2" points="364 76 364 148 148 148 148 436 76 436 76 76 364 76"/><polygon class="cls-2" points="436 148 436 436 220 436 220 364 364 364 364 148 436 148"/><polygon class="cls-2" points="364 148 205 205 307 307 364 148"/><polygon points="205 205 148 364 307 307 205 205"/></svg>
\ No newline at end of file
diff --git a/web/_img/pwa/icon-192x192.png b/web/_img/pwa/icon-192x192.png
index 22324cac..c19edfbd 100644
Binary files a/web/_img/pwa/icon-192x192.png and b/web/_img/pwa/icon-192x192.png differ
diff --git a/web/_img/pwa/icon-256x256.png b/web/_img/pwa/icon-256x256.png
deleted file mode 100644
index 6268cded..00000000
Binary files a/web/_img/pwa/icon-256x256.png and /dev/null differ
diff --git a/web/_img/pwa/icon-384x384.png b/web/_img/pwa/icon-384x384.png
deleted file mode 100644
index 2ff50765..00000000
Binary files a/web/_img/pwa/icon-384x384.png and /dev/null differ
diff --git a/web/_img/pwa/icon-512x512.png b/web/_img/pwa/icon-512x512.png
index 571491c1..312b5535 100644
Binary files a/web/_img/pwa/icon-512x512.png and b/web/_img/pwa/icon-512x512.png differ
diff --git a/web/_img/pwa/icon-maskable-192x192.png b/web/_img/pwa/icon-maskable-192x192.png
new file mode 100644
index 00000000..b7c29f5e
Binary files /dev/null and b/web/_img/pwa/icon-maskable-192x192.png differ
diff --git a/web/_img/pwa/icon-maskable-512x512.png b/web/_img/pwa/icon-maskable-512x512.png
new file mode 100644
index 00000000..92b7c3ee
Binary files /dev/null and b/web/_img/pwa/icon-maskable-512x512.png differ
diff --git a/web/_js/favicon.js b/web/_js/favicon.js
new file mode 100644
index 00000000..f64c7895
--- /dev/null
+++ b/web/_js/favicon.js
@@ -0,0 +1,27 @@
+// Based on GitHub's favicon switcher. Temporary(?) fix for Chromium based browsers that won't dynamically update embedded CSS media query inside of SVG
+function updateFavicon(colorScheme) {
+	const favicon = document.head.querySelector('.js-site-favicon[type="image/svg+xml"]')
+	const faviconFallback = document.head.querySelector('.js-site-favicon[type="image/png"]')
+	if (favicon && faviconFallback) {
+		if (colorScheme || colorScheme == 'dark') {
+			favicon.href = '_img/favicon-dark.svg';
+			faviconFallback.href = '_img/favicon-dark.png';
+		} else {
+			favicon.href = '_img/favicon.svg';
+			faviconFallback.href = '_img/favicon.png';
+		}
+	}
+}
+
+function prefersDarkColorScheme() {
+	return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+if (prefersDarkColorScheme()) {
+	// update favicon to dark on page load
+	updateFavicon('dark')
+}
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+	updateFavicon(prefersDarkColorScheme())
+})
diff --git a/web/about.html b/web/about.html
index b30f7174..35ca116e 100644
--- a/web/about.html
+++ b/web/about.html
@@ -14,26 +14,30 @@
 -->
 
 <!DOCTYPE html>
-<html>
+<html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>The 2022 /r/place Atlas</title>
-		
 		<meta name="description" content="An Atlas of Reddit's /r/place, with information to each artwork of the canvas.">
 		<meta name="author" content="Roland Rytz">
-		<meta name="keywords" content="reddit, /r/place, april">
 		<meta name="application-name" content="2022 /r/place Atlas">
 		<meta name="robots" content="index, follow">
 		
 		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+		<meta name="color-scheme" content="dark">
 		
+		<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">
+		<link rel="icon" href="_img/favicon.svg" type="image/svg+xml" class="js-site-favicon">
+    
 		<link href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
+		<script type="text/javascript" src="./_js/favicon.js" defer></script>
+    
 	</head>
 	<body>
 		<div id="wrapper">
 			<header class="aboutHeader">
 				<a href="./">
-					<img id="logo" src="./_img/logo-100x100.png" height="50" width="50" alt="">
+					<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="">
 					<h1>The 2022 /r/place Atlas</h1>
 				</a>
 				<!--nav>
diff --git a/web/favicon.ico b/web/favicon.ico
index 40d034bd..c4c2de13 100644
Binary files a/web/favicon.ico and b/web/favicon.ico differ
diff --git a/web/index.html b/web/index.html
index 5071fb15..3fa03216 100644
--- a/web/index.html
+++ b/web/index.html
@@ -20,18 +20,33 @@
 		<title>The 2022 /r/place Atlas</title>
 		<meta name="description" content="An interactive map of Reddit's 2022 /r/place, with information to each artwork of the canvas.">
 		<meta name="author" content="Roland Rytz (2022 by Stefano#7366)">
-		<meta name="keywords" content="reddit, /r/place 2022">
 		<meta name="application-name" content="The /r/place Atlas 2022">
 		<meta name="robots" content="index, follow">
 		
+		<meta property="og:title" content="The 2022 /r/place Atlas">
+		<meta property="og:type" content="website">
+		<meta property="og:url" content="https://place-atlas.stefanocoding.me/">
+		<meta property="og:image" content="https://place-atlas.stefanocoding.me/_img/logo.png">
+		<meta property="og:image:type" content="image/png">
+		<meta property="og:image:width" content="512">
+		<meta property="og:image:height" content="512">
+		<meta property="og:image:alt" content="The /r/place Atlas logo">
+		<meta property="og:description" content="An interactive map of Reddit's 2022 /r/place, with information to each artwork of the canvas.">
+		
 		<!-- <meta name="google-site-verification" content="gZGHpBSMzffAbIn0qB8b00We6EwSGkDTfDoQVv-NWss"/> -->
 		
 		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no"> <!-- user-scalable=no -->
 		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="color-scheme" content="dark">
+
+		<link rel="apple-touch-icon" href="_img/apple-touch-icon.png" sizes="180x180">
+		<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">
+		<link rel="icon" href="_img/favicon.svg" type="image/svg+xml" class="js-site-favicon">
 		
 		<link href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
 		<link rel="manifest" href="./manifest.webmanifest">
 		
+		<script type="text/javascript" src="./_js/favicon.js" defer></script>
 		<script type="application/ld+json">
 			{
 				"@context": "http://schema.org",
@@ -67,7 +82,7 @@
 		<div id="wrapper">
 			<header>
 				<a href="./">
-					<img id="logo" src="./_img/logo.png" height="50" width="50" alt="Logo">
+					<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="Logo">
 					<!-- If you wonder why I shrink the image in html,
 					     it's because this is the image that will be used
 					     by reddit and the like as the thumbnail for the site.
diff --git a/web/manifest.webmanifest b/web/manifest.webmanifest
index ab0502a1..2e8aa440 100644
--- a/web/manifest.webmanifest
+++ b/web/manifest.webmanifest
@@ -1,6 +1,6 @@
 {
-    "theme_color": "#f69435",
-    "background_color": "#f69435",
+    "theme_color": "#923b15",
+    "background_color": "#111111",
     "display": "minimal-ui",
     "scope": "/",
     "start_url": "/",
@@ -10,23 +10,27 @@
     "icons": [
         {
             "src": "_img/pwa/icon-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
+            "sizes": "196x196",
+            "type": "image/png",
+            "purpose": "any"
         },
         {
-            "src": "_img/pwa/icon-256x256.png",
-            "sizes": "256x256",
-            "type": "image/png"
-        },
-        {
-            "src": "_img/pwa/icon-384x384.png",
-            "sizes": "384x384",
-            "type": "image/png"
+            "src": "_img/pwa/icon-maskable-192x192.png",
+            "sizes": "196x196",
+            "type": "image/png",
+            "purpose": "maskable"
         },
         {
             "src": "_img/pwa/icon-512x512.png",
             "sizes": "512x512",
-            "type": "image/png"
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "_img/pwa/icon-maskable-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
         }
     ]
 }