The core reason from "the cursor is not displayed" to "finally successful" is only one: image size pitfalls.
1. Reasons for Cursor Not Displaying: Image Size Too Large#
Initially, I used a 2048×2048 / 512×512 PNG,
resulting in the browser directly ignoring the cursor (no errors, no prompts).
Recommended sizes for the cursor to display correctly:
| Size | Performance |
|---|---|
| 32×32 | Most compatible, stable across all browsers |
| 48×48 | Clear, suitable as a blog theme cursor (recommended) |
| ＞128px | ❌ Automatically discarded by the browser, completely not displayed |
Therefore, the first step is to scale the image to 32px or 48px.
Recommended ImageMagick command (ensure transparent background is preserved):
magick input.png -resize 48x48 png32:cursor.png
png32:= Force preserve transparency (otherwise it will turn white)- Do not use flatten/extent commands, otherwise the transparent background will disappear
2. Usable Image URL (Recommended)#
Even raw.githubusercontent can display the cursor as long as the size is correct.
But it is more recommended to use jsDelivr:
https://cdn.jsdelivr.net/gh/<username>/<repo>/<path>/cursor.png
Advantages:
- Automatically returns the correct Content-Type
- Global CDN, faster and more stable
- Any public GitHub repository can be used directly
Example:
https://cdn.jsdelivr.net/gh/lyzno1/lyzno1/images/cursor-48.png
3. Complete xLog Cursor Configuration Example#
Place the following CSS into xLog external CSS or local CSS:
body {
cursor: url("https://cdn.jsdelivr.net/gh/username/repo/images/cursor-48.png") 10 28, auto !important;
}
Parameter explanation:
url(...): Your 32px or 48px transparent PNG10 28: Hotspot coordinates (the position of the "tip of the arrow" of the cursor)auto !important: Override the default cursor of the theme
Tip: Incorrect hotspot coordinates can cause the cursor to be "off-target," adjust manually according to the image.
4. Summary in One Sentence#
- ❗ Almost all problems come from the image size being too large
- ❗ Must use 32px / 48px and maintain a transparent background
- ✔ PNG hosted on GitHub, using jsDelivr can reliably serve as a cursor
- ✔ Loss of transparency and incorrect size are reasons for the browser to directly ignore
Version: 1.0
Applicable Scenarios: xLog Custom Themes / Cursor Beautification