diff --git a/assets/images/Favicon-Light-16x16.png b/assets/images/Favicon-Light-16x16.png
new file mode 100644
index 0000000..3d94fb2
Binary files /dev/null and b/assets/images/Favicon-Light-16x16.png differ
diff --git a/assets/images/Favicon-Light-32x32.png b/assets/images/Favicon-Light-32x32.png
new file mode 100644
index 0000000..dccdce0
Binary files /dev/null and b/assets/images/Favicon-Light-32x32.png differ
diff --git a/assets/images/Favicon-Light-48x48.png b/assets/images/Favicon-Light-48x48.png
new file mode 100644
index 0000000..9dad8a3
Binary files /dev/null and b/assets/images/Favicon-Light-48x48.png differ
diff --git a/assets/images/Favicon-Light.png b/assets/images/Favicon-Light.png
new file mode 100644
index 0000000..cb27998
Binary files /dev/null and b/assets/images/Favicon-Light.png differ
diff --git a/index.html b/index.html
index 90bd3fe..68e286c 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PatternFly Yew Quickstart</title>
 
+    <link data-trunk rel="icon" href="/assets/images/Favicon-Light.png">
+    <link data-trunk rel="icon" type="image/png" sizes="16x16" href="/assets/images/Favicon-Light-16x16.png">
+    <link data-trunk rel="icon" type="image/png" sizes="32x32" href="/assets/images/Favicon-Light-32x32.png">
+    <link data-trunk rel="icon" type="image/png" sizes="48x48" href="/assets/images/Favicon-Light-48x48.png">
+
     <link data-trunk rel="scss" href="assets/style.scss">
     <link data-trunk rel="copy-dir" href="node_modules/@patternfly/patternfly/assets">
     <link data-trunk rel="copy-dir" href="assets/images">