Setting a custom cursor (CSS) didn't work

Question

I set a cursor for my website and I used an .ico file. Though, it isn't showing at all.

here's the css:

html, body {
    cursor: url("images/39020_fPv_icon.ico"), url("images/39020.png"), default;
  }

Anyone knows? Thanks.

Answer 1

Likely there is an issue with the url. to test this instead of using default use crosshair and see if the cursor changes, also not the style might be cached in the browser so on most browsers Ctrl+F5 should reload the page without cache.

html, body {
    cursor: url("images/39020_fPv_icon.ico"), url("images/39020.png"), crosshair;
}

if it's changes the cursor to a crosshair then the issue is with your urls, you can either diagnose the urls or you can base64 encode the cursor images which will give you two advantages.

1. you don't have to worry about the moving files or maintaining links
2. if you deploy to a new environment you don't need to worry about the cursor images or where they're stored.

There is a downside to this though, and that is that it will make your css file larger however since normally cursor images are pretty small this shouldn't be much of an issue.

how to base64 encode an image you can google search "base64 encode image" one the the top results is base64-image.de this is a site I've used in the past. The css would then look something like this

html, body {
    cursor: url("data:image/gif;base64,R0lGODdhBQAFAPABAP////8AACwAAAAABQAFAAACCARihhe9q0wBADs=="), crosshair;
  }

now what if changing default to crosshair still didn't do anything? Well there are two possible

1. since you didn't post any html code it's possible your browser isn't rendering anything. the html and body will only be as large as the content so no content means 0 sized html and body.

    html {
        height: 100%;
        width: 100%;
    }

2. If you have content on the html and the cursor isn't working then it's possible the cursor isn't being applied to all the elements on the page so you can modify the css for your cursor like this, which will apply it to all elements on the body

    html, body, body * {
        cursor: url("images/39020_fPv_icon.ico"), url("images/39020.png"), default;
    }