FAVICON
https://favicon.io/tutorials/how-to-add-a-favicon-to-a-website-png-format/

<link rel="icon" href="http://www.yourwebsite.com/favicon.png">



<img class="icon" src="https://mat.miracosta.edu/MAT125_Prior/demos/exercise-04/images/avo-half-small.png" alt="Avacado half icon logo">





 <link rel="icon" href="images/favicon.png">
  <style>
    body {margin:0;}
    .container {
      position:relative;
      width:100%;
      min-width:800px;
    }
    nav {
      position:relative;
      width:100%;
      height:auto;
      background-color:rgba(0,0,0,1.00);
    }
    nav .icon {
      position:relative;
      width:100px;
      height:100px;
      margin:0 0 0 20px;
      background-image:url("images/avo-half-small.png");
      background-repeat:no-repeat;
      background-size:contain;
      float:left;
      clear:none;
    }
    nav h1 {
      position:relative;
      width:300px;
      height:auto;
      margin:20px 0 0 30px;
      font-family:verdana, sans-serif;
      font-size:60px;
      color:rgba(194,77,8,1.00);
      float:left;
      clear:none;
    }
    nav ul {
      position:relative;
      width:240px;
      height:auto;
      background-color:rgba(0,0,0,1.00);
      margin:20px 20px 0 0;
      padding:0;
      list-style-type: none;
      float:right;
      clear:none;
    }
    nav ul li a:link, nav ul li a:visited  {
      position:relative;
      width:100px;
      height:40px;
      line-height:40px;
      text-align:center;
      font-family:verdana, sans-serif;
      font-size:18px;
      color:rgba(255,255,255,1.00);
      background-color:rgba(91,138,10,1.00);
      text-decoration:none;
      margin:0 0 0 20px;
      padding:0;
      display:block;
      float:left;
      clear:none;
      transition:all 0.8s ease-in-out;
    }
    nav ul li a:hover, nav ul li a:active {
      position:relative;
      width:100px;
      height:40px;
      line-height:40px;
      text-align:center;
      font-family:verdana, sans-serif;
      font-size:18px;
      color:rgba(255,255,255,1.00);
      background-color:rgba(48,74,3,1.00);
      text-decoration:none;
      margin:0 0 0 20px;
      padding:0;
      display:block;
      float:left;
      clear:none;
    }
    .clearfix:after {
      content:".";
      height:0;
      visibility:hidden;
      display:block;
      clear:both;
    }
  </style>







<div class="container">
    <nav role="navigation" class="clearfix">
      <div class="icon"></div>
      <h1>Headline</h1>
      <ul>
        <li><a href="#">LINK 01</a></li>
        <li><a href="#">LINK 02</a></li>
      </ul>
    </nav>
    <header role="banner"></header>
    <main>
    </main>
    <footer></footer>
  
  </div>