mapbox favicon

<!DOCTYPE html>
<html style="width: 100%; height: 100%;" lang="en">

<head>

  <link rel="shortcut icon" href="https://www.pngfind.com/pngs/m/114-1147878_location-poi-pin-marker-position-red-map-google.png">

  <script src='https://api.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />

  <style>
    .marker {
      background-size: cover;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      background-image: url('https://www.pngfind.com/pngs/m/114-1147878_location-poi-pin-marker-position-red-map-google.png');
    }
  </style>
</head>

<body style="width: 100%; height: 100%; margin: 0;">

  <div id='map' style='width: 100%; height: 100%;'></div>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiYWJsaW5kbWFuIiwiYSI6ImNqcmY1ZDd6cDBydWQ0M3A4OHJ4b2czZGwifQ.brwgWx9jn2ut0PAOqEookQ';
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      center: [-3.953423, 54.312727],
      zoom: 5,
    });
    let el = document.createElement('div');
    el.classList.add('marker');
    new mapboxgl.Marker(el)
      .setLngLat([-0.46541700, 53.82652100])
      .addTo(map);
  </script>

</body>

</html>