Question

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.

Answer 1

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>

友情链接