SvelteKit项目无法修改Favicon（网站图标）问题求助

1. 修正 app.html 的路径与结构 #

你的 app.html 存在两个关键问题：

• %sveltekit.assets% 前缀不适用于静态资源：SvelteKit 的 static 文件夹下的资源会直接映射到网站根目录，无需添加该前缀。
• <svelte:head> 位置错误：它被放在了 <html> 标签外部，属于无效结构，应直接将内容移至 <head> 标签内。

修改后的 app.html 示例：

<!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="/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="/favicon/site.webmanifest">
    %sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
</body>
</html>

2. 验证文件位置与命名 #

• 确认 static/favicon 文件夹下确实存在所有引用的文件：apple-touch-icon.png、favicon-32x32.png、favicon-16x16.png、site.webmanifest。
• 检查文件名大小写：如果部署到 Linux 服务器，文件名区分大小写，确保代码中的路径与实际文件名完全匹配（避免出现 Favicon-32x32.png 这类大小写错误）。

3. 检查 svelte.config.js 配置 #

如果你的项目配置了 assetsPrefix（比如部署到子路径场景），需要在 favicon 路径前添加对应前缀。示例：

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter(),
        assetsPrefix: '/my-subpath' // 子路径前缀
    }
};

export default config;

此时 favicon 路径需改为 /my-subpath/favicon/xxx.png。

4. 清除浏览器缓存 #

浏览器会缓存 favicon，即使配置正确也可能显示旧图标：

• 按 Ctrl+Shift+R（Windows/Linux）或 Cmd+Shift+R（Mac）强制刷新页面。
• 在浏览器开发者工具的 Network 面板勾选「Disable cache」后刷新页面。

内容的提问来源于stack exchange，提问作者Uch