Unable to change favicon in app.html head #11158
Comments
|
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 svelte:head which shouldn't be necessary, it still doesn't work.
If I edit the |
|
Please provide a minimal reproduction in the form of a repository |
|
Thanks @eltigerchino and @Conduitry - here is a reproducer -> https://github.com/ucheNkadiCode/faviconBug/tree/main |
|
After a bit more tweaking, what I see is that the issue may have been that I was using 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 <!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> |
|
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? |
|
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 |
eltigerchino
added
needs-decision
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
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.jsfile? 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.0Severity
annoyance
Additional Information
No response
The text was updated successfully, but these errors were encountered: