Next.js Discord

Discord Forum

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

Answered
West African Crocodile posted this in #help-forum
Open in Discord
West African CrocodileOP
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
Answered by Marchy
Don't add it there, just add an apple-icon.png to the app folder
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
View full answer

9 Replies

Marchy
Don't add it there, just add an apple-icon.png to the app folder
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
Answer
West African CrocodileOP
@Marchy yes, but I need it for the PWA
@West African Crocodile <@203709756689350656> yes, but I need it for the PWA
Marchy
I'm not sure what you mean? It should still apply for PWAs
West African CrocodileOP
like PWA is requiring to have that line
<link rel="apple-touch-icon" href="/icon.png"></link>
Marchy
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>"
/>
West African CrocodileOP
oh i see. thank you!!!