从 Vue 应用程序中完全删除 favicon答案

【问题标题】：completely remove the favicon from Vue app从 Vue 应用程序中完全删除 favicon
【发布时间】：2020-07-07 05:17:37
【问题描述】：

我目前没有我的 Vue 应用程序的 favicon，并且想删除默认的图标。我在public/index.html文件中注释掉了相关行

<!DOCTYPE html>
<html lang="en">
  <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" />
    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> -->
    <title>My Vue app</title>
  </head>
  <!-- ... body code ... -->
</html>

然后运行npm run serve。该页面仍然呈现初始的 favicon。如何删除它？

【问题讨论】：

您是否删除了 favicon.ico 文件？即使head 元素中没有链接元素，浏览器也会自动检测到它。否则，当您开始运行服务器时，浏览器可能已经缓存了该文件。以隐身模式打开您的网站以检查是否是这种情况。
是的，我必须清除缓存并删除文件:)
如果你愿意，你可以发表你的评论作为答案
为什么即使在我的隐身模式下，vue favicon 仍然呈现？

标签： vue.js webpack vue-cli

【解决方案1】：

通常发生这种情况时，这是两件事之一

大多数浏览器会在根文件夹中检查名为 favicon.ico 的文件并使用它，即使您没有将其包含在 head 标记中。
如果文件已被删除但您之前打开过该网站，那么它很可能只是缓存在您的浏览器中。您可以通过在隐身/隐私浏览模式下打开网站来轻松检查。清除网站的浏览器缓存会将其删除。

【讨论】：

【解决方案2】：

实际上，在尝试更改我的 favicon 并失败后，我在检查 vuejs <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon.png"> 后添加了这一行，而这一次，favicon.png 是针对我自己的图像。

【讨论】：