From fd81085b54c2b7aa419d74383e47191fca1bc2ea Mon Sep 17 00:00:00 2001
From: Elliot DeNolf <denolfe@gmail.com>
Date: Tue, 25 Aug 2020 21:37:17 -0400
Subject: [PATCH] Implement favicon and og image

---
 demo/payload.config.js                        |   4 ++--
 src/client/assets/images/favicon.svg          |   5 +++++
 src/client/assets/images/og-image.png         | Bin 0 -> 4035 bytes
 src/client/components/utilities/Meta/index.js |  15 +++++++++++++--
 4 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 src/client/assets/images/favicon.svg
 create mode 100644 src/client/assets/images/og-image.png

diff --git a/demo/payload.config.js b/demo/payload.config.js
index 1316d7aff3..fcb479c6f6 100644
--- a/demo/payload.config.js
+++ b/demo/payload.config.js
@@ -32,8 +32,8 @@ module.exports = {
     // indexHTML: path.resolve(__dirname, 'custom-index.html'),
     meta: {
       titleSuffix: '- Payload Demo',
-      ogImage: '/static/find-image-here.jpg',
-      favicon: '/img/whatever.png',
+      // ogImage: '/static/find-image-here.jpg',
+      // favicon: '/img/whatever.png',
     },
     disable: false,
     components: {
diff --git a/src/client/assets/images/favicon.svg b/src/client/assets/images/favicon.svg
new file mode 100644
index 0000000000..003f065360
--- /dev/null
+++ b/src/client/assets/images/favicon.svg
@@ -0,0 +1,5 @@
+<svg width="260" height="260" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="260" height="260" fill="white"/>
+<path d="M120.59 8.5824L231.788 75.6142V202.829L148.039 251.418V124.203L36.7866 57.2249L120.59 8.5824Z" fill="#333333"/>
+<path d="M112.123 244.353V145.073L28.2114 193.769L112.123 244.353Z" fill="#333333"/>
+</svg>
diff --git a/src/client/assets/images/og-image.png b/src/client/assets/images/og-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..dffb8eaed24de4c9ea54a5f47e4b3eb0950e1450
GIT binary patch
literal 4035
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
H(U<=NSNK+h

literal 0
HcmV?d00001

diff --git a/src/client/components/utilities/Meta/index.js b/src/client/components/utilities/Meta/index.js
index 0f389c453d..1809a1a024 100644
--- a/src/client/components/utilities/Meta/index.js
+++ b/src/client/components/utilities/Meta/index.js
@@ -2,9 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import config from 'payload/config';
+import payloadFavicon from '../../../assets/images/favicon.svg';
+import payloadOgImage from '../../../assets/images/og-image.png';
 
-function Meta({ description, lang, meta, title, image, keywords }) {
+function Meta({ description, lang, meta, title, keywords }) {
   const titleSuffix = config?.admin?.meta?.titleSuffix ?? '- Payload';
+  const favicon = config?.admin?.meta?.favicon ?? payloadFavicon;
+  const ogImage = config?.admin?.meta?.ogImage ?? payloadOgImage;
   return (
     <Helmet
       htmlAttributes={{
@@ -26,7 +30,7 @@ function Meta({ description, lang, meta, title, image, keywords }) {
         },
         {
           property: 'og:image',
-          content: image,
+          content: ogImage,
         },
         {
           property: 'og:description',
@@ -49,6 +53,13 @@ function Meta({ description, lang, meta, title, image, keywords }) {
           content: description,
         },
       ].concat(meta)}
+      link={[
+        {
+          rel: 'icon',
+          type: 'image/svg+xml',
+          href: favicon,
+        },
+      ]}
     />
   );
 }