Una personalización que verás habitualmente en muchas webs es que, en vez de la habitual flecha, mostrar un icono personalizado como cursor del dispositivo apuntador que uses (ratón, trackpad o lo que sea), de algo que tenga que ver con la temática del sitio, o simplemente que sea llamativo, distinto, como toque de distinción.
Aquí mismo en el blog experimento de vez en cuando con ello y en ocasiones verás que el cursor no es una flecha, o que cambia al apuntar a un enlace. En mi caso suele ser un icono de WordPress, pero a veces se me va un poco la pinza y pongo cosas raras, puede que alguna vez lo hayas visto, me da por rachas 😀
Bueno, que me enrollo…
Si te animas solo hace falta que te lances de una puñetera vez con el CSS, ese código tan facilito que añade superpoderes a tus capacidades como implementador web 🙂
Me da lo mismo si usas el personalizador de WordPress porque tienes un tema clásico, o el CSS adicional en un tema de bloques o edición completa, solo tienes que añadir unas pocas líneas, sencillísimas, de CSS para hacer la magia.
Crea tu cursor personalizado
Antes de nada, querrás un cursor personalizado ¿no?
Pues lo primero es elegir un icono que te guste y que vaya a ser tu nuevo cursor, solo tienes que tener en cuenta un par de detalles:
- Elige el formato SVG para una mayor optimización, pues es un formato escalable y con archivos con poco peso.
- Elige el formato PNG para una mayor compatibilidad, pues hay navegadores que pueden tener problemas al mostrar archivos SVG.
- Elige un icono con fondo transparente, porque sino tu cursor tendrá un marco cuadrado feo al activarlo.
- El tamaño máximo del cursor (y recomendado) debería ser de 32×32 píxeles.
- Optimiza el peso del archivo del icono que vayas a usar como cursor, ten en cuenta que estará siempre activo en tu web y te recomiendo que no pese NUNCA más de 5 KB, y ya casi es mucho. Usa tu aplicación de imágenes favorita, o sino tienes online aplicaciones gratuitas como iLoveIMG o Squoosh que hacen maravillas.
Sube tu cursor personalizado
Cuando ya te hayas decidido y tengas creado tu cursor (o cursores) personalizado, súbelo preferiblemente a tu web, para que así pueda almacenarse en la caché que ya utilices. Súbelo desde el cargador de medios de WordPress, por FTP, el gestor de archivos del hosting o lo que más te guste, simplemente apunta por ahí la URL, porque luego las vas a necesitar 😉
Cursor personalizado en toda la web
Cuando hayas subido tu cursor personalizado, vamos a usarlo en toda la web, con este sencillo CSS:
/* Cursor personalizado en toda la web */
body {
cursor: url('/ruta/de/tu/icono-personalizado.png'), auto;
}
Obviamente, debes cambiar lo de /ruta/de/tu/icono-personalizado.png por la ruta real, o se, algo como /wp-content/uploads/2026/08/mi-cursor.png.
Y tendrás algo tan mono como en la siguiente imagen…
Cursor personalizado solo en los enlaces
¿Qué prefieres un cursor normal salvo en los enlaces?, tus deseos son órdenes para mi. Sería entonces como en este ejemplo:
/* Cursor personalizado en los enlaces */
a:hover {
cursor: url('ruta/de/tu/icono-personalizado.png'), auto;
}
En este caso el cursor personalizado únicamente se verá cuando el visitante pase sobre un enlace o imagen enlazada.
Igual que antes, cambia la ruta de ejemplo por la real ¿vale?, que no se te olvide o no verás cambio alguno.
Cursores diferentes en la web y en los enlaces
Para terminar, vamos a rizar el rizo y mostrar varios cursores, uno de normal, mientras se visualiza la web, mientras el visitante navega, y otro que se mostrará solo al pasarlo sobre un enlace o imagen enlazada.
Sería una combinación de los códigos anteriores, algo así:
/* Cursor personalizado menos en los enlaces */
body {
cursor: url('/ruta/de/tu/icono-personalizado-normal.png'), auto;
}
/* Cursor personalizado en los enlaces */
a:hover {
cursor: url('ruta/de/tu/icono-personalizado-enlaces.png'), auto;
}
Y con eso ya estaría.
Cualquier duda que te surja ya sabes, en los comentarios de abajo, esto no es una IA, aquí puedes charlar, quejarte y debatir, incluso corregirme 😀
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
