CSS Custom Cursor Not Working

CSS custom cursor doesn't work in FF/Chrome

The problem is not just with your css code lacking second argument but with the image file.

If you simply resize, make it smaller (i tried 32px for testing purposes) it works like a charm.

You might also want "pointer" rather than auto, judging by the look of the image;

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;

EDIT:
i realize now you wanted to keep the size but it just won't work. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property for more info

css custom cursor problems

Your CSS is fine therefore I can only imagine it is one of the following problems:

The plane.png image is not in the same folder as your .html file
The plane.png image is larger than 32x32 pixels
You have not enclosed your CSS in <style></style> tags
You don't have any content within your <body> tag therefore the CSS isn't trigggering

This is tested and works:

<html>
    <style>
        html {
        background-color: #F3F1EB; 
        cursor: url('plane.png'), pointer;
        }
    </style>
    <body>
       //Your page contents here
    </body>
</html>

Note: I used the HTML selector for test purposes.

Final point - changing the cursor to a custom image is bad practice for a number of reasons. Mainly, it negatively affects the UX of a site.

Why is cursor:pointer effect in CSS not working

You need to change the z-index so that #firstdiv is considered on top of the other divs.

Setting a custom cursor (CSS) didn't work

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.

you don't have to worry about the moving files or maintaining links
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

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%;
    }

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;
    }

Custom Cursor CSS not working on certain parts of the webpage

Browsers manage your cursor visibility outside of your <body> tag. On this jsfiddle sample you can see that when you are outside of the blue borders, your cursor will default. Browser will also default your cursor when you are too close to the edges, or in some cases if your cursor goes outside of your browser, it will default. You can observe all in the sample. In your specific case you need to position your elements in a different way or give your body enough height so your elements are contained within it. Latter is not ideal but for PoC here is the demo.

Custom CSS Cursor not working in some areas?

add a div after the body tag with the following styles position: relative; width: 100%; min-height: 600px;cursor: url("gundam.gif"), auto;:

place all your other content in the above div. let me know if it works.

Internal CSS Cursor URL Not Working, any tips?

There are limitations to what kind of images you can use as a custom cursor. As a reference check this link.
I would say your image is too big (maximum 32x32px).

Try the following code with a url to a placeholder image with 32px.

body {
height: 100vh;
width: 100vw;
   cursor:url(https://via.placeholder.com/32), auto;
   }

How to fix a custom cursor that doesn't show on hover

Your issue is that span.me means a span with class me while you have a span with id me.

EDIT: In addition to this you need to have your image resized to under 32x32 pixels. Anything above that will be ignored.

Custom cursor not growing/scaling on hover (can't figure it out)

The codepen you are trying to copy links to external scripts and has been adapted to work inside codepen.

What I did to get the pen to work here (I think you only needed step 4):

For CSS & JS clicked down arrow top right, view compiled
Copy over all code
Settings>JS>External Scripts>Copy link into Stack Overflow snippet's external scripts
Removed 'window.CP' code junk which I assume is something to do with codepen and getting the window object of their sub-document

const $bigBall = document.querySelector('.cursor__ball--big');
const $smallBall = document.querySelector('.cursor__ball--small');
const $hoverables = document.querySelectorAll('.hoverable');

// Listeners
document.body.addEventListener('mousemove', onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {
  $hoverables[i].addEventListener('mouseenter', onMouseHover);
  $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}

// Move the cursor
function onMouseMove(e) {
  TweenMax.to($bigBall, .4, {
    x: e.pageX - 15,
    y: e.pageY - 15 });

  TweenMax.to($smallBall, .1, {
    x: e.pageX - 5,
    y: e.pageY - 7 });

}

// Hover an element
function onMouseHover() {
  TweenMax.to($bigBall, .3, {
    scale: 4 });

}
function onMouseHoverOut() {
  TweenMax.to($bigBall, .3, {
    scale: 1 });

}

body {
  height: 100vh;
  background: #010101;
  cursor: none;
  margin: 0;
  display: flex;
  font-family: monospace;
}
body h1,
body p,
body a {
  color: #fff;
}
body a {
  border-bottom: 2px solid #fff;
  padding: 10px 0;
  margin-top: 25px;
}
body .cursor {
  pointer-events: none;
}
body .cursor__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  z-index: 1000;
}
body .cursor__ball circle {
  fill: #f7f8fa;
}
body .left,
body .right {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body .right {
  background: #fff;
}
body .right a {
  border-bottom: 2px solid #000;
}
body .right h1,
body .right p,
body .right a {
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="cursor">
  <div class="cursor__ball cursor__ball--big ">
    <svg height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
    </svg>
  </div>

  <div class="cursor__ball cursor__ball--small">
    <svg height="10" width="10">
      <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
    </svg>
  </div>
</div>

<div class="left">
  <h1>Hello</h1>
  <p>Check out this link:</p>
  <a class="hoverable">Hover meh</a>
</div>

<div class="right">
  <h1>Hello</h1>
  <p>Check out this link:</p>
  <a class="hoverable">Hover meh</a>
</div>