Best way to include multiple size/version favicons in NextJS 14?
Hi everyone,
Just wanted to see how others are handling multiple size/variations of favicons that will best work for all devices and SERP.
My current layout.js has the following:
export const metadata = {
icons: {
icon: [
{
media: "(prefers-color-scheme: light)",
url: "/images/favicon.ico",
href: "/images/favicon.ico",
},
{
media: "(prefers-color-scheme: dark)",
url: "/images/favicon.ico",
href: "/images/favicon.ico",
},
],
},
};
I also have it in my /app directory as well. I decided to regenerate the favicon using an online tool and got a few different versions:
What's the best way of going about implementing these into my project?
Thanks for the help and support!
EDIT: I put all the generated images in /public and put the corresponding <head> in layout.js will all the <link> needed, just wondering if it's a good idea now to remove icon.ico from my /app directory or leave it there, if that will cause any conflicts.