diff --git a/packages/common-app/src/dialogs/ImageLightbox/ImageLightbox.tsx b/packages/common-app/src/dialogs/ImageLightbox/ImageLightbox.tsx
index 723a8586..290e4595 100644
--- a/packages/common-app/src/dialogs/ImageLightbox/ImageLightbox.tsx
+++ b/packages/common-app/src/dialogs/ImageLightbox/ImageLightbox.tsx
@@ -1,5 +1,5 @@
 import { createPortal } from 'react-dom';
-import { usePortal, DialogWrapper, Times } from '@youfoundation/common-app';
+import { usePortal, Times } from '@youfoundation/common-app';
 import { EmbeddedThumb, TargetDrive } from '@youfoundation/js-lib/core';
 import { Image } from '@youfoundation/common-app';
 import { useEffect } from 'react';
@@ -44,7 +44,7 @@ export const ImageLightbox = ({
     <div className="fixed inset-0 z-50 bg-black lg:bg-transparent" role="dialog" aria-modal="true">
       <div className="inset-0 bg-black transition-opacity lg:fixed"></div>
       <div className="inset-0 z-10 lg:fixed lg:overflow-y-auto">
-        <div className="relative flex h-full min-h-screen flex-col lg:flex-row">
+        <div className="relative flex h-full min-h-screen flex-col lg:flex-row" onClick={onClose}>
           {onClose ? (
             <button
               onClick={onClose}
@@ -53,6 +53,7 @@ export const ImageLightbox = ({
               <Times className="h-4 w-4" />
             </button>
           ) : null}
+
           <Image
             className={`m-auto h-auto max-h-[calc(100vh-5rem)] w-auto max-w-full object-contain`}
             fileId={fileId}
diff --git a/packages/common-app/src/form/image/ImageDialog/ImageCropper.tsx b/packages/common-app/src/form/image/ImageDialog/ImageCropper.tsx
index 75773a48..0522f002 100644
--- a/packages/common-app/src/form/image/ImageDialog/ImageCropper.tsx
+++ b/packages/common-app/src/form/image/ImageDialog/ImageCropper.tsx
@@ -26,9 +26,7 @@ export const ImageCropper = ({ imageUrl, expectedAspectRatio, onChange }: ImageC
     const cropper = imageElement?.cropper;
 
     cropper?.getCroppedCanvas().toBlob((blob) => {
-      if (!blob) {
-        return;
-      }
+      if (!blob) return;
 
       new Blob([blob], { type: OUTPUT_MIME_TYPE }).arrayBuffer().then((buffer) => {
         const contentByteArray = new Uint8Array(buffer);
diff --git a/packages/common-app/src/socialFeed/Blocks/Interacts/Comments/CommentComposer.tsx b/packages/common-app/src/socialFeed/Blocks/Interacts/Comments/CommentComposer.tsx
index 8e9c675b..b5482d38 100644
--- a/packages/common-app/src/socialFeed/Blocks/Interacts/Comments/CommentComposer.tsx
+++ b/packages/common-app/src/socialFeed/Blocks/Interacts/Comments/CommentComposer.tsx
@@ -116,6 +116,7 @@ export const CommentEditor = ({
         />
         <div className="flex flex-shrink-0 flex-row items-center ">
           <EmojiSelector
+            size="small"
             className="text-opacity-30 hover:text-opacity-100"
             onInput={(val) => setBody((oldVal) => `${oldVal} ${val}`)}
           />
diff --git a/packages/common-app/src/socialFeed/Blocks/Interacts/EmojiPicker/EmojiSelector.tsx b/packages/common-app/src/socialFeed/Blocks/Interacts/EmojiPicker/EmojiSelector.tsx
index ab968acb..74bb8187 100644
--- a/packages/common-app/src/socialFeed/Blocks/Interacts/EmojiPicker/EmojiSelector.tsx
+++ b/packages/common-app/src/socialFeed/Blocks/Interacts/EmojiPicker/EmojiSelector.tsx
@@ -8,35 +8,45 @@ const EmojiPicker = lazy(() =>
 export const EmojiSelector = ({
   className,
   onInput,
+  defaultValue,
+  size,
 }: {
   className?: string;
   onInput: (val: string) => void;
+  defaultValue?: string;
+  size?: 'large' | 'small' | 'square' | 'none';
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const wrapperRef = useRef<HTMLDivElement>(null);
   useOutsideTrigger(wrapperRef, () => setIsOpen(false));
-  const { verticalSpace } = useMostSpace(wrapperRef);
+  const { verticalSpace, horizontalSpace } = useMostSpace(wrapperRef);
 
   return (
     <div className={`relative ${className ?? ''}`}>
       <ActionButton
         type="mute"
-        size="small"
-        className={`text-foreground text-opacity-30 hover:text-opacity-100`}
+        size={size}
+        className={`text-foreground ${
+          defaultValue ? 'text-opacity-70' : 'text-opacity-30'
+        } hover:text-opacity-100`}
         onClick={() => setIsOpen(!isOpen)}
-        icon={Lol}
+        icon={defaultValue ? undefined : Lol}
+        children={defaultValue || null}
       />
       <div
-        className={`absolute ${
-          verticalSpace === 'top' ? 'bottom-[100%]' : 'top-[100%]'
-        } right-[-2.7rem] z-20 sm:right-0`}
+        className={`absolute ${verticalSpace === 'top' ? 'bottom-[100%]' : 'top-[100%]'} ${
+          horizontalSpace === 'left' ? 'right-[-2.7rem] sm:right-0' : 'left-[-2.7rem] sm:left-0'
+        }  z-20 `}
         ref={wrapperRef}
       >
         {isOpen ? (
           <Suspense>
             <EmojiPicker
-              onInput={(emojiDetail) => onInput(emojiDetail.unicode)}
+              onInput={(emojiDetail) => {
+                onInput(emojiDetail.unicode);
+                setIsOpen(false);
+              }}
               key={'emoji-picker'}
             />
           </Suspense>
diff --git a/packages/js-lib/src/public/home/HomeTypes.ts b/packages/js-lib/src/public/home/HomeTypes.ts
index 5de58aa5..2dc4c85a 100644
--- a/packages/js-lib/src/public/home/HomeTypes.ts
+++ b/packages/js-lib/src/public/home/HomeTypes.ts
@@ -36,5 +36,9 @@ export class HomePageFields {
 
 export class HomePageThemeFields {
   static readonly ThemeId: string = 'themeId';
+  static readonly Favicon: string = 'favicon';
+  static readonly Colors: string = 'colors';
+  static readonly Tabs: string = 'tabs';
+  static readonly TabsOrder: string = 'tabsOrder';
   static readonly UseDarkMode: string = 'useDarkMode';
 }
diff --git a/packages/owner-app/src/components/Attribute/AttributeFields/AttributeFields.tsx b/packages/owner-app/src/components/Attribute/AttributeFields/AttributeFields.tsx
index ce76c9e0..f648ef1b 100644
--- a/packages/owner-app/src/components/Attribute/AttributeFields/AttributeFields.tsx
+++ b/packages/owner-app/src/components/Attribute/AttributeFields/AttributeFields.tsx
@@ -3,6 +3,7 @@ import {
   HomePageConfig,
   HomePageFields,
   HomePageTheme,
+  HomePageThemeFields,
 } from '@youfoundation/js-lib/public';
 import {
   BirthdayFields,
@@ -32,6 +33,7 @@ import ThemeSelector from '../../Form/ThemeSelector';
 import ImageSelector from '@youfoundation/common-app/src/form/image/ImageSelector';
 import { ThumbnailInstruction } from '@youfoundation/js-lib/core';
 import { generateDisplayLocation, generateDisplayName } from '@youfoundation/js-lib/helpers';
+import FaviconSelector from '../../Form/FaviconSelector';
 
 const profileInstructionThumbSizes: ThumbnailInstruction[] = [
   { quality: 85, width: 250, height: 250 },
@@ -53,9 +55,6 @@ const AttributeFields = ({
 }) => {
   const debouncedChange = useMemo(() => debounce(onChange, 500), [onChange]);
 
-  // Home consts:
-  const DEFAULT_TABS_ORDER = ['Posts', 'Links', 'About', 'Connections'];
-
   switch (attribute.type) {
     case BuiltInAttributes.Name:
       return <NameAttributeEditor attribute={attribute} onChange={debouncedChange} />;
@@ -301,102 +300,10 @@ const AttributeFields = ({
       );
       break;
     case HomePageAttributes.HomePage:
-      return (
-        <>
-          <div className="mb-5">
-            <Label htmlFor="headerImage">{t('Background photo')}</Label>
-            <ImageSelector
-              id="headerImage"
-              name={HomePageFields.HeaderImageId}
-              defaultValue={attribute.data?.[HomePageFields.HeaderImageId] ?? ''}
-              onChange={(e) =>
-                onChange({ target: { name: e.target.name, value: e.target.value?.fileId } })
-              }
-              acl={attribute.acl}
-              targetDrive={GetTargetDriveFromProfileId(HomePageConfig.DefaultDriveId)}
-              sizeClass={`${
-                !attribute.data?.[HomePageFields.HeaderImageId]
-                  ? 'aspect-[16/9] md:aspect-[5/1]'
-                  : ''
-              }  w-full object-cover`}
-              thumbInstructions={headerInstructionThumbSizes}
-            />
-          </div>
-          <div className="mb-5">
-            <Label htmlFor="tagLine">{t('Headline')}</Label>
-            <Input
-              id="tagLine"
-              name="tagLine"
-              defaultValue={attribute.data?.['tagLine'] ?? ''}
-              onChange={debouncedChange}
-            />
-          </div>
-          <div className="mb-5">
-            <Label htmlFor="leadText">{t('About')}</Label>
-            <Textarea
-              id="leadText"
-              name="leadText"
-              defaultValue={attribute.data?.['leadText'] ?? ''}
-              onChange={debouncedChange}
-            />
-          </div>
-        </>
-      );
+      return <HomeAttributeEditor attribute={attribute} onChange={debouncedChange} />;
       break;
     case HomePageAttributes.Theme:
-      return (
-        <>
-          <div className="mb-5">
-            <Label htmlFor="themeId">{t('Theme')}</Label>
-            <ThemeSelector
-              name="themeId"
-              defaultValue={attribute.data?.['themeId'] ?? ''}
-              onChange={debouncedChange}
-            />
-          </div>
-          <div className="mb-5">
-            <Label htmlFor="colors">{t('Color set')}</Label>
-            <ColorThemeSelector
-              id="colors"
-              name="colors"
-              defaultValue={attribute.data?.['colors'] ?? ''}
-              onChange={debouncedChange}
-            />
-          </div>
-          {(attribute.data?.['themeId'] === HomePageTheme.SocialClassic.toString() ||
-            attribute.data?.['themeId'] === HomePageTheme.ContentProducer.toString()) && (
-            <>
-              <div className="mb-5">
-                <Label htmlFor="tabs">{t('Show tabs')}</Label>
-                <Select
-                  id="tabs"
-                  name="tabs"
-                  defaultValue={attribute.data?.['tabs'] ?? ''}
-                  onChange={debouncedChange}
-                >
-                  <option>{t('No')}</option>
-                  <option value={'true'}>{t('Yes')}</option>
-                </Select>
-              </div>
-              {attribute.data?.['tabs'] === 'true' && (
-                <div className="mb-5">
-                  <Label htmlFor="tabs-order">{t('Tabs Order')}</Label>
-                  <Order
-                    elements={
-                      (attribute.data?.['tabsOrder'] &&
-                        attribute.data?.['tabsOrder'].length === DEFAULT_TABS_ORDER.length &&
-                        attribute.data['tabsOrder']) ??
-                      DEFAULT_TABS_ORDER
-                    }
-                    name="tabsOrder"
-                    onChange={debouncedChange}
-                  />
-                </div>
-              )}
-            </>
-          )}
-        </>
-      );
+      return <ThemeAttributeEditor attribute={attribute} onChange={debouncedChange} />;
       break;
     default:
       return (
@@ -625,4 +532,129 @@ const PhoneAttributeEditor = ({
   );
 };
 
+const HomeAttributeEditor = ({
+  attribute,
+  onChange,
+}: {
+  attribute: AttributeVm;
+  onChange: (e: { target: { value: unknown; name: string } }) => void;
+}) => {
+  return (
+    <>
+      <div className="mb-5">
+        <Label htmlFor="headerImage">{t('Background photo')}</Label>
+        <ImageSelector
+          id="headerImage"
+          name={HomePageFields.HeaderImageId}
+          defaultValue={attribute.data?.[HomePageFields.HeaderImageId] ?? ''}
+          onChange={(e) =>
+            onChange({ target: { name: e.target.name, value: e.target.value?.fileId } })
+          }
+          acl={attribute.acl}
+          targetDrive={GetTargetDriveFromProfileId(HomePageConfig.DefaultDriveId)}
+          sizeClass={`${
+            !attribute.data?.[HomePageFields.HeaderImageId] ? 'aspect-[16/9] md:aspect-[5/1]' : ''
+          }  w-full object-cover`}
+          thumbInstructions={headerInstructionThumbSizes}
+        />
+      </div>
+      <div className="mb-5">
+        <Label htmlFor="tagLine">{t('Headline')}</Label>
+        <Input
+          id="tagLine"
+          name="tagLine"
+          defaultValue={attribute.data?.['tagLine'] ?? ''}
+          onChange={onChange}
+        />
+      </div>
+      <div className="mb-5">
+        <Label htmlFor="leadText">{t('About')}</Label>
+        <Textarea
+          id="leadText"
+          name="leadText"
+          defaultValue={attribute.data?.['leadText'] ?? ''}
+          onChange={onChange}
+        />
+      </div>
+    </>
+  );
+};
+
+const ThemeAttributeEditor = ({
+  attribute,
+  onChange,
+}: {
+  attribute: AttributeVm;
+  onChange: (e: { target: { value: unknown; name: string } }) => void;
+}) => {
+  // Home consts:
+  const DEFAULT_TABS_ORDER = ['Posts', 'Links', 'About', 'Connections'];
+
+  return (
+    <>
+      <div className="mb-5">
+        <Label htmlFor={HomePageThemeFields.ThemeId}>{t('Theme')}</Label>
+        <ThemeSelector
+          name={HomePageThemeFields.ThemeId}
+          defaultValue={attribute.data?.[HomePageThemeFields.ThemeId] ?? ''}
+          onChange={onChange}
+        />
+      </div>
+      <div className="mb-5">
+        <Label htmlFor={HomePageThemeFields.Colors}>{t('Color set')}</Label>
+        <ColorThemeSelector
+          id={HomePageThemeFields.Colors}
+          name={HomePageThemeFields.Colors}
+          defaultValue={attribute.data?.[HomePageThemeFields.Colors] ?? ''}
+          onChange={onChange}
+        />
+      </div>
+      {(attribute.data?.[HomePageThemeFields.ThemeId] === HomePageTheme.SocialClassic.toString() ||
+        attribute.data?.[HomePageThemeFields.ThemeId] ===
+          HomePageTheme.ContentProducer.toString()) && (
+        <>
+          <div className="mb-5">
+            <Label htmlFor="tabs">{t('Show tabs')}</Label>
+            <Select
+              id="tabs"
+              name={HomePageThemeFields.Tabs}
+              defaultValue={attribute.data?.[HomePageThemeFields.Tabs] ?? ''}
+              onChange={onChange}
+            >
+              <option>{t('No')}</option>
+              <option value={'true'}>{t('Yes')}</option>
+            </Select>
+          </div>
+          {attribute.data?.[HomePageThemeFields.Tabs] === 'true' && (
+            <div className="mb-5">
+              <Label htmlFor={HomePageThemeFields.TabsOrder}>{t('Tabs Order')}</Label>
+              <Order
+                elements={
+                  (attribute.data?.[HomePageThemeFields.TabsOrder] &&
+                    attribute.data?.[HomePageThemeFields.TabsOrder].length ===
+                      DEFAULT_TABS_ORDER.length &&
+                    attribute.data[HomePageThemeFields.TabsOrder]) ??
+                  DEFAULT_TABS_ORDER
+                }
+                name={HomePageThemeFields.TabsOrder}
+                onChange={onChange}
+              />
+            </div>
+          )}
+        </>
+      )}
+      <div className="mb-5">
+        <Label htmlFor={HomePageThemeFields.Favicon}>{t('Favicon')}</Label>
+        <FaviconSelector
+          name={HomePageThemeFields.Favicon}
+          defaultValue={attribute.data?.[HomePageThemeFields.Favicon] ?? ''}
+          acl={attribute.acl}
+          onChange={(e) => onChange({ target: { name: e.target.name, value: e.target.value } })}
+          targetDrive={GetTargetDriveFromProfileId(HomePageConfig.DefaultDriveId)}
+        />
+      </div>
+    </>
+  );
+};
+
 export default AttributeFields;
diff --git a/packages/owner-app/src/components/Form/FaviconSelector.tsx b/packages/owner-app/src/components/Form/FaviconSelector.tsx
new file mode 100644
index 00000000..061e7e5a
--- /dev/null
+++ b/packages/owner-app/src/components/Form/FaviconSelector.tsx
@@ -0,0 +1,105 @@
+import { Block, EmojiSelector, t } from '@youfoundation/common-app';
+import ImageSelector from '@youfoundation/common-app/src/form/image/ImageSelector';
+import { AccessControlList, SecurityGroupType, TargetDrive } from '@youfoundation/js-lib/core';
+import { ReactNode } from 'react';
+
+interface FaviconSelectorProps {
+  name?: string;
+  defaultValue: unknown;
+  acl: AccessControlList;
+  targetDrive: TargetDrive;
+  onChange: (event: { target: { name: string; value: unknown | undefined } }) => void;
+}
+
+const FaviconSelector = ({ onChange, defaultValue, ...props }: FaviconSelectorProps) => {
+  const valueObject: { fileId: string } | { emoji: string } | undefined = defaultValue as
+    | { fileId: string }
+    | { emoji: string }
+    | undefined;
+
+  return (
+    <div className="grid grid-cols-2 gap-2 py-5 text-center text-gray-500 md:grid-cols-3 md:gap-5">
+      <FaviconOption isActive={valueObject && 'emoji' in valueObject} label={t('Emoji')}>
+        <EmojiSelector
+          className="mx-auto text-2xl"
+          onInput={(val) =>
+            onChange({
+              target: {
+                name: props.name || '',
+                value: { emoji: val },
+              },
+            })
+          }
+          defaultValue={valueObject && 'emoji' in valueObject ? valueObject.emoji : undefined}
+        />
+      </FaviconOption>
+      <FaviconOption isActive={valueObject && 'fileId' in valueObject} label={t('Custom image')}>
+        <div className="mx-auto">
+          <ImageSelector
+            {...props}
+            defaultValue={valueObject && 'fileId' in valueObject ? valueObject.fileId : undefined}
+            acl={{ requiredSecurityGroup: SecurityGroupType.Anonymous }}
+            onChange={(e) => {
+              onChange({
+                target: {
+                  name: e.target.name,
+                  value: e.target.value?.fileId
+                    ? {
+                        fileId: e.target.value.fileId,
+                      }
+                    : undefined,
+                },
+              });
+            }}
+            maxHeight={512}
+            maxWidth={512}
+            expectedAspectRatio={1}
+            sizeClass="aspect-square w-[10rem]"
+          />
+        </div>
+      </FaviconOption>
+      <FaviconOption
+        isActive={!valueObject}
+        label={t('None')}
+        onClick={() =>
+          onChange({
+            target: {
+              name: props.name || '',
+              value: undefined,
+            },
+          })
+        }
+      >
+        <Block className="mx-auto h-auto w-full max-w-[5rem]" />
+      </FaviconOption>
+    </div>
+  );
+};
+
+const FaviconOption = ({
+  children,
+  isActive,
+  label,
+  onClick,
+}: {
+  children: ReactNode;
+  isActive?: boolean;
+  label: string;
+  onClick?: () => void;
+}) => {
+  return (
+    <div
+      className={`flex flex-col rounded-md border-2 p-2 ${
+        isActive
+          ? 'border-indigo-500 bg-white dark:bg-black'
+          : 'border-slate-100 bg-slate-100 dark:border-slate-900 dark:bg-slate-900'
+      }`}
+      onClick={onClick}
+    >
+      <div className="flex flex-grow flex-col justify-center">{children}</div>
+      <p>{label}</p>
+    </div>
+  );
+};
+
+export default FaviconSelector;
diff --git a/packages/owner-app/src/templates/Profiles/ProfileDetails/ProfileDetails.tsx b/packages/owner-app/src/templates/Profiles/ProfileDetails/ProfileDetails.tsx
index 7cda6327..92b591ee 100644
--- a/packages/owner-app/src/templates/Profiles/ProfileDetails/ProfileDetails.tsx
+++ b/packages/owner-app/src/templates/Profiles/ProfileDetails/ProfileDetails.tsx
@@ -1,4 +1,4 @@
-import { getNewId } from '@youfoundation/js-lib/helpers';
+import { getNewId, stringGuidsEqual } from '@youfoundation/js-lib/helpers';
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -21,7 +21,7 @@ import { Label } from '@youfoundation/common-app';
 import { ErrorNotification } from '@youfoundation/common-app';
 import { Trash } from '@youfoundation/common-app';
 import { PageMeta } from '../../../components/ui/PageMeta/PageMeta';
-import { ProfileSection } from '@youfoundation/js-lib/profile';
+import { BuiltInProfiles, ProfileSection } from '@youfoundation/js-lib/profile';
 
 const ProfileDetails = () => {
   const {
@@ -88,27 +88,29 @@ const ProfileDetails = () => {
             <ActionButton onClick={() => setIsOpenEdit(true)} icon={Pencil}>
               {t('Edit Profile')}
             </ActionButton>
-            <ActionGroup
-              type="secondary"
-              size="square"
-              options={[
-                {
-                  label: t('Remove profile'),
-                  onClick: async () => {
-                    await removeProfile(profileDef.profileId);
-                    navigate(-1);
-                  },
-                  confirmOptions: {
-                    title: t('Remove profile'),
-                    body: t(
-                      'Are you sure you want to remove this profile, this action cannot be undone. All data within this profile will be removed.'
-                    ),
-                    buttonText: t('Remove'),
+            {stringGuidsEqual(BuiltInProfiles.StandardProfileId, profileDef.profileId) ? null : (
+              <ActionGroup
+                type="secondary"
+                size="square"
+                options={[
+                  {
+                    label: t('Remove profile'),
+                    onClick: async () => {
+                      await removeProfile(profileDef.profileId);
+                      navigate(-1);
+                    },
+                    confirmOptions: {
+                      title: t('Remove profile'),
+                      body: t(
+                        'Are you sure you want to remove this profile, this action cannot be undone. All data within this profile will be removed.'
+                      ),
+                      buttonText: t('Remove'),
+                    },
+                    icon: Trash,
                   },
-                  icon: Trash,
-                },
-              ]}
-            ></ActionGroup>
+                ]}
+              ></ActionGroup>
+            )}
           </>
         }
         breadCrumbs={[
diff --git a/packages/public-app/index.html b/packages/public-app/index.html
index dfb7b9a1..deb1654d 100644
--- a/packages/public-app/index.html
+++ b/packages/public-app/index.html
@@ -4,12 +4,12 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
+    <!-- Set from Layout.tsx -->
+    <!-- <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" /> -->
     <link rel="manifest" href="/icons/site.webmanifest" />
     <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5" />
-    <link rel="shortcut icon" href="/icons/favicon.ico" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="msapplication-config" content="/icons/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
diff --git a/packages/public-app/src/components/ui/Layout/Layout.tsx b/packages/public-app/src/components/ui/Layout/Layout.tsx
index 44654ff6..523fdbfd 100644
--- a/packages/public-app/src/components/ui/Layout/Layout.tsx
+++ b/packages/public-app/src/components/ui/Layout/Layout.tsx
@@ -1,7 +1,14 @@
-import { FC, ReactNode, Suspense, lazy } from 'react';
+import { FC, ReactNode, Suspense, lazy, useEffect } from 'react';
 import useTheme from '../../../hooks/theme/useTheme';
 import useAuth from '../../../hooks/auth/useAuth';
 import { ScrollRestoration } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
+import { useImage } from '@youfoundation/common-app';
+import { GetTargetDriveFromProfileId } from '@youfoundation/js-lib/profile';
+import { HomePageConfig } from '@youfoundation/js-lib/public';
+
+const faviconSvg = (emoji: string) =>
+  `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${emoji}</text></svg>`;
 
 const Sidenav = lazy(() =>
   import('@youfoundation/common-app').then((commonApp) => ({ default: commonApp.Sidenav }))
@@ -30,7 +37,16 @@ const Layout: FC<LayoutProps> = ({ children }) => {
 };
 
 export const NoLayout: FC<LayoutProps> = ({ children }) => {
-  const { colors } = useTheme();
+  const { colors, favicon } = useTheme();
+  const { data: imageData } = useImage(
+    undefined,
+    favicon && 'fileId' in favicon ? favicon.fileId : undefined,
+    GetTargetDriveFromProfileId(HomePageConfig.DefaultDriveId),
+    undefined
+  ).fetch;
+
+  const emojiFavicon = favicon && 'emoji' in favicon ? faviconSvg(favicon.emoji) : undefined;
+
   return (
     <>
       <style type="text/css">
@@ -46,6 +62,20 @@ export const NoLayout: FC<LayoutProps> = ({ children }) => {
           }`}
         {`html.dark { background-color: rgba(var(--color-page-background)); }`}
       </style>
+      <Helmet>
+        {imageData || emojiFavicon ? (
+          <>
+            {/* <meta name="favicon" content={faviconId} /> */}
+            <link rel="shortcut icon" href={imageData?.url || emojiFavicon}></link>
+          </>
+        ) : (
+          <>
+            <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
+            <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
+            <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
+          </>
+        )}
+      </Helmet>
       {children}
     </>
   );
diff --git a/packages/public-app/src/hooks/theme/useTheme.ts b/packages/public-app/src/hooks/theme/useTheme.ts
index 36ccb36f..b4c043ff 100644
--- a/packages/public-app/src/hooks/theme/useTheme.ts
+++ b/packages/public-app/src/hooks/theme/useTheme.ts
@@ -6,6 +6,7 @@ interface TemplateSettings {
   isTabs: boolean;
   tabsOrder: string[];
   colors: { light: Record<string, string>; dark: Record<string, string> };
+  favicon?: { fileId: string } | { emoji: string } | undefined;
 }
 
 const isRecord = (obj: unknown): obj is Record<string, unknown> => {
@@ -56,8 +57,9 @@ const useTheme = () => {
     'dark' in (templateSettings.colors as Record<string, unknown>)
       ? templateSettings.colors
       : DEFAULT_SETTINGS.colors;
+  const favicon = templateSettings.favicon;
 
-  return { themeId, isTabs, tabsOrder, colors } as TemplateSettings;
+  return { themeId, isTabs, tabsOrder, colors, favicon } as TemplateSettings;
 };
 
 export default useTheme;