favicon file overwrites icons defined in metadata #55767

KirillTregubov · 2023-09-21T21:42:34Z

Link to the code that reproduces this issue

https://github.com/KirillTregubov/nextjs-icons-issue

To Reproduce

Start the application in development (next dev)
Inspect Source
Verify that <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"> is the only icon in <head>

Current vs. Expected behavior

Following the steps from the previous section, I expect all icons defined in app/layout.tsx under export const metadata to appear in the <head> element. But I observe that only <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"> (the favicon) is present.

In other words, my goal is to use both your recommended approach of including a favicon.ico file in the correct place, and defining additional (read: different) icons using the metadata export.

This correct behaviour can be observed on the works branch, which shows that the issue is a direct result of the favicon.ico file handling in app. I realize that the reproduction template does not place the favicon in app, but both the default template and the docs instruct users to place it there.

Verify canary release

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

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 18.17.1
      npm: N/A
      Yarn: N/A
      pnpm: 8.7.5
    Relevant Packages:
      next: 13.5.3-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Metadata (metadata, generateMetadata, next/head)

Additional context

I find it inconsistent that the reproduction-template includes the favicon.ico in the public folder instead of the app directory.

Also please note that your next info command has a bug. I am actually on Windows 11 Home, but it says I am on Windows 10.

The text was updated successfully, but these errors were encountered:

hipdev · 2023-09-21T22:57:11Z

Hello, you don't need to pass the icons in the Metadata object.
As the documentation says, you just have to put them at the root of the app directory, just make sure to use appropriate icons and give them a name according to the type of icon you want to generate. Nextjs will automatically evaluate the files' metadata and create the appropriate tags within the head.

In the branch that you have as "works", you are trying to manually tell the icons, you just need to add these to the public directory, but I think it is better that you follow the option that is officially recommend in the documentation.

KirillTregubov · 2023-09-22T05:16:24Z

Hello, you don't need to pass the icons in the Metadata object. As the documentation says, you just have to put them at the root of the app directory, just make sure to use appropriate icons and give them a name according to the type of icon you want to generate. Nextjs will automatically evaluate the files' metadata and create the appropriate tags within the head.

In the branch that you have as "works", you are trying to manually tell the icons, you just need to add these to the public directory, but I think it is better that you follow the option that is officially recommend in the documentation.

Hey @hipdev! I originally ran into this issue because I was trying to create a link to an SVG mask-icon icon used by Safari for the favicon and touch bar (at least in Safari 16). Even if I was to follow your advice and use their filesystem-based approach, they currently only support setting the favicon (not applicable), icon (which replaces the favicon in Chrome) or apple-touch-icon (which is a separate icon used for Safari "favourites" and the iOS bookmark icon) this way.

What I was trying to do, and the underlying bug I'm reporting, is that I wanted to use both their recommended approach with the favicon.ico file and define additional icons using the Metadata object. However, this results in only the favicon being included in the generated <head> element.

hipdev · 2023-09-22T06:03:31Z

Ohh, now I get it, thanks for clarifying @KirillTregubov 😄, and you're totally right, for the time being there is no a way to mix them, I checked locally, so in order to have a mask-icon you will have to move any default supported icons inside the app folder to the public folder and use the Metadata object only.

I found this about the topic.
#48392

This is a good issue, would be better to allow a mix of both.

Rubeanie · 2023-10-04T12:31:09Z

Hello, you don't need to pass the icons in the Metadata object. As the documentation says, you just have to put them at the root of the app directory, just make sure to use appropriate icons and give them a name according to the type of icon you want to generate. Nextjs will automatically evaluate the files' metadata and create the appropriate tags within the head.
In the branch that you have as "works", you are trying to manually tell the icons, you just need to add these to the public directory, but I think it is better that you follow the option that is officially recommend in the documentation.

Hey @hipdev! I originally ran into this issue because I was trying to create a link to an SVG mask-icon icon used by Safari for the favicon and touch bar (at least in Safari 16). Even if I was to follow your advice and use their filesystem-based approach, they currently only support setting the favicon (not applicable), icon (which replaces the favicon in Chrome) or apple-touch-icon (which is a separate icon used for Safari "favourites" and the iOS bookmark icon) this way.

What I was trying to do, and the underlying bug I'm reporting, is that I wanted to use both their recommended approach with the favicon.ico file and define additional icons using the Metadata object. However, this results in only the favicon being included in the generated <head> element.

It's not a perfect solution, but my workaround involved setting it on the client side through JavaScript.

'use client';

import { useEffect } from "react";

