Next.js Discord

Discord Forum

Simple problem regarding the apple-icon called out in layout.tsx and manifest.json

Answered
Odorous house ant posted this in #help-forum
Open in Discord
Odorous house antOP
in my /public folder, where my manifest.json and sw.js files exist, i also keep my 180x180 png file for the icon on the home screen for my iphone

i get the error that the icon from the manifest isn't able to be found.

i've tried using the absolute path, ./public, /public, just public.....
Answered by Odorous house ant
the src route STARTS in public, so you don't use /public
View full answer

21 Replies

Odorous house antOP
here is my layout.tsx
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Mookies Exercise App",
  description: "Quick Utility to log exercise",
  generator: "Next.js",
  manifest: "/manifest.json",
  keywords: ["Exercise", "tracking", "workout"],
  authors: [
    { name: "Justin Young" },
    {
      name: "Justin Young",
      url: "https://github.com/jyoung4242",
    },
  ],
  themeColor: "#ffffff",
  colorScheme: "light",
  viewport: "minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover",
  icons: {
    apple: `/public/apple-icon-180.png`,
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <header>Hello Justin</header>
        <main>{children}</main>
      </body>
    </html>
  );
}
here's my file structure
i used the pwabuilder vscode extension to generate the other images
appleicon.png is the only image i've provided
it is 180x180
any suggestions on this will be appreciated
here's my manifest.json
{
  "name": "Excercise Tracker",
  "short_name": "exTracker",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/public/manifest-icon-192.maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/public/manifest-icon-192.maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/public/manifest-icon-512.maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/public/manifest-icon-512.maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "splash_pages": null
}
Odorous house antOP
Odorous house antOP
made progress on this
Odorous house antOP
the src route STARTS in public, so you don't use /public
Answer
Odorous house antOP
just /....
Odorous house antOP
only open issue i have left is controlling the splash screen on ios
if someone can assist with that, or i can make a new issue
from MDN
i got those fields established, but i get no splash screen
{
  "id": "/",
  "name": "Excercise Tracker",
  "description": "Quick Utility to log exercise",
  "short_name": "exTracker",
  "theme_color": "#2196f3",
  "background_color": "#ffffff",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/icon.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/portrait.png",
      "sizes": "1170x2532",
      "type": "image/png",
      "purpose": "any"
    }
  ],

  "screenshots": [
    {
      "src": "./portrait.png",
      "sizes": "1170x2532",
      "type": "image/png"
    }
  ]
}
this is now my manifest.json