diff --git a/.changeset/mean-gorillas-confess.md b/.changeset/mean-gorillas-confess.md
new file mode 100644
index 00000000..eb3f32cc
--- /dev/null
+++ b/.changeset/mean-gorillas-confess.md
@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Added new `faviconPath` option
diff --git a/README.md b/README.md
index 34b937f4..d9bd5ca2 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,7 @@ module.exports = {
   widths: [320, 768, 1024],
   port: 9000,
   openBrowser: true,
+  faviconPath: './favicon.svg',
   paramType: 'search', // default is 'hash'
   exampleCode: `
     <Button>
diff --git a/cypress/projects/basic/playroom.config.js b/cypress/projects/basic/playroom.config.js
index 6b10ebf7..ea727417 100644
--- a/cypress/projects/basic/playroom.config.js
+++ b/cypress/projects/basic/playroom.config.js
@@ -5,4 +5,5 @@ module.exports = {
   outputPath: './dist',
   openBrowser: false,
   storageKey: 'playroom-example-basic',
+  faviconPath: '../../../images/favicon.svg',
 };
diff --git a/cypress/projects/themed/playroom.config.js b/cypress/projects/themed/playroom.config.js
index 59b48319..72ada512 100644
--- a/cypress/projects/themed/playroom.config.js
+++ b/cypress/projects/themed/playroom.config.js
@@ -7,4 +7,5 @@ module.exports = {
   paramType: 'search',
   port: 9001,
   storageKey: 'playroom-example-themed',
+  faviconPath: '../../../images/favicon.svg',
 };
diff --git a/cypress/projects/typescript/playroom.config.js b/cypress/projects/typescript/playroom.config.js
index 83629b91..75ddd01a 100644
--- a/cypress/projects/typescript/playroom.config.js
+++ b/cypress/projects/typescript/playroom.config.js
@@ -4,6 +4,7 @@ module.exports = {
   outputPath: './dist',
   openBrowser: false,
   storageKey: 'playroom-example-typescript',
+  faviconPath: '../../../images/favicon.svg',
   webpackConfig: () => ({
     module: {
       rules: [
diff --git a/images/favicon-inverted.png b/images/favicon-inverted.png
deleted file mode 100644
index ee003117..00000000
Binary files a/images/favicon-inverted.png and /dev/null differ
diff --git a/images/favicon.png b/images/favicon.png
deleted file mode 100644
index 1bfec6de..00000000
Binary files a/images/favicon.png and /dev/null differ
diff --git a/images/favicon.svg b/images/favicon.svg
new file mode 100644
index 00000000..2a98c96b
--- /dev/null
+++ b/images/favicon.svg
@@ -0,0 +1,9 @@
+<svg width="80" height="80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  path { fill: #000; }
+  @media (prefers-color-scheme: dark) {
+    path { fill: #fff; }
+  }
+  </style>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 10h80v60H0V10Zm2.299 2.317v33.616h15.595V12.317H2.299Zm17.894 0v33.616H42.01V12.317H20.193Zm24.116 0v33.616H77.7V12.317H44.31ZM77.7 48.249H2.3v19.434H77.7V48.25Z" />
+</svg>
diff --git a/lib/makeWebpackConfig.js b/lib/makeWebpackConfig.js
index 0843f0e5..6e3965db 100644
--- a/lib/makeWebpackConfig.js
+++ b/lib/makeWebpackConfig.js
@@ -37,6 +37,11 @@ module.exports = async (playroomConfig, options) => {
 
   const staticTypes = await getStaticTypes(playroomConfig);
 
+  // Use the favicon from the config if specified, otherwise don't use anything
+  const favicon = playroomConfig.faviconPath
+    ? relativeResolve(playroomConfig.faviconPath)
+    : undefined;
+
   const ourConfig = {
     mode: options.production ? 'production' : 'development',
     entry: {
@@ -167,7 +172,7 @@ module.exports = async (playroomConfig, options) => {
         chunksSortMode: 'none',
         chunks: ['index'],
         filename: 'index.html',
-        favicon: 'images/favicon.png',
+        favicon,
         base: playroomConfig.baseUrl,
       }),
       new HtmlWebpackPlugin({
@@ -181,6 +186,7 @@ module.exports = async (playroomConfig, options) => {
         chunksSortMode: 'none',
         chunks: ['preview'],
         filename: 'preview/index.html',
+        favicon,
         publicPath: '../',
       }),
       new VanillaExtractPlugin(),
diff --git a/src/index.js b/src/index.js
index 4bd28845..9b0f5a8c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,8 +2,6 @@ import { renderElement } from './render';
 import Playroom from './Playroom/Playroom';
 import { StoreProvider } from './StoreContext/StoreContext';
 import playroomConfig from './config';
-import faviconPath from '../images/favicon.png';
-import faviconInvertedPath from '../images/favicon-inverted.png';
 
 const polyfillIntersectionObserver = () =>
   typeof window.IntersectionObserver !== 'undefined'
@@ -16,15 +14,6 @@ polyfillIntersectionObserver().then(() => {
   const outlet = document.createElement('div');
   document.body.appendChild(outlet);
 
-  const selectedElement = document.head.querySelector('link[rel="icon"]');
-  const favicon = window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? faviconInvertedPath
-    : faviconPath;
-
-  if (selectedElement) {
-    selectedElement.setAttribute('href', favicon);
-  }
-
   const renderPlayroom = ({
     themes = require('./themes'),
     components = require('./components'),