export default function Client() {
  useEffect(() => {
    let link = document.querySelector("link[rel='mask-icon']");
    if (!link) {
      link = document.createElement('link');
      link.rel = 'mask-icon';
      link.href = '/pwa/safari-pinned-tab.svg';
      link.color = "#ed5f68";
      document.head.appendChild(link);
    }
  }, []);

  return null;
}

GiantappMan · 2023-10-19T09:30:24Z

I hope to point favicon.ico to the CDN address, because the serverless service I use will waste a calculation if I request ip/faviocn.ico. Is there any solution to solve this?

- requires passing icons in metadata oject instead of via app router: vercel/next.js#55767 - sets custom icon for safari pinned tab vs. generic monogram icon

silash35 · 2024-05-24T02:56:00Z

Still having the same problem. I'm on Next.js version 14.2.3

The following code

export const metadata: Metadata = {
  ...
  icons: {
    shortcut: "/favicon.ico",
    other: {
      rel: "mask-icon",
      url: "/icons/safari-pinned-tab.svg",
      color: "#f45d22",
    },
  },
};

has no effect. Just because there are icons in the app folder, it ignores those in the metadata.

rubby-c · 2024-08-01T15:07:52Z

Still a problem, the metadata is straight up ignored even if there are no icon files in the app folder.

### What Support merging the static metadata file conventions `favicon.ico` with other customized metadata icon from the module export. ### Why `favicon.ico` should be displayed everywhere as it's the icon representative of the website for all pages. Any customized `icon` in metadata export `export const metadata` or `export function generateMetadata()` shouldn't override the `favicon.ico` file convention. Fixes #55767 --------- Co-authored-by: hrmny <8845940+ForsakenHarmony@users.noreply.github.com>

Support merging the static metadata file conventions `favicon.ico` with other customized metadata icon from the module export. `favicon.ico` should be displayed everywhere as it's the icon representative of the website for all pages. Any customized `icon` in metadata export `export const metadata` or `export function generateMetadata()` shouldn't override the `favicon.ico` file convention. Fixes #55767 --------- Co-authored-by: hrmny <8845940+ForsakenHarmony@users.noreply.github.com>

github-actions · 2024-08-22T00:04:28Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

### What Support merging the static metadata file conventions `favicon.ico` with other customized metadata icon from the module export. ### Why `favicon.ico` should be displayed everywhere as it's the icon representative of the website for all pages. Any customized `icon` in metadata export `export const metadata` or `export function generateMetadata()` shouldn't override the `favicon.ico` file convention. Fixes #55767 --------- Co-authored-by: hrmny <8845940+ForsakenHarmony@users.noreply.github.com>

KirillTregubov added the bug Issue was opened via the bug report template. label Sep 21, 2023

fvrests added a commit to fvrests/herbivorous that referenced this issue Feb 25, 2024

feat: add mask-icon

1a911e0

- requires passing icons in metadata oject instead of via app router: vercel/next.js#55767 - sets custom icon for safari pinned tab vs. generic monogram icon

huozhi self-assigned this Aug 6, 2024

huozhi mentioned this issue Aug 6, 2024

Fix favicon merging with customized icons #67982

Merged

huozhi closed this as completed in #67982 Aug 7, 2024

BryanAM mentioned this issue Aug 14, 2024

iOS icons and meta tags BryanAM/sajeon#65

Closed

github-actions bot added the locked label Aug 22, 2024

github-actions bot locked as resolved and limited conversation to collaborators Aug 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

favicon file overwrites icons defined in metadata #55767

favicon file overwrites icons defined in metadata #55767

KirillTregubov commented Sep 21, 2023 •

edited

Loading

hipdev commented Sep 21, 2023

KirillTregubov commented Sep 22, 2023

hipdev commented Sep 22, 2023

Rubeanie commented Oct 4, 2023

GiantappMan commented Oct 19, 2023

silash35 commented May 24, 2024

rubby-c commented Aug 1, 2024

github-actions bot commented Aug 22, 2024

favicon file overwrites icons defined in metadata #55767

favicon file overwrites icons defined in metadata #55767

Comments

KirillTregubov commented Sep 21, 2023 • edited Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

Which area(s) are affected? (Select all that apply)

Additional context

hipdev commented Sep 21, 2023

KirillTregubov commented Sep 22, 2023

hipdev commented Sep 22, 2023

Rubeanie commented Oct 4, 2023

GiantappMan commented Oct 19, 2023

silash35 commented May 24, 2024

rubby-c commented Aug 1, 2024

github-actions bot commented Aug 22, 2024

KirillTregubov commented Sep 21, 2023 •

edited

Loading