I'm trying to make my point marker have a picture icon, but for some reason, it's showing up on my map like this:

I've looked at the documentation on leaflet's website and what not but have had no luck. It's probably something pretty simple that I'm missing or brain farting on haha. Any help is much appreciated. Let me know what other code you might need to address the problem. TIA!

Here's my script

<script>
  //create variable to hold the map element, give initial settings to map
  var map = L.map("map", {
    center: [38.1, -98.583333],
    zoom: 4,
  });
  //add OSM tile layer to map element
  L.tileLayer(
    "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
    {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
      subdomains: "abcd",
      maxZoom: 19,
    }
  ).addTo(map);

  var logo = L.icon({
    iconUrl: "imgs/patrickLogo.png",
    iconSize: [20, 20],
  });

  L.marker([40.308746567390294, -105.08229135535235], { icon: logo })
    .addTo(map)
    .bindPopup("Berthoud, CO");
</script>

UPDATE: It's a 404 error. What does that mean and how can I fix it?

RESOLVED: changed my image path to an absolute path and it worked! Thanks, y'all.

var logo = L.icon({
    iconUrl:
      "https://d2q79iu7y748jz.cloudfront.net/s/_squarelogo/8ec294c2f144d43bf5d7ec5f4f96d0c9",
    iconSize: [20, 20],
  });