网站图标不会改变

编程问答 2022-04-25

问题描述

我正在创建我的第一个网站，最初我添加了一个名为“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。但是，即使我完全删除 <link rel="shortcut icon" type="images/ico" href="images/preview.ico"> 行，它仍然显示在选项卡中 (?)

Check how the tab shows atm

我仍在学习 HTML 和 CSS，所以如果有人在我的一小部分代码中发现任何其他错误，那么获得反馈会很棒。也不确定是否值得一提，但我使用的是 Visual Studio Code。

干杯！

解决方法

<header></header> 和 <head></head> 是两个独立的东西。

header 或带有 div 或 id='header' 的 class='header' 用于对用于显示的 HTML 元素进行分组，您猜对了，标题。>

head 另一方面没有视觉外观（除了标题和收藏夹图标），并定义有关页面的信息，包括元信息、标题、对外部文件（如样式表、脚本等）的引用.

也许，尝试删除 div 标签内的 head？像这样：

<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>
faviconfaviconhtml