How to insert Emoji inside html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-420XFJRS1M"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'G-420XFJRS1M');
  </script>
  <link rel="shortcut icon" href="https://1xpto.netlify.app/items/favicon.gif" type="image/x-icon">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="How to insert Emoji inside html,1xpto,media,posts,favorite,about">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How to insert Emoji inside html</title>
  <style>

   a {
       text-decoration: none;
   }

   h1 {
       font-family: calibri;
       font-weight: normal;
   }

   .emoji {
       font-size: 24px;
       vertical-align: top;
   }


</style>
</head>

<body>

<h1>Last week i and my friends had lunch with my <span class='emoji'>&#128077;</span> <a onclick='goto()' href='#'>Grandpa</a></h1>

<audio id='audio' loop src='https://1xpto.netlify.app/audio/mediauto.mp3'></audio>

  <script>

   function goto() {
      audio.play();
      window.open('https://www.facebook.com/ManuelJSAndrade');
    }


</script>
</body>
</html>