CODEWITHSUNDEEP
htmlfavicon
flavis
flavis

Reputation: 13

Favicon doesn't change

I am creating my first website and initially I added a favicon called "preview.ico" (saved in a local file) to be the icon of my page tab, and now I want to change it but if I try to change it for another image from the same folder or completely delete the icon line from the code, the old icon is still showing somehow, even if it doesn't show in the code and it is saved. What have I done wrong?

The following code is the original one for the 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>

And I want to change it to another image, specifically for a png image instead of .ico. However, even if i completely delete <link rel="shortcut icon" type="images/ico" href="images/preview.ico"> line, it still shows in the tab (?)

Check how the tab shows atm

I am still learning HTML and CSS so if anyone find any other mistakes in this small part of my code it would be great to have a feedback. Also not sure if it's worth to mention but I am using Visual Studio Code.

Cheers!

Upvotes: 1

Views: 1781

Answers (1)

Imed Boumalek
Imed Boumalek

Reputation: 166

<header></header> and <head></head> are two seperate things.

header or a div with the id='header' or a class='header' is used to group HTML elements that are used to display, you guessed it, a header.

head on the other hand has no visual apperance (aside from the title and the favicon), and defines info about the page, including meta info, title, references to external file such as stylesheets, scripts, etc.

Maybe, try to remove the div inside the head tag? like so:

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

Upvotes: 2

Related Questions