图标没有改变

Favicon doesn't change

我正在创建我的第一个网站,最初我添加了一个名为“preview.ico”的图标(保存在本地文件中)作为我的页面选项卡的图标,现在我想更改它但是如果我尝试将其更改为同一文件夹中的另一个图像或从代码中完全删除图标行,旧图标仍然以某种方式显示,即使它没有显示在代码中并且已保存。我做错了什么?

下面的代码是header的原代码:

<head>
<div id="header">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/style.css"
    <meta charset="utf-8">
    <meta name="discription" content="Travel">
    <meta name="keywords" content="travel, blog, exchange program, experience, tips">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>FlaViagens
    </title>
    <link rel="shortcut icon" type="images/ico" href="images/preview.ico">
</div>

而且我想将其更改为另一个图像,特别是 png 图像而不是 .ico。但是,即使我 completely 删除了 <link rel="shortcut icon" type="images/ico" href="images/preview.ico"> 行,它仍然显示在选项卡 (?)

Check how the tab shows atm

我仍在学习 HTML 和 CSS 因此,如果有人在我的代码的这一小部分中发现任何其他错误,希望能提供反馈。也不确定是否值得一提,但我正在使用 Visual Studio 代码。

干杯!

<header></header><head></head> 是两个不同的东西。

header or a div with the id='header' or a class='header' is used to group HTML elements that are used to display, 你猜对了, header.

另一方面,

head 没有视觉外观(除了标题和网站图标),并定义有关页面的信息,包括元信息、标题、对外部文件(如样式表、脚本)的引用等

也许,尝试删除 head 标签内的 div?像这样:

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/style.css"
    <meta charset="utf-8">
    <meta name="discription" content="Travel">
    <meta name="keywords" content="travel, blog, exchange program, experience, tips">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>FlaViagens</title>
    <link rel="shortcut icon" type="images/ico" href="images/preview.ico">
</head>