Cannot set shortcut icon
Unanswered
Ice_man154 posted this in #help-forum
Hi, I'm actually fighting with a problem, i can't set the shortcut icon, i put the favicon.icon in /app directory and also in /public but it doesn't work. I also tried to set it manually in the metadata site but it still doesn't work:
I'm working with the latest version of next.js
icons: {
icon: "/favicon.ico",
shortcut: "/favicon.ico",
apple: "/favicon.ico"
}I'm working with the latest version of next.js
8 Replies
Transvaal lion
Should work if you put your icon in
/public and reference it using standard link tags. I simply put that in the root layout<head>
<link rel="icon" href="/favicon.ico" sizes="any" />
</head>@Ice_man154 Hi, I'm actually fighting with a problem, i can't set the shortcut icon, i put the favicon.icon in /app directory and also in /public but it doesn't work. I also tried to set it manually in the metadata site but it still doesn't work:
icons: {
icon: "/favicon.ico",
shortcut: "/favicon.ico",
apple: "/favicon.ico"
}
I'm working with the latest version of next.js
If you have a favicon.ico file in your app directory, delete it and the icon change will be applied to your project.
i'm using the
and it works generating the following in the head element:
this generated head content should show up in your development environment as well
i think it might not show up right away in google search if changed recently, i just tried it with a project that i updated earlier this week that didn't have the shortcut icon, and it's still cached for me, i think we need to trigger a google recrawl in search console for the new one to show up
export const metadata in one of my projects with: icons: {
icon: "/1659207769469684.jpg",
shortcut: "/1659207769469684.jpg",
apple: "/1659207769469684.jpg",
},and it works generating the following in the head element:
<link rel="shortcut icon" href="/1659207769469684.jpg">
<link rel="icon" href="/1659207769469684.jpg">
<link rel="apple-touch-icon" href="/1659207769469684.jpg">this generated head content should show up in your development environment as well
i think it might not show up right away in google search if changed recently, i just tried it with a project that i updated earlier this week that didn't have the shortcut icon, and it's still cached for me, i think we need to trigger a google recrawl in search console for the new one to show up
i triggered a google recrawl on my other site earlier this morning in the search console (https://search.google.com/search-console), and it was recrawled with the icon in the head, you can see it in the url inspection tool, but the icon was still cached in the search results, reading on https://support.google.com/webmasters/thread/246228232/favicon-not-updating-on-google-search?hl=en it seems that this can take days or even weeks for the updated icon to show up