SvelteKit loads favicon every page request and messes up the request

Describe the bug

I think there are two problems here:

1. favicon.png is request on each navigation (why?)
2. favicon in dev mode SOMETIMES is not found (404)

I have an API in SvelteKit structured as this

For some very strange reason SvelteKit tries to load favicon with every request in a very weird way.

Moreover when I check the params of the request with values lang: ‘en’ and searched: ‘32015L2366’ I see that there were two requests: The first request:

Request {
  size: 0,
  follow: 20,
  compress: true,
  counter: 0,
  agent: undefined,
  highWaterMark: 16384,
  insecureHTTPParser: false,
  [Symbol(Body internals)]: {
    body: null,
    stream: null,
    boundary: null,
    disturbed: false,
    error: null
  },
  [Symbol(Request internals)]: {
    method: 'GET',
    redirect: 'follow',
    headers: {
      accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
      'accept-encoding': 'gzip, deflate, br',
      'accept-language': 'en-US,en;q=0.9,cs;q=0.8',
      connection: 'keep-alive',
      referer: 'http://localhost:3000/en/favicon.png',
      'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="98"',
      'sec-ch-ua-mobile': '?0',
      'sec-ch-ua-platform': '"Linux"',
      'sec-fetch-dest': 'image',
      'sec-fetch-mode': 'no-cors',
      'sec-fetch-site': 'same-origin',
      'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36'
    },
    parsedURL: URL {
      href: 'http://localhost:3000/api/en/favicon.png.json',
      origin: 'http://localhost:3000',
      protocol: 'http:',
      username: '',
      password: '',
      host: 'localhost:3000',
      hostname: 'localhost',
      port: '3000',
      pathname: '/api/en/favicon.png.json',
      search: '',
      searchParams: URLSearchParams {},
      hash: ''
    },
    signal: null,
    referrer: undefined,
    referrerPolicy: ''
  }
}

Console logged params are:

{ lang: 'en', searched: 'favicon.png' }

The second request {correct one) is:

Request {
  size: 0,
  follow: 20,
  compress: true,
  counter: 0,
  agent: undefined,
  highWaterMark: 16384,
  insecureHTTPParser: false,
  [Symbol(Body internals)]: {
    body: null,
    stream: null,
    boundary: null,
    disturbed: false,
    error: null
  },
  [Symbol(Request internals)]: {
    method: 'GET',
    redirect: 'follow',
    headers: {
      accept: '*/*',
      'accept-encoding': 'gzip, deflate, br',
      'accept-language': 'en-US,en;q=0.9,cs;q=0.8',
      connection: 'keep-alive',
      host: 'localhost:3000',
      'if-none-match': '"1dyn90w"',
      referer: 'http://localhost:3000/en/32015L2366',
      'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="98"',
      'sec-ch-ua-mobile': '?0',
      'sec-ch-ua-platform': '"Linux"',
      'sec-fetch-dest': 'empty',
      'sec-fetch-mode': 'cors',
      'sec-fetch-site': 'same-origin',
      'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36'
    },
    parsedURL: URL {
      href: 'http://localhost:3000/api/en/32015L2366.json',
      origin: 'http://localhost:3000',
      protocol: 'http:',
      username: '',
      password: '',
      host: 'localhost:3000',
      hostname: 'localhost',
      port: '3000',
      pathname: '/api/en/32015L2366.json',
      search: '',
      searchParams: URLSearchParams {},
      hash: ''
    },
    signal: null,
    referrer: undefined,
    referrerPolicy: ''
  }

Console logged params are:

{ lang: 'en', searched: '32015L2366' }

Looks like a ghost in the shell.

Reproduction

See the structure in the picture above.

Logs

No response

System Info

Pop!_OS 21.10 , Browser info can be seen hereabove.

Severity

serious, but I can work around it

Additional Information

No response

[fehnomenal]

I have a similar “problem” (quotes because it does not really break anything but my client wants to get rid of errors in the console).

I noticed that only Chrome/Chromium loads the favicon on each navigation, on Firefox it is fine.

The issue (console errors) happens when the url generated by %svelte.assets% (which is relative) is no longer valid when resolving to the url after navigating. This happens when navigating from / with href="./favicon.png" to /foo/bar. Then the href stays the same but Chromium tries to resolve the favicon from /foo/favicon.png which is obviously incorrect.

Again this does not break anything but is only annoying.

[rumack]

Sorry, just seeing these last exchanges now. I went back into the three Sveltekit apps where I was getting this error and reinserted %svelte.assets%/favicon.png, after adding trailingSlash: 'always' to svelte.config.js. Error seems to be gone. Using the node adapter. Cheers!

Sorry, I spoke too soon. Error not fixed. I’ve had to remove the %svelte.assets% from app.html again. Otherwise I get 404 errors as it looks for routes that don’t exist - somehow /favicon is appended onto normal routes which then can’t be found…