SvelteKit项目Safari端Favicon异常显示为外部站点图标求助

问题描述 #

我用SvelteKit开发了名为Movie Hunt的项目，遇到一个奇怪的问题：在Safari桌面端和移动端，网站的Favicon没有正确显示，反而加载了页脚里Buy Me a Coffee链接的黄色图标。但在Chrome、Firefox、Brave等其他浏览器里，正确的Favicon显示正常。

相关代码 #

app.html头部代码 #

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover">
    <meta property="og:title" content="Movie Hunt" />
    <meta property="og:image" content="https://i.imgur.com/QzdVah9.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:description" content="Browse through genres of movies or search for a particular movie title and find out if they are available for rent or currently being streamed online."/>
    <meta property="og:url" content="https://movie-hunt-demo.vercel.app/" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="627" />
    <meta property="og:type" content="website"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Londrina+Shadow&family=Overpass:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Yellowtail&display=swap" rel="stylesheet"> 
    <script src="https://kit.fontawesome.com/4dd3342d23.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="%sveltekit.assets%/styles/global.css" />
    <link rel="icon" href="%sveltekit.assets%/favicon.ico?v=2">
    <link rel="shortcut icon" sizes="32x32" href="/images/favicon-32x32.png?v=2" />
    <link rel="shortcut icon" sizes="16x16" href="/images/favicon-16x16.png?v=2" />
    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png?v=2">
    <link rel="mask-icon" href="/images/favicon.ico?v=2" color="#000000">
    <link rel="android-chrome" sizes="192x192" href="%sveltekit.assets%/images/android-chrome-192x192.png">
    <title>Movie Hunt</title>
    %sveltekit.head%
</head>

页脚相关链接代码 #

<a class="coffee_a" href="https://www.buymeacoffee.com/rickydlgd" target="_blank" rel="noreferrer"><i class="fa-solid fa-mug-hot"></i></a>

问题截图 #

解决方案 #

这个问题是Safari的已知行为：当页面存在外部链接时，Safari可能错误抓取外部站点的Favicon并替换当前站点的。可以通过以下方式修复：

• 规范Favicon的rel属性与优先级
  Safari对rel="icon"的解析逻辑和其他浏览器有差异，建议统一声明格式，补充sizes和type属性，并确保rel="icon"的优先级高于shortcut icon，同时更新版本号强制刷新缓存：

  <!-- 替换原有favicon声明 -->
  <link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon.ico?v=3">
  <link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/images/favicon-32x32.png?v=3">
  <link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/images/favicon-16x16.png?v=3">
  

• 统一Favicon资源路径
  当前代码中部分Favicon路径使用/images/，另一部分用%sveltekit.assets%/images/，路径不一致可能导致Safari加载失败，进而 fallback 到外部图标。统一使用%sveltekit.assets%前缀：

  <link rel="apple-touch-icon" href="%sveltekit.assets%/images/apple-touch-icon.png?v=3">
  <link rel="mask-icon" href="%sveltekit.assets%/images/favicon.ico?v=3" color="#000000">
  

• 补充Safari专属图标声明
  针对Safari移动端，添加apple-touch-icon-precomposed声明增强兼容性：

  <link rel="apple-touch-icon-precomposed" sizes="180x180" href="%sveltekit.assets%/images/apple-touch-icon.png?v=3">
  

• 清除Safari缓存强制刷新
  代码修改后，在Safari中执行：

  • 桌面端：按下Cmd + Shift + R强制刷新页面
  • 移动端：进入设置 -> Safari -> 清除历史记录与网站数据

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