#Why am I getting warning "The 'apple-touch-icon' link element should be specified in the '<head>'."

11 messages · Page 1 of 1 (latest)

autumn musk
#

This is my app/layout.tsx file:

import '../scss/style.scss';
import { Inter } from 'next/font/google';
import Provider from '@/app/components/Provider';
import ActiveWordsProvider from '@/app/components/ActiveWordsProvider';
import type { Metadata } from 'next';
import React, { ReactNode } from 'react';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'LangAI app',
  description: 'Adaptive language learning app',
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link rel="manifest" href="/manifest.json" />
        <link rel="apple-touch-icon" href="/icon.png"></link>
        <meta name="theme-color" content="#fff" />
      </head>
      <body className={inter.className} suppressHydrationWarning={true}>
        <div className="min-h-screen">
          <Provider>
            <ActiveWordsProvider>{children}</ActiveWordsProvider>
          </Provider>
        </div>
      </body>
    </html>
  );
}

This is the warning that it's giving me: 'meta[name=theme-color]' is not supported by Firefox, Firefox for Android, Opera.Microsoft Edge Toolscompat-api/html. To me, it looks like it's already in the head, so I don't understand why it's giving that warning.

Here is the screenshot:
https://i.stack.imgur.com/xSnyy.png

low forgeBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

lean linden
autumn musk
#

@lean linden yes, but I need it for the PWA

lean linden
autumn musk
#

like PWA is requiring to have that line

#

<link rel="apple-touch-icon" href="/icon.png"></link>

lean linden
#

That's exactly what adding the file to the folder does

#

It outputs this in your head

<link
  rel="apple-touch-icon"
  href="/apple-icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>
autumn musk
#

oh i see. thank you!!!