vueuse/head

change icon not work

Closed this issue · 3 comments

useHead({
      title: 'Open-sourced',
      meta: [
        {
          name: 'description',
          content:
            'Open-sourced',
        },
        {
          name: 'keywords',
          content: 'Open-sourced',
        },
      ],
      link: [
        {
          rel: 'icon',
          key: 'favicon',
          href: '/name.ico',
        },
      ],
    })

It haved two <link rel="icon" key="favicon" href="...">

env:
vue3.2
"vite": "3.1.3",

Hey @callmesoul

Please refer to the docs https://unhead.harlanzw.com/guide/guides/handling-duplicates#providing-a-key

If you're still getting duplicates with both using key, then please make a reproduction.

Otherwise it's an issue with your code when / where you're calling useHead

@harlan-zw when index.html init haved <link rel="icon" key="favicon" href="..."> is awalys haved two

index.html

<link rel="icon" key="favicon" href="/favicon.ico" />

useHead({
link: [
{
rel: 'icon',
key: 'favicon',
href: '/name.ico',
},
],
})


This isn't really supported as there's no native html key. There's a dedupe attribute data-h-${hash} which you could use if you can modify the HTML.

Ideally, you just let either the initial html handle the favicon or you have unhead do it all.