javascript - SvelteKit JS - Unable to change favicon - Stack Overflow

IT技术

更新时间：2025-04-212

admin管理员组
文章数量:1415460

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="; 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.

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./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.

Share Improve this question asked Dec 1, 2023 at 15:52 Uch 2433 silver badges15 bronze badges

The issue was that I was using <svelte:head> in the app.html file. When I instead moved my line <link href="fonts.googleapis./css?family=Lato" rel="stylesheet" /> to <head> and got rid of <svelte:head< pletely in html -> those contents are no longer being placed in the content body. I talked to the Svelte team here github./sveltejs/kit/issues/11158#issuement-1837136799 – Uch Commented Jan 19, 2024 at 18:01

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

I can't speak for favicon.io, but got my own site working with https://realfavicongenerator/.

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./:

├── 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./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/ -->
        <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>

I fixed this by adding the following to +layout.svelte as explained here:

<svelte:head>
  <link rel="icon" type="image/svg" href={icon-path} />
</svelte:head>

In my case, <link rel="icon" type="image/svg" href="/favicon.png" /> because I saved the image as /static/favicon.png.

本文标签： javascriptSvelteKit JSUnable to change faviconStack Overflow

版权声明：本文标题：javascript - SvelteKit JS - Unable to change favicon - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1745169916a2645911.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - SvelteKit JS - Unable to change favicon - Stack Overflow

2 Answers 2

更多相关文章