Stop fetching favico on every request
Hi,
How could I prevent fetching every request twice, once with the actual data I'm looking for, and once again looking for the favicon file? I should mention that I am using a layout that uses useSeoMeta as follows:
const favicon = getPathTo('/favicon.svg')
useSeoMeta({
ogType: 'website',
ogLocale: locale,
ogLocaleAlternate: locales,
ogImage: favicon
})
Using Nuxt@3.11.2, and issue occurs on Chrome (haven't tried other browsers atm).
Issue also arises on a dynamic page (My pages folder contains a file with a dynamic name [slug].vue).
Having those double requests actually causes issues on server side (500 error code) on repeat...
Thanks in advance!
6 Replies
did you set up the favicon app-wide?
Well I set it in nuxt.config.ts as follows:
export default defineNuxtConfig({
app: {
head: {
link: [
{
rel: 'icon',
type: 'image/svg',
href: './favicon.svg'
}
]
}
},
Is there aynthing else I should do?
Maybe worth mentioning, in my app I only have dynamic pages.
Given that I have the following pages structure:
-pages
-list
-[slug].vue
And that I also use nuxt-i18n with a prefix strategy, I end up with URLs like: MY-APP-URL/en/list/name
Then, when I navigate to one of those pages in the browser, it triggers a json request (that I can see on the Network tab) with the following url construction: MY-APP-URL/en/list/favicon.svgbut you want MY-APP-URL/favicons.svg, right?
Right in the nuxt.config?
I'll try that in a few minutes and let you know
no no
I mean, your favicon is not in "./favicon.svg"
but "/favicon.svg"
so try this 🙂
Oh right 👀 haven't noticed the extra dot, damn, will try that right away!!
Works perfectly! Many thanks @manniL always good to have someone to see with brand new 👀 !