How to change cursor in css?

December 25, 2022

I want to change simple cursor to image, so i have this code which isnt working

html{
    cursor: url(image/cursor.ico),  auto;
} 
body{
    cursor: url(image/cursor.ico),  auto;
}
*{
    cursor: url(image/cursor.ico),  auto;
}

What is wrong here?

>Solution :

Your problem is probably not with your CSS code (although I recommend double checking the link to your image).

MDN says this:

While the specification does not limit the cursor image size, user agents commonly restrict them to avoid potential misuse. For example, on Firefox and Chromium cursor images are restricted to 128×128 pixels by default, but it is recommended to limit the cursor image size to 32×32 pixels.

I had an image that didn’t work, changing the size to 32×32 indeed solved the problem!