Nuxt•10mo ago

Can I put multiple Favicon assets in public?

I know that I can put a favicon.ico file in the /public folder and it will be served raw and it works.
I have used the online tool here https://favicon.io/favicon-converter/ to generate a bunch of icon files for my site e.g. android-chrome-192x192.png favicon-16x16.png site.webmanifest android-chrome-512x512.png favicon-32x32.png apple-touch-icon.png favicon.ico is it appropriate to put all of these files in my public folder? will they be used by the appropriate client? will the site.webmanifest be ignored/served/overwritten?❔

Favicon.io - The Ultimate Favicon Generator (Free)

With Favicon.io you can quickly generate a favicon for your website for free!

1 Reply

JavascriptMickOP•10mo ago

for now, I have dumped them all in and done this in my nuxt.config.ts...

  app: {
    head: {
      htmlAttrs: {
        lang: 'en'
      },
      title: 'Blah',
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '32x32',
          href: '/favicon-32x32.png'
        },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '16x16',
          href: '/favicon-16x16.png'
        },
        {
          rel: 'apple-touch-icon',
          sizes: '180x180',
          href: '/apple-touch-icon.png'
        },
        { rel: 'manifest', href: '/site.webmanifest' }
      ]
    }
  },

  app: {
    head: {
      htmlAttrs: {
        lang: 'en'
      },
      title: 'Blah',
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '32x32',
          href: '/favicon-32x32.png'
        },
        {
          rel: 'icon',
          type: 'image/png',
          sizes: '16x16',
          href: '/favicon-16x16.png'
        },
        {
          rel: 'apple-touch-icon',
          sizes: '180x180',
          href: '/apple-touch-icon.png'
        },
        { rel: 'manifest', href: '/site.webmanifest' }
      ]
    }
  },

I guess I'll see how it goes

Gaming

Programming

Can I put multiple Favicon assets in public?