diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e84a7c7..1f4e2c8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import ChordPanel from './ChordPanel.svelte';
 	import { displayPitches } from '../lib/music/types';
 	import {
@@ -35,18 +36,20 @@
 	<title>Ukulele Chord Progressions Toy</title>
 	<meta name="description" content="Ukulele Chord Progressions Toy" />
 
+	<link rel="icon" type="image/x-icon" href="{base}/favicon.png" />
+
 	<meta name="twitter:card" content="summary_large_image" />
 	<meta name="twitter:site" content="@marginalhours" />
 	<meta name="twitter:creator" content="@marginalhours" />
 	<meta name="twitter:title" content="Ukulele Chord Progressions Toy" />
 	<meta name="twitter:description" content="Find your next favourite progression" />
-	<meta name="twitter:image" content="" />
+	<meta name="twitter:image" content="{base}/screenshot.png" />
 
 	<meta property="og:url" content="https:/marginalhours.net/ukulele-progressions" />
 	<meta property="og:type" content="article" />
 	<meta property="og:title" content="Ukulele Chord Progressions Toy" />
 	<meta property="og:description" content="Find your next favourite progression" />
-	<meta property="og:image" content="" />
+	<meta property="og:image" content="{base}/screenshot.png" />
 </svelte:head>
 
 <main>
diff --git a/static/favicon.png b/static/favicon.png
index 825b9e6..3128a3e 100644
Binary files a/static/favicon.png and b/static/favicon.png differ
diff --git a/static/screenshot.png b/static/screenshot.png
new file mode 100644
index 0000000..d143dee
Binary files /dev/null and b/static/screenshot.png differ