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.
I can't speak for favicon.io, but got my own site working with https://realfavicongenerator.net/.
Add the HTML output straight to app.html, and generated files to the static directory. You can add %sveltekit.assets% afterwards but it is only going to help if you've changing the URL or base path for static files.
Also, remove the <svelte:head> from app.html, just move the google fonts link down into the <head> block. Not sure if thats affecting anything.
Once you've done all of this, make sure that you clear cache in your browser, Favicons are often cached for a long time.
This is roughly mine for https://kedyou.com/:
├── src
│ ├── app.d.ts
│ ├── app.html
│ ├── hooks.server.ts
│ ├── lib
│ │ └── ...
│ └── routes
│ └── ...
├── static
│ ├── apple-touch-icon.png│
│ ├── browserconfig.xml
│ ├── favicon-16x16.png
| ├── images
| | └── ...
│ ├── favicon-32x32.png
│ ├── favicon.ico
│ ├── manifest.json
| └── safari-pinned-tab.svg
└── tests
└── ...
<!-- app.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600;700&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
<!-- Generated from https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="msapplication-TileColor" content="#00a300" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
%sveltekit.head%
</head>
<body>
<app>%sveltekit.body%</app>
</body>
</html>