Implement favicon and og image

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>

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,
+        },
+      ]}
     />
   );
 }