The location of the apple-icon in the doc is not working properly.

[newminkyung]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
    Binaries:
      Node: 16.16.0
      npm: 8.11.0
      Yarn: 1.22.17
      pnpm: 8.4.0
    Relevant packages:
      next: 13.4.1
      eslint-config-next: 13.4.1
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Metadata (metadata, generateMetadata, next/head)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/unruffled-darkness-q2l3ht

To Reproduce

1. locate apple-icon.png in /app
   • It works well
2. locate apple-icon.png in /app/**/apple-icon.png
   • It doesn't work

can't see apple-touch-icon

But in docs (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png)

apple-icon is valid on app/**/*

Describe the Bug

The location of the apple-icon in the document in Next.js is not working properly.

/app/apple-icon.png works fine, but /app/icons/apple-icon.png does not work properly.

Expected Behavior

apple-icon is valid on app/**/*

Which browser are you using? (if relevant)

Chrome 114.0.5735.198

How are you deploying your application? (if relevant)

next start

[darshanjain-entrepreneur]

Can you just explain little bit more what is the problem

[chan4est]

Ran into the same issue. Why do the docs still advise that the apple-icon can be in and folder inside apps?

[colevr1]

i put them in app folder and still cant see them in my code

[nashtheflash]

Adding both below worked for me on apple and pc based devices. If you just add apple-icon.png it won't show up on PC.
app/apple-icon.png
app/icon.png

[armando-andre]

It's happening to me as well on development. Don't know about production.

My icon is located at: /app/apple-icon.png

Not creating the html meta tag.

Next JS version 15.3.2

[nthieu1332002]

For me, place icons in public/ and define them via metadata is the safest way.

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "any" },
      { url: "/favicon-32x32.png", type: "image/png", sizes: "32x32" },
      { url: "/favicon-16x16.png", type: "image/png", sizes: "16x16" },
    ],
    apple: "/apple-touch-icon.png",
  },
};