Favicon best practices

[AdamBD]

Hello,

I've seen examples of best for favicons being the following

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/android-chrome-192x192.png' },
        { rel: 'icon', type: 'image/png', sizes: '512x512', href: '/android-chrome-512x512.png' },
        { rel: 'manifest', href: '/site.webmanifest' }
      ]
    }
  }
});

Is this true for favicons / will this override any existing default automated behavior that nuxt-seo gives out of the box?

[harlan-zw]

Hi, the favicon.ico format can pack icons up in many resolutions, it's recommended to pack it to at least 256px.

The other rel icons shouldn't be needed in that case, except for the apple touch icon. The Nuxt SEO Experiments module can automatically set up these tags for you though.

It seems like you're trying to set up a PWA though so I'd suggest following the best practices for that separately.

[AdamBD]

@harlan-zw thanks for responding:

1. Do I need seo-experiments in addition to nuxt/seo for this to work?
2. I am using just the basic nuxt/seo module and I see its already generating the favicon header tags for my site <link rel="icon" href="/favicon.ico" sizes="any">
3. I used this websites service for generating favicons for every use case: https://realfavicongenerator.net, and I got back the directory below:

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico
safari-pinned-tab.svg

Do I need to just put all of these in my /public folder and nuxt/seo will know how to generate the appropriate head tags?

[AdamBD]

@harlan-zw any feedback here?