diff --git a/packages/nuxt-ripple/components/TideBaseLayout.vue b/packages/nuxt-ripple/components/TideBaseLayout.vue
index db09e57c4c..79be04bf6e 100644
--- a/packages/nuxt-ripple/components/TideBaseLayout.vue
+++ b/packages/nuxt-ripple/components/TideBaseLayout.vue
@@ -170,8 +170,8 @@ const footerNav = computed(() => {
  */
 await nuxtApp.callHook('tide:page', props)
 
-useTideSiteTheme(props.site)
+const theme = useTideSiteTheme(props.site)
 useTideHideAlerts()
 useTideSiteMeta(props, nuxtApp?.$app_origin)
-useTideFavicons(props.site)
+useTideFavicons(props.site, theme)
 </script>
diff --git a/packages/nuxt-ripple/composables/use-tide-favicons.ts b/packages/nuxt-ripple/composables/use-tide-favicons.ts
index acdacd7137..0e64fe2671 100644
--- a/packages/nuxt-ripple/composables/use-tide-favicons.ts
+++ b/packages/nuxt-ripple/composables/use-tide-favicons.ts
@@ -1,23 +1,21 @@
 import { TideSiteData } from '../types'
 
-export default (site: TideSiteData) => {
-  const theme = useAppConfig()?.ripple?.theme
+export default (site: TideSiteData, theme: any) => {
   const { public: config } = useRuntimeConfig()
 
   let link = []
-  const favicon = site.favicon?.src ?? '/favicon.png'
-  const appIcon = site.appIcon?.src ?? '/app-icon.png'
+  const siteUrl = config?.siteUrl || ''
   const themeColour = theme?.['rpl-clr-primary'] ?? '#ffffff'
 
   const manifest = {
-    id: config?.siteUrl,
+    id: siteUrl,
     name: site?.name,
     short_name: site?.shortName,
     description: site?.slogan?.replace(/<[^>]*>/g, ''),
-    start_url: config?.siteUrl,
+    start_url: siteUrl,
     icons: [
       {
-        src: appIcon,
+        src: site.appIcon?.src ?? siteUrl + (site.appIcon?.android || ''),
         sizes: 'any'
       }
     ],
@@ -28,7 +26,7 @@ export default (site: TideSiteData) => {
 
   link.push({
     rel: 'apple-touch-icon',
-    href: appIcon
+    href: site.appIcon?.src ?? site.appIcon?.apple
   })
 
   link.push({
@@ -38,7 +36,7 @@ export default (site: TideSiteData) => {
 
   link.push({
     rel: 'icon',
-    href: favicon
+    href: site.favicon?.src
   })
 
   useHead({ link, meta: [{ name: 'theme-color', content: themeColour }] })
diff --git a/packages/nuxt-ripple/composables/use-tide-site-theme.ts b/packages/nuxt-ripple/composables/use-tide-site-theme.ts
index 6fb873b996..53e5e7f889 100644
--- a/packages/nuxt-ripple/composables/use-tide-site-theme.ts
+++ b/packages/nuxt-ripple/composables/use-tide-site-theme.ts
@@ -22,4 +22,6 @@ export default (site) => {
       ]
     })
   }
+
+  return siteTheme
 }
diff --git a/packages/nuxt-ripple/mapping/site/index.ts b/packages/nuxt-ripple/mapping/site/index.ts
index ec433636ea..f4c19df8d4 100644
--- a/packages/nuxt-ripple/mapping/site/index.ts
+++ b/packages/nuxt-ripple/mapping/site/index.ts
@@ -20,8 +20,13 @@ export default {
       process.env.NODE_ENV === 'development' ? src : undefined,
     siteAlerts: siteAlertsMapping,
     slogan: (src: any) => getBodyFromField(src, 'field_site_slogan'),
-    favicon: (src: any) => getImageFromField(src, 'field_site_favicon'),
-    appIcon: (src: any) => getImageFromField(src, 'field_site_app_icon'),
+    favicon: (src: any) =>
+      getImageFromField(src, 'field_site_favicon', { src: '/favicon.ico' }),
+    appIcon: (src: any) =>
+      getImageFromField(src, 'field_site_app_icon', {
+        apple: '/apple-touch-icon.png',
+        android: '/android-chrome-512x512.png'
+      }),
     siteLogo: (src: any) => {
       if (src.field_site_logo) {
         return {
diff --git a/packages/nuxt-ripple/public/android-chrome-512x512.png b/packages/nuxt-ripple/public/android-chrome-512x512.png
new file mode 100644
index 0000000000..0ee3346778
Binary files /dev/null and b/packages/nuxt-ripple/public/android-chrome-512x512.png differ
diff --git a/packages/nuxt-ripple/public/app-icon.png b/packages/nuxt-ripple/public/app-icon.png
deleted file mode 100644
index cdae6c10a6..0000000000
Binary files a/packages/nuxt-ripple/public/app-icon.png and /dev/null differ
diff --git a/packages/nuxt-ripple/public/apple-touch-icon.png b/packages/nuxt-ripple/public/apple-touch-icon.png
new file mode 100644
index 0000000000..3250b474db
Binary files /dev/null and b/packages/nuxt-ripple/public/apple-touch-icon.png differ
diff --git a/packages/nuxt-ripple/public/favicon.ico b/packages/nuxt-ripple/public/favicon.ico
new file mode 100644
index 0000000000..5a0d507110
Binary files /dev/null and b/packages/nuxt-ripple/public/favicon.ico differ
diff --git a/packages/nuxt-ripple/public/favicon.png b/packages/nuxt-ripple/public/favicon.png
deleted file mode 100644
index 00294e9bb1..0000000000
Binary files a/packages/nuxt-ripple/public/favicon.png and /dev/null differ
diff --git a/packages/nuxt-ripple/types.d.ts b/packages/nuxt-ripple/types.d.ts
index 0d76404c73..6d4d9eb95e 100644
--- a/packages/nuxt-ripple/types.d.ts
+++ b/packages/nuxt-ripple/types.d.ts
@@ -29,9 +29,9 @@ export interface TideSiteData {
     height: string
   }
   appIcon?: {
-    src: string
-    width: string
-    height: string
+    src?: string
+    apple?: string
+    android?: string
   }
   acknowledgementHeader?: string
   acknowledgementFooter: string
diff --git a/packages/ripple-tide-api/src/utils/mapping-utils.ts b/packages/ripple-tide-api/src/utils/mapping-utils.ts
index b1a482b18d..92cc4638a2 100644
--- a/packages/ripple-tide-api/src/utils/mapping-utils.ts
+++ b/packages/ripple-tide-api/src/utils/mapping-utils.ts
@@ -56,10 +56,11 @@ export const removeDomainFromPath = (path: string) =>
 
 export const getImageFromField = (
   field: object,
-  path: string | string[]
+  path: string | string[],
+  fallback: any = null
 ): TideImageField | null => {
   const image = get(field, path)
-  return image ? getMediaImage(image) : null
+  return image ? getMediaImage(image) : fallback
 }
 
 export const getCardImageFromField = (
diff --git a/packages/ripple-tide-api/types.d.ts b/packages/ripple-tide-api/types.d.ts
index d185e7c0be..38055c2467 100644
--- a/packages/ripple-tide-api/types.d.ts
+++ b/packages/ripple-tide-api/types.d.ts
@@ -312,7 +312,8 @@ export function getField(
 ): any
 export function getImageFromField(
   field: string,
-  path: string | string[]
+  path: string | string[],
+  fallback?: any
 ): string
 export function getLinkFromField(field: any, path: string | string[]): any
 export function humanizeFilesize(fileSize: number): string