Search code examples
next.jsapple-touch-icon

Why am I getting warning "The 'apple-touch-icon' link element should be specified in the '<head>'." in my Next.js 13 app?

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: The 'apple-touch-icon' link element should be specified in the '<head>'. Microsoft Edge Tools (apple-touch-icons). To me, it looks like it's already in the head, so I don't understand why it's giving that warning.

I know the docs are saying that I don't need to have the image there but I have line <link rel="apple-touch-icon" href="/icon.png"></link> for the PWA as I've read that it's necessary to have it for PWA to work correctly.

Here is the screenshot: enter image description here

Solution

  • The warning you're receiving about the 'apple-touch-icon' link element that should be specified in the '' is likely coming from Microsoft Edge Tools and it's related to the placement of the 'apple-touch-icon' link element in your HTML code.

    In your code, you are including the 'apple-touch-icon' link element within the 'head' section of your HTML, which is correct. Here's the relevant part of your code:

    <head>
  <link rel="manifest" href="/manifest.json" />
  <link rel="apple-touch-icon" href="/icon.png"></link>
  <meta name="theme-color" content="#fff" />
</head>

    It's correctly placed within the 'head' section. However, sometimes static analysis tools may not fully understand certain aspects of web development, and false positives can occur. In this case, it seems like a false positive because you are correctly placing the 'apple-touch-icon' link element in the 'head' section.

    If your PWA is functioning correctly and you have followed the PWA guidelines, you can safely ignore this warning. It's always a good practice to double-check your PWA functionality in different browsers to ensure that everything is working as expected.

    Hope it helps.