From 4412ef1e5e5c8457e31b175f596ff88eca67e60d Mon Sep 17 00:00:00 2001
From: Felix Habib <33821218+felixhabib@users.noreply.github.com>
Date: Mon, 13 Jan 2025 11:06:47 +1100
Subject: [PATCH] Ensure favicon is displayed on Preview links (#385)

---
 .changeset/clean-pets-push.md |  5 +++++
 lib/makeWebpackConfig.js      |  1 +
 src/preview.js                | 13 +++++++++++++
 3 files changed, 19 insertions(+)
 create mode 100644 .changeset/clean-pets-push.md

diff --git a/.changeset/clean-pets-push.md b/.changeset/clean-pets-push.md
new file mode 100644
index 00000000..cb15450c
--- /dev/null
+++ b/.changeset/clean-pets-push.md
@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Ensure favicon is displayed on Preview links.
diff --git a/lib/makeWebpackConfig.js b/lib/makeWebpackConfig.js
index 3051fbf9..98698e16 100644
--- a/lib/makeWebpackConfig.js
+++ b/lib/makeWebpackConfig.js
@@ -178,6 +178,7 @@ module.exports = async (playroomConfig, options) => {
         chunksSortMode: 'none',
         chunks: ['preview'],
         filename: 'preview/index.html',
+        favicon: path.join(__dirname, '../images/favicon.png'),
         publicPath: '../',
       }),
       new VanillaExtractPlugin({
diff --git a/src/preview.js b/src/preview.js
index efae4509..400b5ec7 100644
--- a/src/preview.js
+++ b/src/preview.js
@@ -1,9 +1,22 @@
 import { renderElement } from './render';
 import Preview from './Playroom/Preview';
+import faviconPath from '../images/favicon.png';
+import faviconInvertedPath from '../images/favicon-inverted.png';
 
 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;
+
+const formattedFavicon = `../${favicon}`;
+
+if (selectedElement) {
+  selectedElement.setAttribute('href', formattedFavicon);
+}
+
 const renderPreview = ({
   themes = require('./themes'),
   components = require('./components'),