diff --git a/.changeset/mean-moons-check.md b/.changeset/mean-moons-check.md
new file mode 100644
index 00000000..a05f054d
--- /dev/null
+++ b/.changeset/mean-moons-check.md
@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Add favicon to Playroom site.
diff --git a/images/favicon-inverted.png b/images/favicon-inverted.png
new file mode 100644
index 00000000..ee003117
Binary files /dev/null and b/images/favicon-inverted.png differ
diff --git a/images/favicon.png b/images/favicon.png
new file mode 100644
index 00000000..1bfec6de
Binary files /dev/null and b/images/favicon.png differ
diff --git a/lib/makeWebpackConfig.js b/lib/makeWebpackConfig.js
index 6ca8355b..0843f0e5 100644
--- a/lib/makeWebpackConfig.js
+++ b/lib/makeWebpackConfig.js
@@ -141,6 +141,10 @@ module.exports = async (playroomConfig, options) => {
           include: path.dirname(require.resolve('codemirror/package.json')),
           use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
         },
+        {
+          test: /\.png$/i,
+          type: 'asset/resource',
+        },
       ],
     },
     optimization: {
@@ -163,6 +167,7 @@ module.exports = async (playroomConfig, options) => {
         chunksSortMode: 'none',
         chunks: ['index'],
         filename: 'index.html',
+        favicon: 'images/favicon.png',
         base: playroomConfig.baseUrl,
       }),
       new HtmlWebpackPlugin({
diff --git a/src/index.js b/src/index.js
index 9b0f5a8c..4bd28845 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,8 @@ 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'
@@ -14,6 +16,15 @@ 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'),