Unable to change favicon in app.html head

ucheNkadiCode commented 11 months ago

Describe the bug

My package JSON

{
    "name": "WEBSITE_NAME",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check .",
        "format": "prettier --write ."
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/kit": "^1.27.4",
        "prettier": "^3.0.0",
        "prettier-plugin-svelte": "^3.0.0",
        "svelte": "^4.2.7",
        "svelte-check": "^3.6.0",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^4.4.2"
    },
    "type": "module"
}

My app.html file is such

<!doctype html>
<svelte:head>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
</svelte:head>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon/favicon-16x16.png">
    <link rel="manifest" href="%sveltekit.assets%/favicon/site.webmanifest">
    %sveltekit.head%
</head>

<body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
</body>

</html>

I've tried what feels like everything and used favicon.io to create my images. I then created a favicon folder in the static folder which should work, but nothing is working. I've also tried moving these links into svelte:head but that didn't work either.

Am I missing something? Could it be an issue in the svelte.config.js file? It's not working locally nor on the deployed website.

Reproduction

It's svelte app created with the basic template

Logs

No response

System Info

System:
    OS: macOS 13.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 87.34 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.19.1 - /usr/local/bin/node
    npm: 9.6.2 - ~/.nvm/versions/node/v16.19.1/bin/npm
    Watchman: 2023.09.25.00 - /opt/homebrew/bin/watchman
  Browsers:
    Edge: 119.0.2151.97
    Safari: 16.6
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.1 
    @sveltejs/kit: ^1.27.6 => 1.27.6 
    svelte: ^4.2.8 => 4.2.8 
    vite: ^4.4.2 => 4.5.0

Severity

annoyance

Additional Information

No response

Conduitry commented 11 months ago

What does "unable to change" it mean? That the browser isn't picking up the new image? Browsers cache favicons very aggressively.

ucheNkadiCode commented 11 months ago

What does "unable to change" it mean? That the browser isn't picking up the new image? Browsers cache favicons very aggressively.

@Conduitry, How would you suggest I overcome the aggressive caching? It's a really simple site and my static folder looks like so. All advice online looks the same

A very weird issue I see is that all of the lines that are supposed to be added to the head are showing up in the body. However, when I move all these same lines to which shouldn't be necessary, it still doesn't work.

html bug demo

If I edit the <head> element in my developer console by adding <link rel="icon" href="/favicon/favicon.ico"> at the bottom, it actually finds my icon and looks great. So this leads me to believe that the key reason is both the svelte:head and <head> elements are somehow getting injected into the <body>when I'm doing npm dev run

eltigerchino commented 11 months ago

Please provide a minimal reproduction in the form of a repository

ucheNkadiCode commented 11 months ago

Thanks @eltigerchino and @Conduitry - here is a reproducer -> https://github.com/ucheNkadiCode/faviconBug/tree/main

ucheNkadiCode commented 11 months ago

After a bit more tweaking, what I see is that the issue may have been that I was using <svelte:head> in the app.html file. When I instead moved my line <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" /> to <head> and got rid of <svelte:head< completely in html -> those contents are no longer being placed in the content body.

It's a pretty weird bug. I don't know if it is expected behavior but I believe your docs would need to be updated to reflect this specific nuance.

My app.html now looks like this

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
    <link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon/favicon-16x16.png">
    <link rel="manifest" href="%sveltekit.assets%/favicon/site.webmanifest">
    %sveltekit.head%
</head>

<body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
</body>

</html>

eltigerchino commented 11 months ago

Yeah, Svelte syntax shouldn’t be used inside a HTML file. I wonder if we should throw an error for this or have some kind of HTML file validation?

ucheNkadiCode commented 11 months ago

That would be super helpful!

And/Or just adding something in the docs about svelte head not being available in app.html could have saved me a lot of time.

Thanks for the help, this solved my issue

sveltejs / kit