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.