How to use a GIF as your cursor in Chrome
April 04, 2022
Using "AniTuner" to create a special
.ani cursor file and the Chrome extension, "Animated Cursors Forever!". One can use a GIF as their cursor inside Chrome.
- Windows-only software is used in this guide. Software for building .ani files on other OS's is difficult to find.
- This cursor would only show inside websites, not on the Chrome titlebar or outside of Chrome.
- This changes the "default" cursor. When websites change the cursor, the animated cursor will be hidden.
- The gif needs to be small! The
.anifile that gets created needs to be less than
80KB. Larger than that and the browser extension won't work.
Split the GIF into individual images
- Download the GIF - choose a small GIF!
- Upload the GIF to EZGif's Splitter tool at: https://ezgif.com/split
- Hit "Split to Frames" and then "Download frames as ZIP" to get the GIF as individual images. Extract those images into a folder.
Create the .ani cursor file
Install the Window application, AniTuner. Which some consider the best application for creating
In AniTuner, hit "Create a new animated cursor"
Then "Edit Cursor Frames" on the left side
Then "Import image(s)" to import the images from that were downloaded from EZGif.
If the image looks good, hit "Okay" on the popup. Might need to select the "transparent" checkbox.
If the "Resize Image" popup shows, select the "Center image in the frame" option and hit "Okay".
Select the blank frame at the top left, and hit "Remove frame(s)".
Hit "Test Cursor" on the left side, to see what the cursor looks like. Hit "Set Length" at the bottom right to change the animation speed.
Finally, hit "Save Animated Cursor.." on the left side when the animation looks good.
Important - check the
.anifile that was created is under 80KB. Any larger and it won't work with the browser extension. If it's too large, EZGif can be used to optimize the gif and remove frames. In AniTuner, you can also try different cursor dimensions.
Use the .ani cursor in Chrome
- Get the Chrome extension, "Animated Cursors Forever!": https://chrome.google.com/webstore/detail/animated-cursors-forever/glbompdcoknijlagjdallgimohbcopem?hl=en
- After clicking on the installed extension, hit the "Choose File" button to upload the
- If the file isn't too large (less than 80KB), then the next time the website refreshes, it will use the animated cursor. Note that the cursor won't show immediately, you need to refresh the page to see the new cursor.