Cómo cambiar el cursor por una imagen personalizada

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Cómo cambiar el cursor por una imagen personalizada</title>
</head>
<body>
<style>
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #eee;
}

#wrap {
  width: 80%;
  margin: 1em auto;
  padding: 1em 5%;
  background: #fff;
}

h1, h2 {
  margin-bottom: .5em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.6em;
}

p {
  margin-bottom: 1em;
}

.custom-cursor {
  cursor: url("https://tutorialesenlinea.es/templates/tutorialesenlinea/imagenes/TL.png"),
    pointer;
}

.custom-cursor-alt {
  cursor: url("https://tutorialesenlinea.es/templates/tutorialesenlinea/imagenes/TL.png") 32 32,
    pointer;
}

.pointer {
  cursor: pointer;
}

.crosshair {
  cursor: crosshair;
}
</style>
<div id="wrap">
     <h1>Ejemplos de cursores con imágenes personalizadas</h1>
     <p>(pasa el ratón por encima de los botones)
     <p><button class="custom-cursor">imagen con posición predterminada</button></p>
     <p><button class="custom-cursor-alt">imagen con posición <code>32 32</code></button></p>
  <h2>Algunos ejemplos genéricos</h2>
  <p><button class="pointer">cursor: pointer</button></p>
  <p><button class="crosshair">cursor: crosshair</button></p>
<br>
<a href="https://tutorialesenlinea.es/CSS3/cursor-del-raton-en-css3.html" rel="noopener noreferrer" target="_blank">Ver mas ejemplos..</a>
</div>

</body>
</html>