.cur vs .ico vs .png: which cursor file format to use

The quick answer

Format	Stores a hotspot	Several sizes in one file	Animation	Web (CSS)	Windows cursor	macOS
.cur	yes	yes	no	yes, desktop browsers	yes	no
.ani	yes, per frame	yes, per frame	yes	no	yes	no
.ico	no	yes	no	yes, as an image	no	no
.png	no	no	no	yes	no	with community tools
.svg	no	scales to any size	no	yes	no	no

For the web, use SVG or PNG with the hotspot in your CSS. For Windows, use .cur and .ani. For a Mac, you need PNG files and a community tool, because macOS cannot install cursor files.

.cur: the Windows cursor

A .cur file is a small container of images built for cursors.

• It can hold several sizes of the same cursor, such as 32, 48, 64, 96 and 128 pixels. Windows picks the one that matches the pointer size setting.
• Each size stores its own hotspot, the pixel that does the clicking.
• Images are usually 32-bit with transparency.

Browsers read .cur files too, and use the stored hotspot when your CSS leaves out the coordinates. That makes a .cur a handy last image in a url() list for desktop browsers.

.ico: almost the same file, without the hotspot

An .ico file has the same structure as a .cur. The difference is a type number in the header and two fields in each image entry: where a cursor stores the hotspot, an icon stores its colour planes and bit depth.

That is why renaming an .ico to .cur is not enough. The type number inside still says “icon”, and the fields where a hotspot belongs still hold colour information (typically 1 and 32), so you cannot rely on where the click point lands, or on the file loading at all. Convert the file properly with the ICO to CUR converter, which lets you set the hotspot.

.png: the web’s default

PNG is a single image with transparency, nothing more. There is no hotspot inside, so you give it in CSS:

.zone { cursor: url("arrow.png") 4 2, auto; }

Every desktop browser accepts it. Windows cannot use a PNG as a system cursor; convert it with the PNG to CUR converter.

.svg: sharp at any size, web only

An SVG cursor stays crisp on every screen density. Browsers accept it in url() when the root svg element has width and height attributes. Put the SVG first in your list and a PNG after it as a fallback. Windows and macOS cannot use SVG as a system cursor.

.ani: the animated Windows cursor

An .ani file is a sequence of .cur images with timing. Windows plays it; browsers do not. The animated cursors guide explains frames, steps and jiffies.

GIF is not a cursor format. Browsers accept a GIF in url() but show one frame, and Windows will not use it at all.

What to export for each place

• Website: an SVG with width and height, a 32x32 PNG and the CSS line. Add a .cur if you want the stored hotspot as a backup.
• Windows: a .cur per role with 32, 48 and 64 pixel sizes (96 and 128 if you can), and .ani files for anything animated. Add an .inf installer for a full set.
• Mac: PNG files at 32 and 64 pixels, plus a note of each hotspot, for use with a community cursor tool.

The cursor maker exports all of these from one drawing, apart from the .inf, which belongs to a whole set of cursors; every cursor pack comes with one.

Inside a .cur file

For developers, the layout of a .cur file, with every number stored least significant byte first:

Bytes	Field	Value
0 to 1	Reserved	0
2 to 3	Type	2 for a cursor (1 for an icon)
4 to 5	Image count	How many sizes follow
6 onward	One 16-byte entry per image	Width, height (0 means 256), colour count, reserved, hotspot x (2 bytes), hotspot y (2 bytes), data size (4 bytes), data offset (4 bytes)
After the entries	Image data	A bitmap with a transparency mask, or a PNG stream

The default Windows cursors use 32-bit bitmaps for every size, which is the safest choice for cursor files.

FAQ

Can I just rename a PNG to .cur?

No. The structure is different, and Windows will not load it. Use a converter, which wraps the image in a real cursor file and stores the hotspot.

Which formats keep the hotspot?

Only .cur and .ani. With PNG and SVG, the hotspot lives in your CSS as the two numbers after url().

Do I still need .cur files for websites?

Not usually. SVG and PNG with CSS coordinates work in every current desktop browser. A .cur is mainly for Windows itself, or as an extra fallback that carries its own hotspot.