CSS Custom Cursors

Discussion

1. Jaime Blázquez

   How do you specify what is the clicking point? Must be part of the file format or it can be defined in the CSS for other image formats (as PNG or GIF)?
2. Anthony Hastings

   It’s probably worth noting that the keyword fallback is mandatory, and, your also able to use .png files as icons.
3. Maayan

   I’ve used these about a year ago for math teaching tools. Take note that the hit point is always set to the top left point however you can change that when creating the ICO file
4. Filip

   The cursor disappears when you right click. Any workaround?
5. Albert

   @Filip It doesn’t for me – Firefox Nightly
6. Albert

   ouh … and some more links:

   http://mdn.io/css_cursor

   https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url
7. Responsive Miracle

   I didn’t know that this is standard, that we can use .ico files as cursors. How neat :) Thanks for sharing.
8. Anh Tran

   How about browser support? Does it work in IE9+ and other browsers? Thanks.
• David Walsh

  All — the API is as old as me.
9. Karsten Buckstegge

   The demo does not work for me in IE 9-11.
• Lemon

  Try an actual browser.
10. Mdabuko M

    Unfortunately this seems not to work in any of my browsers; I use Windows 8.1, and use Google Chrome, Firefox and the default IExplorer as some of the possible browser I use. I’ve tried all and none managed to render the icon.
    IF I lost it somewhere, feel free to give a shout and advice me. Please and thank you.

    /*Syntax*/
    body {
    cursor: url("C:\Users\User\Documents\Notepadd\Antivirus.ico"), default; /*We've set our custom cursor and also the default fall-back cursor*/
    }
    
• Anthony Hastings

  It’s probably the fact that your icon is using a filesystem path rather than a path which the webserver is serving.
• Mdabuko M

  Mr Anthony do you have any advice on what I can do to make the icon render.. I’m still just developing the website.
  Any help would be appreciated, Thanks.
• CrouchingBruin

  @Mdabuko, just upload your icon file to a folder on your site, then point to it in your URL, like:

  http://example.com/images/Anvivirus.ico
• ThaneAcheron

  I would suggest you use relative paths as apposed to absolute paths,
  so if you place your HTML document in the same folder as your .ico file.
  Try:

   body { 
   cursor: url('Antivirus.ico'), default; 
   }
  

  or if your .ico file is in a folder within your html document directory.

   body { 
   cursor: ur('Resources/Antivirus.ico'), default; 
   }
  

  I hope this help.
• Luis

  There are size restrictions to the image:

  “In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.”

  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property#Limitations
11. Bhumi

    Nice one.can we use other extensions for image or ico only?
• David Walsh

  PNG is also acceptable, I believe.
12. Tazze

    since .ico is a container for both .png and .bmp files, would these formats work?
13. Dogs Ngo

    Small issue: the default div doesn’t have the “cursor: default” style applied so when you hover the text, the cursor changes to text cursor type. When cursor: default is applied on an element, it should always be the default arrow cursor.
14. Chris C

    Any way to fix the pixelation when the cursor size is scaled up?