Favicon issue in html

I'm having issue with adding a favicon to my html file. I had added it earlier and it was working correctly, however now it has stopped working. I have added a link to an image at the top of my page and since I made that change, my favicon will no longer work.

Any help would be greatly appreciated.

Please see the code below:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="Project.css">
  <script src="https://kit.fontawesome.com/71a9de138d.js" crossorigin="anonymous"></script>
  <script src="Project.js"></script>
 

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">  <!--Favicon-->


  <!--Media Player-->
  <iframe src="https://open.spotify.com/embed/artist/2ye2Wgw4gimLv2eAKyk1NB" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</head>
  <title>Tour</title>
 <header>

Screenshot of the page

Solution

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Title tag</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="Project.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">  <!--Favicon-->
  <script src="https://kit.fontawesome.com/71a9de138d.js" crossorigin="anonymous"></script>
  <script src="Project.js"></script>
     
  <!--Media Player-->
  <iframe src="https://open.spotify.com/embed/artist/2ye2Wgw4gimLv2eAKyk1NB" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</head>
  <title>Tour</title>
 <header>

This is working at my end! Favicon should be at same hierarchy and exact name favicon.ico